本例模仿淘寶網(wǎng)上的圖片布局，進(jìn)一步展示了在網(wǎng)頁(yè)設(shè)計(jì)中圖片與文字之間混排和用圖片布局的方法。

【操作步驟】

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

第2步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。在本例中，首先用<div>標(biāo)簽設(shè)置container容器，在此頁(yè)面中，所有內(nèi)容分為4個(gè)部分，每個(gè)部分用one和two分為兩塊，one中又分為left和right兩部分，分別定義圖片和下邊框，在two中也分為left和right兩部分，分別定義了圖片和文字列表。

以下為部分代碼，其余代碼請(qǐng)瀏覽本節(jié)案例示例源代碼。

<div class="container">

<div class="one">        

<div class="left"> 

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

</div>        

<div class="right"> 

</div>    

</div>    

<div class="two">        

<div class="left"> <img src="images/002.jpg"/> </div>        

<div class="right">            

<h3>性感透視衫席卷8月街頭</h3>            

<ul>                

<li>明星來(lái)示范 早秋穿搭有新招</li>                

<li>時(shí)尚女生2011早秋的色調(diào)搭</li>                

<li>秋風(fēng)起 最潮手袋購(gòu)入必讀美容</li>            

</ul>        

</div>   

</div></div>

此時(shí)可以看到，網(wǎng)頁(yè)的基本結(jié)構(gòu)已經(jīng)搭建好了，但是由于沒(méi)有進(jìn)行CSS樣式設(shè)置，界面并不美觀。

第3步，定義網(wǎng)頁(yè)基本屬性以及container容器的寬度和左側(cè)內(nèi)邊距。

* {    

margin: 0px;    

padding: 0px;}

.container {

width: 430px;    

padding-left: 30px;}

以上代碼中，*{margin:0px;padding:0px}表示將網(wǎng)頁(yè)中所有標(biāo)簽的padding和margin都設(shè)定為0px，*可以理解為一個(gè)通配符，指的是所有標(biāo)簽。

第4步，定義第一部分內(nèi)容中的one部分，這一部分為one.left和one.right。

.one .left {    float: left;                           /*左浮動(dòng)*/    

width: 85px;                           /*寬度*/    

height: 30px;                          /*高度*/    

margin-top: 10px;                      /*頂部補(bǔ)白*/}

.one .right {

float: right;    

width: 345px;    

border-bottom: #CCCCCC 1px dashed;      /*底部邊框*/    

height: 35px;    

margin-bottom: 15px;}

.left中的內(nèi)容包含了一個(gè)<img>標(biāo)簽，left類樣式定義了其浮動(dòng)為左浮動(dòng)。.right中沒(méi)有實(shí)際的內(nèi)容，只是在right類樣式中定義了底部邊框。

第5步，第4步實(shí)現(xiàn)了one部分的設(shè)置，接下來(lái)進(jìn)行two.left和two.right部分的設(shè)置。

.two .left {    

float: left;    

width: 120px;    

height: 85px;}

.two .right {    

float: right;    

width: 280px;

height: 85px;    padding-left: 30px;}

.two .left img {    border: #FF3300 1px solid;    /*圖片邊框*/    margin-left: 5px;}

two.left與one.left一樣，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都包含了一個(gè)<img>標(biāo)簽，同樣將圖片設(shè)置為左浮動(dòng)。two.right標(biāo)簽中包含了一個(gè)<h3>標(biāo)簽和一個(gè)<ul>標(biāo)簽，分別定義了標(biāo)題和文字列表。另外，在left.img中定義了圖片樣式。

第6步，定義<h3>標(biāo)簽的標(biāo)題樣式和<ul>標(biāo)簽的列表樣式。

h3 {    color: #FF0000;    

padding-bottom: 10px;    

font-size: 16px;}

ul {    padding-left: 10px;    

font-size: 14px;}li { padding-bottom: 5px; }

在<h3>標(biāo)簽中定義了網(wǎng)頁(yè)設(shè)計(jì)時(shí)標(biāo)題的字體大小和顏色，并設(shè)置了底部補(bǔ)白。<ul>標(biāo)簽定義了文字列表，關(guān)于對(duì)<ul>標(biāo)簽的樣式定義會(huì)在后面的章節(jié)中詳細(xì)介紹。