在網(wǎng)頁設(shè)計中，經(jīng)常能見到多張圖片排列的情況，在本例中，將介紹對于多圖排列的設(shè)置，并進(jìn)一步了解CSS設(shè)置圖片的方法。

【操作步驟】

第1步，啟動Dreamweaver，新建文檔，保存為index.html.。

第2步，構(gòu)建網(wǎng)頁的基本結(jié)構(gòu)。本例中首先用<div>標(biāo)簽設(shè)置container容器，然后分別用<div>標(biāo)簽將頁面分為4塊，每一塊中包含一個<img>標(biāo)簽、一個<a>標(biāo)簽和一個<p>標(biāo)簽。

<div class="container">    

<div class="one"><a href="#">

<img src="images/1.jpg">        

<p>老虎</p>        

</a></div>    

<div class="one"><a href="#">

<img src="images/2.jpg">        

<p>大熊貓</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/3.jpg">        

<p>大象</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/4.jpg">        

<p>野馬</p>

</a>

</div>

</div>

此時的顯示效果極其簡單，僅僅是簡單的圖片和標(biāo)題。

第3步，在網(wǎng)站建設(shè)中定義網(wǎng)頁基本屬性及container容器的樣式。

body {    margin: 20px;

padding: 0;}

.container {    text-align: center;    

width: 800px;    

height: 240px;    

background-image: url(images/bg.jpg);    

border: 1px #000 solid;}

首先在body中定義了四周補(bǔ)白以及內(nèi)邊距為0。在container中定義了container下所有元素的水平對齊方式為居中對齊，定義了container的寬度、高度以及邊框樣式。background-im-age:url(bg.jpg)語句的作用是為container標(biāo)簽添加名為bg.jpg的背景圖片。

第4步，設(shè)置container容器下的<div>標(biāo)簽，以及在<div>下的<p>標(biāo)簽的樣式。

.container div {    

float: left;    

margin-top: 30px;    

margin-left: 35px;}

.container p {    

font-size: 20px;    

font-family: 黑體;}

第5步，設(shè)置<a>標(biāo)簽樣式。

a {    text-decoration: none;                      /*不顯示超鏈接的下劃線*/   

color: #204402;                             /*字體顏色*/}a:hover {

text-decoration: underline;                 /*鼠標(biāo)懸停時顯示下劃線*/    

color: red;                                 /*鼠標(biāo)懸停時字體顏色*/}

a:hover img { border: 4px #0b35ce solid;        /*鼠標(biāo)懸停時圖片的邊框樣式*/}

<a>

標(biāo)簽的樣式設(shè)置了下劃線，a:hover定義了當(dāng)鼠標(biāo)懸停時鏈接的樣式。a:hover img定義了圖片在鼠標(biāo)懸停時的樣式。關(guān)于網(wǎng)頁制作中<a>標(biāo)簽的CSS樣式將在后面章節(jié)詳細(xì)介紹。