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