《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条

来源：互联网发布：有关网络暴力的视频编辑：程序博客网时间：2024/05/18 02:42

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。

第五章、对列表应用样式和创建导航条
5.1 基本样式列表[code]
/*用图片替换列表符号*/
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
background:url(bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
[/code]5.2 创建垂直导航条[code]
/*垂直导航条，无非就是给列表固定高度宽度，加上底色和翻转*/
ul{
margin:0;
padding:0;
list-style-type:none;
}
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background:#94b8e9 url(imags/pixy-rollover.gif) no-repeat left center;
text-indent:50px;
}
/*这时每个导航链接之间有双重实线，用下面的改变去掉中间的实线*/
ul a{
display:block;
width:200px;
height:39px;
line-height:39px;
color:#000;
text-decoration:none;
background:#94b8e9 url(imags/pixy-rollover.gif) no-repeat left bottom;
text-indent:50px;
}
li.first a{
height:40px;
line-height:40px;
}
/*实现翻转*/
a:hover{
background-position:right bottom;
color:#fff;
}
/*修复IE的BUG*/
li{
display:inline;/*否则在IE中列表上下会出现很大的空白*/
}
[/code]5.3 在导航条中突出显示当前页面[code]
<body id='home'>
<ul id='mainNav'>
<li class='home'><a href='http://www.cn09.com'>Home</a></li>
<li class='bbs'><a href='http://bbs.cn09.com'>BBS</a></li>
</ul>
</body>

#home #mainNav .home a,
#bbs #mainNav .bbs a{
background-position:right bottom;
color:#fff;
cursor:default;
}
[/code]5.4 创建水平导航条[code]
/*定义导航条宽度和背景*/
ul{
margin:0;
padding:0;
list-style:none;
width:720px;
background:#FAA819 url(images/mainNavBg.gif) repeat -x;
}
/*导航条变横向*/
ul li{
float:left;
}
ul{
float:left;/*避免ul背景被隐藏*/
}
ul a{
display:block;
padding:0 2em;
line-height:2.1em;
background:url(images/divider.gif) repeat-y left top;
text-decoration:none;
color:#fff;
}
ul .first a{
background:none;/*去掉第一个链接前多余的分隔线*/
}
/*翻转*/
ul a:hover{
color:#333;
}
[/code]5.5 标签页式导航[code]
/*标签页式导航就是给横向导航条的每个链接背景上方两个角做圆角*/
ul{
margin:0;
padding:0;
list-style:none;
width:720px;
folat:left;/*兼容IE*/
}
ul li{
float:left;
background:url(images/tab-right.gif) no-repeat top right;/*这是右半边的圆角,确保图片足够长*/
}
li a{
display:block;
padding:0 2em;
line-height:2.5em;
background:url(images/tab-left.gif) no-repeat top left;/*左半边的圆角会覆盖在右半边圆角的上部*/
text-decoration:none;
color:#fff;
float:left;
}
ul a:hover{
color:#333;
}
[/code]5.6 CSS图像映射
css图像映射用来代替HTML的area标签，这样不但当鼠标移动到图片的链接位置时，能够出现文字说明，而且鼠标移动到图片时，所有链接都会出现美观清晰的方形边框。[code]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flickr Style Image Maps</title>

<style type="text/css">

</style>
</head>

<body>

<div id="pic">
<img src="images/group-photo.jpg" width="640" height="425" />
<ul>

<li class="rich"><a href="http://www.clagnut.com/"><span class="outer"><span class="inner"><span class="note">Richard Rutter</span></span></span></a></li>
<li class="andy"><a href="http://www.andybudd.com/"><span class="outer"><span class="inner"><span class="note">Andy Budd</span></span></span></a></li>
<li class="jeremy"><a href="http://www.adactio.com/"><span class="outer"><span class="inner"><span class="note">Jeremy Keith</span></span></span></a></li>
</ul>
</div>

</body>
</html>
[/code]5.7 远距离图片翻转
上例中每个链接加<span>标签，然后在CSS中指定span的位置，可以让链接的文字出现到指定位置，这样鼠标移动到链接的图片区域和文字区域时，都能产生翻转效果.
5.8 定义列表的简单说明[code]
<dl>
<dt>苹果</dt>
<dd>一种水果</dd>
<dd>电脑公司</dd>
<dt>香蕉</dt>
<dd>一种水果</dd>
</dl>
[/code]以上dl等标签称为定义列表，本书不展开讨论。