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