8-1.html
<html>
<head>
<title>项目列表</title>
<style>
<!--
body{
  background-color:#c1daff;
}
ul{
  font-size:0.9em;
  color:#00458c;
  list-style-type:decimal;    /* 项目编号 */
}
-->
</style>
     </head>
<body>
<p>水上运动</p>
<ul>
  <li>freestyle 自由泳</li>
  <li>backstroke 仰泳</li>
  <li>breaststroke 蛙泳</li>
  <li>butterfly 蝶泳</li>
  <li>individual medley 个人混合泳</li>
  <li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
8-2.html
<html>
<head>
<title>项目列表</title>
<style>
<!--
body{
  background-color:#c1daff;
}
ul{
  font-size:0.9em;
  color:#00458c;
  list-style-type:decimal;    /* 项目编号 */
}
li.special{
  list-style-type:circle;
}
-->
</style>
     </head>
<body>
<p>水上运动</p>
<ul>
  <li>freestyle 自由泳</li>
  <li>backstroke 仰泳</li>
  <li class="special">breaststroke 蛙泳</li>
  <li>butterfly 蝶泳</li>
  <li>individual medley 个人混合泳</li>
  <li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
8-3.html
<html>
<head>
<title>图片符号</title>
<style>
<!--
body{
  background-color:#c1daff;
}
ul{
  font-family:Arial;
  font-size:13px;
  color:#00458c;
  list-style-p_w_picpath:url(icon1.jpg);  /* 图片符号 */
}
-->
</style>
     </head>
<body>
<p>自行车</p>
<ul>
  <li>Road cycling 公路自行车赛</li>
  <li>Track cycling 场地自行车赛</li>
  <li>sprint    追逐赛</li>
  <li>time trial 计时赛</li>
  <li>points race    计分赛</li>
  <li>pursuit    争先赛</li>
  <li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html>
8-4.html
<html>
<head>
<title>图片符号</title>
<style>
<!--
body{
  background-color:#c1daff;
}
ul{
  font-family:Arial;
  font-size:13px;
  color:#00458c;
  list-style-type:none;          /* 不显示项目符号 */
}
li{
  background:url(icon1.jpg) no-repeat;  /* 添加为背景图片 */
  padding-left:25px;            /* 设置图标与文字的间隔 */
}
-->
</style>
     </head>
<body>
<p>自行车</p>
<ul>
  <li>Road cycling 公路自行车赛</li>
  <li>Track cycling 场地自行车赛</li>
  <li>sprint    追逐赛</li>
  <li>time trial 计时赛</li>
  <li>points race    计分赛</li>
  <li>pursuit    争先赛</li>
  <li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html>
8-5.html
<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
  background-color:#ffdee0;
}
#navigation {
  width:200px;
  font-family:Arial;
}
#navigation ul {
  list-style-type:none;        /* 不显示项目符号 */
  margin:0px;
  padding:0px;
}
#navigation li {
  border-bottom:1px solid #ED9F9F;  /* 添加下划线 */
}
#navigation li a{
  display:block;            /* 区块显示 */
  padding:5px 5px 5px 0.5em;
  text-decoration:none;
  border-left:12px solid #711515;    /* 左边的粗红边 */
  border-right:1px solid #711515;    /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
  background-color:#c11136;
  color:#FFFFFF;
}
#navigation li a:hover{          /* 鼠标经过时 */
  background-color:#990020;      /* 改变背景色 */
  color:#ffff00;            /* 改变文字颜色 */
}
-->
</style>
     </head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">My Blog</a></li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Next Station</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</div>
</body>
</html>
8-6.html
<html>
<head>
<title>菜单的横竖转换</title>
<style>
<!--
body{
  background-color:#ffdee0;
}
#navigation {
  font-family:Arial;
}
#navigation ul {
  list-style-type:none;        /* 不显示项目符号 */
  margin:0px;
  padding:0px;
}
#navigation li {
  float:left;              /* 水平显示各个项目 */
}
#navigation li a{
  display:block;            /* 区块显示 */
  padding:3px 6px 3px 6px;
  text-decoration:none;
  border:1px solid #711515;
  margin:2px;
}
#navigation li a:link, #navigation li a:visited{
  background-color:#c11136;
  color:#FFFFFF;
}
#navigation li a:hover{          /* 鼠标经过时 */
  background-color:#990020;      /* 改变背景色 */
  color:#ffff00;            /* 改变文字颜色 */
}
-->
</style>
     </head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">My Blog</a></li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Next Station</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</div>
