在網(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ì)介紹。