前面的示例展示了在设计网页用列表制作新闻栏目、菜单等网页元素，实际上，列表还能在网页设计中进行简单的排版，尤其是对图文的排列，是网络中经常见到的形式，本例以名为“世界十大名车欣赏”的网页为例，介绍在网站建设时列表排版的应用。
【操作步骤】
第1步，启动Dreamweaver，新建一个网页，保存为index.html。
第2步，首先构建网页结构。在本例中，应用<ul>标签创建列表，在每一个<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>
此时，网页的基本结构已经创建完成，由于没有进行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://www.lyjtt.cn/news/wzzz/3094.html
上一篇：如何设计多级菜单列表
