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

【操作步驟】

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

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

以下為部分代碼，其余代碼請瀏覽本節案例示例源代碼。

<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早秋的色調搭</li>                

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

</ul>        

</div>   

</div></div>

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

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

* {    

margin: 0px;    

padding: 0px;}

.container {

width: 430px;    

padding-left: 30px;}

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

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

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

width: 85px;                           /*寬度*/    

height: 30px;                          /*高度*/    

margin-top: 10px;                      /*頂部補白*/}

.one .right {

float: right;    

width: 345px;    

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

height: 35px;    

margin-bottom: 15px;}

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

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

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

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

h3 {    color: #FF0000;    

padding-bottom: 10px;    

font-size: 16px;}

ul {    padding-left: 10px;    

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

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