前面详细介绍了CSS可设置的列表样式，本节通过在网页设计中新闻栏目实例练习CSS设置列表的方法，以及列表在网页中的应用。
【操作步骤】
第1步，启动Dreamweaver，新建一个网页，保存为index.html。
第2步，构建网页结构。在本示例中首先用3个<div>标签设置了新闻栏目的容器，在每一个<div>块中分别用<ul>标签和<li>标签定义了新闻栏目和新闻标题。
<div class="junshi">
<h2>军事新闻<span>more...</span></h2>
<ul>
<li><a href="#">中国为何不怕美国 英国人一句话道出真相。</a> </li>
<li><a href="#">日本记者南沙回来很感慨：终于领略中国的强大。</a></li>
<li><a href="#">外媒：运载马航MH17残骸卡车抵达荷兰境内。</a> </li>
<li><a href="#">揭秘藏在中国的军事间谍：自称“军迷”搜集资料。</a></li>
</ul>
</div>
<div class="caijing">
<h2>财经资讯<span>more...</span>
</h2> <ol> <li><a href="#">莫迪亚诺小说年底密集上市 国内出版商争抢版权。</a> </li>
<li> <a href="#">银行间外汇市场事前准入许可明年取消。 </a></li>
<li><a href="#">华润万家花椒粉铅超标两倍 称是“土地”惹的祸。 </a></li>
<li> <a href="#">人民币即期汇率两天暴跌逾500点。</a></li>
</ol>
</div><div class="yule">
<h2>娱乐资讯<span>more...</span></h2>
<ul>
<li><a href="#">林志玲张柏芝范冰冰章子怡 夜店性感狂野销魂。</a> </li>
<li><a href="#"> 《匆匆那年》热映 欢乐六人行特辑爆主演趣事。 </a></li>
<li><a href="#">杜德伟曝关之琳将结婚 指王菲嘉玲生日玩快闪。</a> </li>
<li><a href="#">李晨邓超Angelababy 细数《奔跑吧兄弟》嘉宾。</a></li>
</ul>
</div>
此时网页的基本结构已经搭建好了，但是由于在设计网页时没有进行CSS样式设置，界面中只是把文字内容罗列起来，没有任何修饰。
第3步，在网站建设中，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，定义网页基本属性、新闻栏目的样式以及文字“more…”样式。
body { /*网页基本属性*/
font-size: 13px; /*字体大小*/
font-family: "黑体"; /*字体样式*/
margin: 0px; /*清除页边距*/
padding: 0px; /*清除页边距*/
background:url(images/bg.png) no-repeat; /*模拟新闻栏目页面效果*/}
h2 { /*新闻栏目的文本样式*/ margin: 24px 0 0 5px; /*新闻栏目文字上下补白*/
color: #006699; font-size: 16px;}
h2 span { /*文字“more…”的显示样式*/
color: #999; float: right; /*右对齐*/}
以上代码中，设置了页面的基本属性，<h2>标签的内容是新闻的栏目，设置了其字体颜色、大小等属性。<span>标签的内容是文字“more…”，
第4步，定义网页<div>块，也就是新闻栏目块的共有属性。
div{ /*每一个新闻栏目块的样式*/
line-height:16pt; /*行间距*/
width:400px; /*块的宽度*/
margin:10px 0 0 10px; /*各个新闻块之间距离*/}
第5步，为列表<ul>和<ol>添加CSS样式。
.part1 ul{ /*第一个新闻块的列表样式*/
margin-left:40px; /*文字左侧离边框的距离*/
list-style-type:upper-alpha; /*项目符号是大写字母*/}.part2 ol { /*第二个新闻块的列表样式*/
margin-left:40px;
list-style-type: upper-roman; /*项目符号是大写罗马字母*/}.part3 ul { /*第三个新闻块的列表样式*/
margin-left:40px;
list-style-type: circle; /*项目符号是空心圆*/}
以上代码中，分别设置了3个新闻栏目的列表样式。可以看到，项目符号和编号按设置的样式进得了显示。
第6步，从图4.17中可以看出，网页已初见效果，最后定义<li>标签和<a>标签的样式。
li { /*<li>标签样式，也就是新闻标题样式*/
margin:5px 0 5px 0; /*每条新闻标题之间间隔*/}a { /*链接样式*/
text-decoration:none; /*不显示下划线*/
color:#000;}此时新闻栏目示例设计完成。
当前文章标题：在网页设计中设计新闻列表
当前URL：http://www.lyjtt.cn/news/wzzz/3091.html
上一篇：在网页设计中定义列表横竖显示
下一篇：网页设计中的导航列表