</body>
</html>
8-7.html
<html>
<head>
<title>菜单横竖转换</title>
<style>
<!--
body{
  background-color:#f8ffd3;
  margin:0px; padding:0px;
}
table.banner{
  background:url(banner_bg.jpg) repeat-x;
  width:100%;
}
table.btn{
  background:url(button1_bg.jpg) repeat-x;
  width:100%;
}
#navigation{
  margin:0px; padding:0px;
  list-style-type:none;
  height:32px;
  font-size:12px;
}
#navigation li{
  text-align:center; width:80px; height:32px;
  background:url(button1.jpg) repeat-x;
  float:left;  
}
#navigation li a{
  padding:10px 0px 10px 0px;
  text-decoration:none;
  display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
  color:#FFFFFF;
  background:url(button2.jpg) no-repeat;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner"><tr><td align="left"><img src="banner1.jpg" border="0"></td></tr></table>
<table cellpadding="0" cellspacing="0"class="btn">
  <tr>
    <td>
    <ul id="navigation">
      <li><a href="#">首页导读</a></li>    
      <li><a href="#">推荐版面</a></li>
      <li><a href="#">推荐文章</a></li>  
      <li><a href="#">人气排名</a></li>
      <li><a href="#">新开讨论区</a></li>
      <li><a href="#">休闲娱乐</a></li>
      <li><a href="#">常见问题</a></li>
    </ul>
    </td>
  </tr>
</table>
</body>
</html>
8-8.html
<html>
<head>
<title>百度——全球最大中文搜索引擎</title>
<style type="text/css">
td,p{font-size:12px;}
p{width:600px; margin:0px; padding:0px;}
.ff{font-family:Verdana; font-size:16px;}
#navigation{
  margin:0px auto;
  font-size:12px;
  padding:0px;
  border-bottom:1px solid #00c;
  background:#eee;
  width:600px;height:18px;
}
#navigation li{
  float:left;          /* 水平菜单 */
  list-style-type:none;    /* 不显示项目符号 */
  margin:0px;padding:0px;
  width:67px;
}
#navigation li a{
  display:block;        /* 块显示 */
  text-decoration:none;
  padding:4px 0px 0px 0px;
  margin:0px;
}
#navigation li a:link, #navigation li a:visited{
  color:#0000CC;
}
#navigation li a:hover{      /* 鼠标经过时 */
  text-decoration:underline;
  background:#FFF;
  padding:4px 0px 0px 0px;
  margin:0px;
}
#navigation li#h{width:56px;height:18px;}    /* 左侧空间 */
#navigation li#more{width:85px;height:18px;}  /* “更多”按钮 */
#navigation .current{              /* 当前页面所在 */
  background:#00C;
  color:#FFF;
  padding:4px 0px 0px 0px;
  margin:0px;
  font-weight:bold;
}
</style>
     </head>
<body>
<center><br><img src="http://www.baidu.com/img/logo.gif"><br><br><br><br>
<div id="navigation">
<ul>
  <li id="h"></li>
  <li><a href="#">资 讯</a></li>
  <li class="current">网 页</li>
  <li><a href="#">贴 吧</a></li>
  <li><a href="#">知 道</a></li>
  <li><a href="#">MP3</a></li>
  <li><a href="#">图 片</a></li>
  <li id="more"><a href="#">更 多 >></a></li>
</ul>
</div>
<p style="height:44px;"> </p>
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td width="92"></td>
  <td><form><input type="text" name="wd" class="ff" size="35">
  <input type="submit" value="百度搜索"></form></td>
  <td width="92" valign="top"><a href="#">搜索帮助</a><br><a href="#">高级搜索</a></td>
  </tr>
</table>
</center>
</body>
</html>
8-9.css
body{
  margin: 10px;
}
#content{                 /* 具体内容 */
  border-left: 1px solid #11a3ff;     /* 左边框 */
  border-right: 1px solid #11a3ff;     /* 右边框 */
  border-bottom: 1px solid #11a3ff;   /* 下边框 */
  padding: 15px;
  font-size: 12px;
}
ul#tabnav{
  list-style-type: none;
  margin: 0px;
  padding-left: 0px;           /* 左侧无空隙 */
  padding-bottom: 23px;
  border-bottom: 1px solid #11a3ff;   /* 菜单的下边框 */
  font: bold 12px verdana, arial;
}
ul#tabnav li{
  float: left;
  height: 22px;
  background-color: #a3dbff;
  margin: 0px 3px 0px 0px;   
  border: 1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
  display: block;             /* 块元素 */
  color: #006eb3;
  text-decoration: none;
  padding: 5px 10px 3px 10px;
}
ul#tabnav a:hover{
  background-color: #006eb3;
  color: #FFFFFF;
}
body#home li.home, body#news li.news,  /* 当前页面的菜单项 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
  border-bottom: 1px solid #FFFFFF;   /* 白色下边框，覆盖<ul>中的蓝色下边框 */
  color: #000000;
  background-color: #FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited,  /* 当前页面的菜单项的超链接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
  color: #000000;
  background-color: #FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
  color: #006eb3;
  text-decoration: underline;
}
8-9_blog.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
     </head>
