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

【操作步驟】

第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html.。

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

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

第3步，在網(wǎng)站建設(shè)中定義網(wǎng)頁(yè)基本屬性及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下所有元素的水平對(duì)齊方式為居中對(duì)齊，定義了container的寬度、高度以及邊框樣式。background-im-age:url(bg.jpg)語(yǔ)句的作用是為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)懸停時(shí)顯示下劃線*/    

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

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

<a>

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