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