本例模仿淘寶網上的圖片布局，進一步展示了在網頁設計中圖片與文字之間混排和用圖片布局的方法。

【操作步驟】

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

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

以下為部分代碼，其余代碼請瀏覽本節(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>明星來示范 早秋穿搭有新招</li>                

<li>時尚女生2011早秋的色調搭</li>                

<li>秋風起 最潮手袋購入必讀美容</li>            

</ul>        

</div>   

</div></div>

此時可以看到，網頁的基本結構已經搭建好了，但是由于沒有進行CSS樣式設置，界面并不美觀。

第3步，定義網頁基本屬性以及container容器的寬度和左側內邊距。

* {    

margin: 0px;    

padding: 0px;}

.container {

width: 430px;    

padding-left: 30px;}

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

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

.one .left {    float: left;                           /*左浮動*/    

width: 85px;                           /*寬度*/    

height: 30px;                          /*高度*/    

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

.one .right {

float: right;    

width: 345px;    

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

height: 35px;    

margin-bottom: 15px;}

.left中的內容包含了一個<img>標簽，left類樣式定義了其浮動為左浮動。.right中沒有實際的內容，只是在right類樣式中定義了底部邊框。

第5步，第4步實現了one部分的設置，接下來進行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一樣，在設計網頁時都包含了一個<img>標簽，同樣將圖片設置為左浮動。two.right標簽中包含了一個<h3>標簽和一個<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>標簽中定義了網頁設計時標題的字體大小和顏色，并設置了底部補白。<ul>標簽定義了文字列表，關于對<ul>標簽的樣式定義會在后面的章節(jié)中詳細介紹。