【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為index.html。
第2步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。本例中首先用<div>標(biāo)簽設(shè)置container容器，然后通過(guò)<div>標(biāo)簽創(chuàng)建網(wǎng)頁(yè)的title和content兩部分，又通過(guò)<ul>標(biāo)簽分別創(chuàng)建這兩個(gè)部分的列表。
<div id="container">
<div class="title"> /*title部分*/
<h3>財(cái)經(jīng)資訊</h3> /*title部分的標(biāo)題*/
<ul> /*title部分的新聞欄目*/
<li><a href="#">最新資訊</a></li>
<li><a href="#">國(guó)際財(cái)經(jīng)</a></li>
<li><a href="#">汽車房產(chǎn)</a></li>
</ul>
</div> <div class="content"> /*content部分*/
<p> /*content部分的標(biāo)題*/
<a href="#"><img src="images/1.jpg"/></a>
<span><a href="#">最新資訊</a></span>
</p>
<ul> /*content部分的新聞內(nèi)容*/
<li>·<a href="#">諸建芳:中國(guó)將繼續(xù)加強(qiáng)“反通縮”明年或降準(zhǔn)2次</a></li>
<li>·<a href="#">美聯(lián)儲(chǔ)出臺(tái)系統(tǒng)重要性銀行附加資本要求 </a></li>
<li>·<a href="#">所有省份制定大病保險(xiǎn)實(shí)施方案 北京等全面推開</a></li>
<li>·<a href="#">減持方正證券獲利3.18億元 鄭州煤電有望扭虧 </a></li>
<li>·<a href="#">牛市“撞腰”不足懼</a></li>
</ul>
</div>
<div class="list_unit" id="2">
<p> <a href="#"><img src="images/2.jpg">
</a>
<span><a href="#">國(guó)際財(cái)經(jīng)</a></span>
</p>
<ul>
<li>·<a href="#">全球最大集裝箱船“中海環(huán)球”輪首航寧波港</a></li>
<li>·<a href="#">中國(guó)中小企業(yè)全球發(fā)展論壇迎來(lái)重量級(jí)嘉賓</a></li>
<li>·<a href="#">建行龍卡全球支付卡跨境支付更方便</a></li>
<li>·<a href="#">明年美國(guó)經(jīng)濟(jì)增長(zhǎng)3.1%</a></li>
<li>·<a href="#">匯豐：2015年全球十大風(fēng)險(xiǎn)</a></li>
<li>·<a href="#">減持方正證券獲利3.18億元 鄭州煤電有望扭虧 </a></li>
<li>·<a href="#">牛市“撞腰”不足懼</a></li>
</ul>
</div>
<div class="list_unit" id="2">
<p>
<a href="#"><img src="images/2.jpg"></a> <span><a href="#">國(guó)際財(cái)經(jīng)</a></span> </p>
<ul>
<li>·<a href="#">全球最大集裝箱船“中海環(huán)球”輪首航寧波港</a></li>
<li>·<a href="#">中國(guó)中小企業(yè)全球發(fā)展論壇迎來(lái)重量級(jí)嘉賓</a></li>
<li>·<a href="#">建行龍卡全球支付卡跨境支付更方便</a></li>
<li>·<a href="#">明年美國(guó)經(jīng)濟(jì)增長(zhǎng)3.1%</a></li>
<li>·<a href="#">匯豐：2015年全球十大風(fēng)險(xiǎn)</a></li>
</ul>
</div>
<div class="list_unit" id="3">
<p> <a href="#"><img src="images/3.jpg"></a> <span><a href="#">汽車房產(chǎn)</a></span> </p>
<ul>
<li>·<a href="#">上海：奧迪Q3最高讓利8.6萬(wàn)元 豪華小型SUV</a></li>
<li>·<a href="#">上海：路虎發(fā)現(xiàn)4最高降13萬(wàn) 全國(guó)銷售現(xiàn)車充足 </a></li>
<li>·<a href="#">2015年投產(chǎn) 豐田擴(kuò)大投資提高M(jìn)irai產(chǎn)能 </a></li>
<li>·<a href="#">北京：新寶來(lái)現(xiàn)金優(yōu)惠8500元起 置換另享補(bǔ)貼</a></li>
<li>·<a href="#">首套房貸利率北京外資銀行能打折</a></li>
</ul>
</div>
<div class="di"></div> /*清除浮動(dòng)*/ </div></body>
網(wǎng)頁(yè)設(shè)計(jì)中，在整個(gè)container框架下，分別由title和con-tent兩塊組成，在title塊下，又包含了h3和ul兩部分。在content塊下，定義了<p>標(biāo)簽和<ul>標(biāo)簽。
第3步，在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義網(wǎng)頁(yè)基本屬性和wrap樣式。
* {/*網(wǎng)頁(yè)中所有標(biāo)簽的共同樣式*/
margin:0; /*外邊框?yàn)?*/
padding:0; /*內(nèi)邊框?yàn)?*/
font-size:12px; /*字體大小*/
color:#000; /*字體顏色*/
list-style:none; /*不顯示項(xiàng)目符號(hào)*/}a {/*定義網(wǎng)頁(yè)中所有的<a>標(biāo)簽樣式*/
color:#03c; text-decoration:none; /*不顯示下劃線*/}
a:hover{ text-decoration:underline; /*當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)顯示下劃線*/}#wrap{/*wrap容器樣式*/
width:418px; /*寬度*/
margin:30px auto; /*上下補(bǔ)白是30px，左右為auto，顯示為居中的效果*/
border:1px solid #999; /*邊框樣式*/}
在以上代碼中，首先定義了網(wǎng)頁(yè)基本屬性；wrap容器樣式類中定義了容器寬度和居中對(duì)齊等屬性。
第4步，設(shè)置title部分樣式。
.title { /*定義title樣式*/
width:418px; /*title塊的寬度*/
height:32px; /*title塊的高寬*/
border-bottom:1px solid #999; /*添加底部邊框*/
background:#f2f9fd; /*背景顏色*/}.title h3 { /*定義title部分*/
float:left; /*左浮動(dòng)*/
ine-height:32px; /*行間距，實(shí)現(xiàn)文字垂直居中*/
padding-left:20px; /*左側(cè)內(nèi)間距*/}.title ul { /*title中列表樣式*/
float:right; /*右浮動(dòng)*/ width:230px; /*列表寬度*/}
.title ul li { /*<li>標(biāo)簽樣式*/ float:left; line-height:32px; /*行間距*/
padding:0 5px; /*左右補(bǔ)白5px*/}.title ul li a { /*<a>標(biāo)簽樣式*/
color:#333; /*字體顏色*/}
第5步，設(shè)置warp樣式。
.warp { /*warp塊樣式*/
height:100px; /*塊高寬*/
margin-left:15px; /*左側(cè)補(bǔ)白*/
padding:15px 0 8px 0; /*頂部?jī)?nèi)邊距15px，底部?jī)?nèi)邊距8px*/
border-bottom:1px dotted #9AC4E9; /*底部邊框*/}
第6步，完成warp塊中<p>標(biāo)簽樣式的設(shè)置，在<p>標(biāo)簽中，包含了<a>標(biāo)簽、<img>標(biāo)簽和<span>標(biāo)簽，分別定義了新聞欄目的圖片和欄目標(biāo)題。
在<p>標(biāo)簽中，包含了<a>標(biāo)簽、<img>標(biāo)簽和<span>標(biāo)簽，分別定義了新聞欄目的圖片和欄目標(biāo)題。
.warp p { /*warp塊中<p>標(biāo)簽樣式*/
float:left; /*左浮動(dòng)，使<p>標(biāo)簽下的圖片和標(biāo)題靠左*/
width:156px; /* <p>標(biāo)簽的寬度*/}
.warp p a { /*<a>標(biāo)簽樣式*/ display:block; /*定義<a>標(biāo)簽為塊級(jí)元素*/}
.warp p a:hover { border:1px dashed #00f; /*當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)顯示邊框*/ }
.warp span a { /*warp塊下的<span>標(biāo)簽樣式也就是標(biāo)題樣式*/ height:22px; /*高寬*/
line-height:22px; /*文字實(shí)現(xiàn)垂直居中*/ text-align:center; /*水平居中*/}.warp span a:hover { /*鼠標(biāo)經(jīng)過(guò)時(shí)的<span>標(biāo)簽樣式*/ border:0; /*清除邊框*/
color:#c00; /*字體顏色*/}
在以上代碼中，定義了warp中的<p>標(biāo)簽樣式，在<p>標(biāo)簽中分別包含了一幅圖片和一個(gè)標(biāo)題，在這里關(guān)鍵是<a>標(biāo)簽和<span>標(biāo)簽的樣式設(shè)置。其中a和a:hover的樣式是針對(duì)圖片的設(shè)置，spana和span a:hover是針對(duì)標(biāo)題的樣式，其中bor-der:0是清除邊框，因?yàn)樵?a href="http://www.gtalker.cn" target="_self" title="昆明網(wǎng)站制作">網(wǎng)頁(yè)設(shè)計(jì)時(shí)，語(yǔ)句warp pa:hove{ border:1px dashed #00f;}樣式類中定義了<p>標(biāo)簽下所有的<a>標(biāo)簽顯示邊框，所以在這里需要清除邊框。
第7步，從圖4.38中可以看到，網(wǎng)頁(yè)基本已經(jīng)完成，最后再給warp中的<ul>標(biāo)簽進(jìn)行設(shè)置。
.warp ul { /*warp中ul樣式*/
float:right; /*右浮動(dòng)*/
width:216px; /*ul寬度*/
margin:5px 0px; /*設(shè)置上下補(bǔ)白*/}
.warp ul li a:hover{ /*鼠標(biāo)經(jīng)過(guò)時(shí)的li效果*/
color:red;}.clear { /*清除左右浮動(dòng)*/ clear:both;}
以上代碼設(shè)置了網(wǎng)站建設(shè)時(shí)warp中ul列表樣式，此時(shí)網(wǎng)頁(yè)完全創(chuàng)建完成。
當(dāng)前文章標(biāo)題：如何在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)圖文混排列表效果
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/3095.html
