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