前面的示例展示了在設計網頁用列表制作新聞欄目、菜單等網頁元素，實際上，列表還能在網頁設計中進行簡單的排版，尤其是對圖文的排列，是網絡中經常見到的形式，本例以名為“世界十大名車欣賞”的網頁為例，介紹在網站建設時列表排版的應用。
【操作步驟】
第1步，啟動Dreamweaver，新建一個網頁，保存為index.html。
第2步，首先構建網頁結構。在本例中，應用<ul>標簽創(chuàng)建列表，在每一個<li>標簽中添加圖片，從而實現本例效果。
<h3><a href="#/">世界十大名車欣賞</a></h3><ul>
<li> <a href="#"><img src="images/1.jpg" alt="1"><span>世界十大名車之一：恩佐.法拉利</span></a></li>
<li> <a href="#"> <img src="images/2.jpg" alt="2"> <span>世界十大名車之二：蘭博基尼</span></a></li>
<li> <a href="#"> <img src="images/3.jpg" alt="3"> <span>世界十大名車之三：奔馳SLR</span></a></li>
<li> <a href="#"> <img src="images/4.jpg" alt="4"> <span>世界十大名車之四：布加迪.威龍</span></a></li>
<li> <a href="#"> <img src="images/5.jpg" alt="5"> <span>世界十大名車之五：福特GT</span></a></li>
<li> <a href="#"> <img src="images/6.jpg" alt="6"> <span>世界十大名車之六：克萊斯勒ME-Four-Twelve</span> </a></li>
<li> <a href="#"> <img src="images/7.jpg" alt="6"> <span>世界十大名車之七：阿斯頓.馬丁DB9</span></a></li>
<li> <a href="#"> <img src="images/8.jpg" alt="6"> <span>世界十大名車之八：保時捷CarreraGT</span></a></li>
<li> <a href="#"> <img src="images/9.jpg" alt="6"> <span>世界十大名車之九：賓利歐陸 GT</span></a></li>
<li> <a href="#"> <img src="images/10.jpg" alt="6"> <span>世界十大名車之十：帕格尼—風之子</span></a></li>
<div style="clear:both;"></div></ul>
此時，網頁的基本結構已經創(chuàng)建完成，由于沒有進行CSS控制，所以界面還離我們希望的樣式相差甚遠。
第3步，在<head>標簽內添加<styletype="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式，定義網頁的基本屬性和標題樣式。
body,h3,ul { /*設置頁面、h3標簽、<ul>標簽的四周補白和內邊距都為0*/
margin:0;
padding:0;}h3 {/*h3標題樣式*/
width:800px; /*寬度*/
height:30px; /*高度*/
margin:20px auto 0 auto; /*設置頂部補白為20px，左右距離為auto，實現h3塊的居中顯示*/
font-size:20px; /*字體大小*/
text-indent:10px; *首行縮進*/
line-height:30px; /*行間距，可實現文字的垂直居中*/
background:#E4E1D3; /*背景顏色*/
text-align:center; /*h3標簽中文字的居中*/}h3 a { /*標題的鏈接樣式*/
color:#c00; /*字體顏色*/ text-decoration:none; /*不顯示下劃線*/}
h3 a:hover { /*鼠標懸停時標題的樣式*/
color:#000; /*字體顏色*/}
在以上代碼中用body,h3,ul{ mar-gin:0;padding:0;}語句設置了body、h3和<ul>標簽的margin和padding屬性；在a樣式類和a:hover樣式中，分別定義了標題的鏈接樣式和鼠標經過時的樣式。
第4步，設置ul樣式類和<li>標簽的樣式，從而實現對網頁中圖文的排版。
ul {/*ul列表樣式*/ width:774px; /*ul列表寬度*/
margin:0 auto; /*ul中所有內容居中顯示*/
padding-left:20px; /*左側內邊距*/
border:3px solid #E4E1D3; /*邊框樣式*/}
ul li {/*<li>標簽樣式*/
float:left; /*<li>標簽中的內容橫向顯示*/
margin:5px 10px 3px 0px; /*四周的外邊距*/
list-style-type:none; /*不顯示項目標簽*/}
ul li a {/*設置li中的<a>標簽樣式*/
display:block; /*定義為塊級元素，使鼠標進入塊中任何位置鏈接就被激活*/
width:370px; /*寬度*/
height:175px; /*高度*/
text-decoration:none; /*不顯示下劃線*/
}
以上代碼定義了ul的寬度為774px，邊框樣式為寬3px的實線，774px加兩條3px的邊框恰好和前面定義的h3寬度800px一致。
第5步，設置<li>標簽下的<img>標簽樣式和<span>標簽樣式。
ul li a img { /*設置li中圖片樣式*/
width:370px; /*圖片寬度*/
height:150px; /*圖片高度*/
border:1px #000099 solid; /*1px寬的邊框*/}
ul li a span { /*每個圖片標題的樣式*/
display:block; width:370px; /*寬度是370px*/
height:23px; /*高寬*/
line-height:20px; /*行間距*/
font-size:14px; /*字體大小*/
text-align:center; /*文字居中*/
color:#333; /*文字顏色*/
}
在上述代碼中，設置了圖片高度是150px，圖片的上下邊框各1px，圖片標題高寬是23px，三者相加正好是前面講的設置li的高度175px。
當前文章標題：如何在網頁設計中設計列表版式
當前URL：http://51zuanshi.com.cn/news/wzzz/3094.html
上一篇：如何設計多級菜單列表