<body id="blog">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <h3>Blog</h3>
</div>
</body>
</html>
8-9_home.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
  width:160px;
  float:left;
  padding-right:15px;
}
#leftpic a:link, #leftpic a:visited{
  color:#006eb3;
  text-decoration:none;
}
#leftpic a:hover{
  color:#000000;
  text-decoration:underline;
}
img{
  border:1px solid #0066b0;
  margin-bottom:5px;
}
ul#list{
  list-style-type:none;
  margin:0px;
  padding:5px 0px 5px 2px;
}
ul#list li{
  line-height:18px;
}
ul#list li a:link{
  color:#000000;
  text-decoration:none;
}
ul#list li a:visited{
  color:#333333;
  text-decoration:none;
}
ul#list li a:hover{
  color:#006eb3;
  text-decoration:underline;
}
-->
</style>
     </head>
<body id="home">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <span id="leftpic">
    <a href="#"><img src="pic1.jpg"><br>
    <center>追忆往事，展望未来</center></a>
  </span>
  <ul id="list">
    <li><a href="#">[首页] 追忆往事，展望未来。新年寄语</a></li>
    <li><a href="#">[新闻] 每年五一、十一长假，很多人不愿出门</a></li>
    <li><a href="#">[新闻] 清华大学电子系研制成功新一代...</a></li>
    <li><a href="#">[体育] 奥运火炬接力火热进行</a></li>
    <li><a href="#">[音乐] 网民调查，你最喜欢的音乐类型</a></li>
    <li><a href="#">[博客] 自由博客新版正式发布，网友...</a></li>
  </ul>
</div>
</body>
</html>
8-9_music.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
     </head>
<body id="music">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <h3>Music</h3>
</div>
</body>
</html>
8-9_news.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
     </head>
<body id="news">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <h3>News</h3>
</div>
</body>
</html>
8-9_nextstation.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
  float:left;
  padding-right:15px;
  padding-bottom:5px;
}
#leftpic a:link, #leftpic a:visited{
  color:#006eb3;
  text-decoration:none;
}
#leftpic a:hover{
  color:#000000;
  text-decoration:underline;
}
img{
  border:1px solid #0066b0;
  margin-bottom:5px;
}
ul#list{
  list-style-type:none;
  margin:0px;
  padding:3px 0px 5px 2px;
}
ul#list li{
  line-height:18px;
}
ul#list li a:link{
  color:#000000;
  text-decoration:none;
}
ul#list li a:visited{
  color:#333333;
  text-decoration:none;
}
ul#list li a:hover{
  color:#006eb3;
  text-decoration:underline;
}
-->
</style>
     </head>
<body id="nextstation">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <span id="leftpic">
    <a href="#"><img src="pic2.jpg"><br>
    <center>追忆往事，展望未来</center></a>
  </span>
  <ul id="list">
    <li>1. 在列车出发前，请将自己的手机置于无声状态。</li>
    <li>2. 遵守乘车秩序，不要抢占座位。</li>
    <li>3. 请勿在车厢内大声喧哗，或随意投弃杂物。</li>
    <li>4. 本次列车全部为无烟列车，车厢内严禁吸烟。</li>
    <li>5. 严禁携带易燃易爆等危险物品上车。</li>
    <li>6. 如需在车厢内拍照，请勿使用闪光灯。</li>
    <li>7. 请保持通道畅通，并留意距您最近的安全出口。</li>
  </ul>
</div>
</body>
</html>
8-9_sports.html
<html>
<head>
<title>流行的Tab菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
     </head>
<body id="sports">
<ul id="tabnav">
  <li class="home"><a href="8-9_home.html">首页</a></li>
  <li class="news"><a href="8-9_news.html">新闻</a></li>
  <li class="sports"><a href="8-9_sports.html">体育</a></li>
  <li class="music"><a href="8-9_music.html">音乐</a></li>
  <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
  <li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
  <h3>Sports</h3>
</div>
</body>
</html>

来源：《精通CSS+DIV网页样式与布局 》