本例模仿淘寶網(wǎng)上的圖片布局，進一步展示了在網(wǎng)頁設計中圖片與文字之間混排和用圖片布局的方法。
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為index.html.。
第2步，構建網(wǎng)頁結構。在本例中，首先用<div>標簽設置container容器，在此頁面中，所有內(nèi)容分為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早秋的色調(diào)搭</li>
<li>秋風起 最潮手袋購入必讀美容</li>
</ul>
</div>
</div></div>
此時可以看到，網(wǎng)頁的基本結構已經(jīng)搭建好了，但是由于沒有進行CSS樣式設置，界面并不美觀。
第3步，定義網(wǎng)頁基本屬性以及container容器的寬度和左側內(nèi)邊距。
* {
margin: 0px;
padding: 0px;}
.container {
width: 430px;
padding-left: 30px;}
以上代碼中，*{margin:0px;padding:0px}表示將網(wǎng)頁中所有標簽的padding和margin都設定為0px，*可以理解為一個通配符，指的是所有標簽。
第4步，定義第一部分內(nèi)容中的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中的內(nèi)容包含了一個<img>標簽，left類樣式定義了其浮動為左浮動。.right中沒有實際的內(nèi)容，只是在right類樣式中定義了底部邊框。
第5步，第4步實現(xiàn)了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一樣，在設計網(wǎng)頁時都包含了一個<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>標簽中定義了網(wǎng)頁設計時標題的字體大小和顏色，并設置了底部補白。<ul>標簽定義了文字列表，關于對<ul>標簽的樣式定義會在后面的章節(jié)中詳細介紹。
當前文章標題：網(wǎng)頁設計中的圖片布局
當前URL：http://www.gtalker.cn/news/wzzz/3106.html
