第六章 对列表应用样式和创建导航条
列表能够对相关的元素进行分组，并给他们添加意义和结构。人们天生喜欢列表。。。
本章学习的内容：
用CSS对列表应用样式
使用背景图像作为项目符号
创建垂直导航条和水平导航条
使用滑动门标签也是导航
纯CSS下拉菜单
创建CSS图像映射
创建远距离翻转
使用定义列表
6.1基本列表样式
非常简单：
<ul>
<li>Read Emails</li>
<li>Cooking</li>
<li>Go Shopping</li>
<li>Write Chapter</li>
<li>Read Emails</li>
</ul>
为了天界指定的项目符号，常常可以使用list-style-image属性。 但是这种方法对于项目图像为位置控制力不强，所以常用的方法是关闭项目符号，并将项目符号作为背景添加在列表上。 然后使用背景图像精确的控制项目符号的对准方式。
IE早期和OPera使用做外边距控制列表的缩进，而包括Safari和FireFox和大多数现代的浏览器使用的是左内边距控制缩进。 所以先要将列表的padding和margin设置为0 。
ul{
margin:0;
padding:0;
list-style-type:none;
}
然后添加特定的项目符号作为背景：
li{
background:url(bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
产生的列表样式如图：
6.2创建基本的垂直导航条
应用第五章学习到的链接样式技术，可以创建出图形丰富的垂直导航条
首先需要良好的语义标记：
<ul class="nav">
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
</ul>
先去掉默认的项目标号并将外边距和内边距的值设置为零：
在设置背景颜色和边框：
ul.nav{
margin:0;
padding:0;
list-style-type:none;
width:8em;/*以em为单位设置导航列表的宽度*/
background-color:#8bd400;
border:1px solid #486b02;
}
不对列表元素应用样式而是对其中的锚链接应用样式，由此提供更好的浏览器兼容性。 为了穿件类似按钮的单机区域，我们呢要把display的值设置成block。然后扩展链接。
ul.nav a{
display:block;
color:#2b3f00;
text-decoration:none;
}
为了在菜单项上面创建斜面效果需要将顶边框颜色设置的浅一点，将底边框的颜色设置的深一点。还可以设置个背景图像作为图标。
ul.nav a{
display:block;
color:#2b3f00;
text-decoration:none;
border-top:1px solid #e4ffd3;
border-bottom:1px solid #486b02;
background:url(arrow.gif) no-repeat 5% 50%;
padding:0.3em 1em;
}
所有边框折叠在另一个半框的顶上，但是最后一个连接的底边框与列表底边框形成了双线。 我们采取简单的办法： 去掉列表底边框 但是在某些情况下是不可行的。 那么可以在第一个或者最后一个列表项上加上类， 这样就可以直接删除边框。
ul.nav .last a{
border-bottom:0;
}
这里这个列表看起来向漂亮的导航条了。 为了完成这个效果，最后还要用：hover, :focus和:selected状态。
ul.nav a:hover,ul.nav a:focus,ul nav .selected a {
color:#E4FFD3;
background-color:#6DA203;
}
最终的效果：
D:\asp1\cssexample\基本垂直导航条.html
在Windows上IE6的更低的版本上这样的设置都是有效地但是在IE6上会在列表项上添加了额外的空间这很令人费解，为了修复这个Bug，我们需要将列表向上的diaplay值设置为inline:
ul.nav li{
display:inline:/*Removes large gaps in IE、*/;
}
6.3在导航条中突出显示当前页面
这个概念的工作方式是，在每个页面的body元素里面添加一个ID或者类名。导航然后再导航列表的每个项目中添加一个ID或者类名，从而指出当前用户在那个页面当中。 可使用body的ID或者类名和列表导航的ID或者类的唯一组合来突出显示当前部分或页面。
<body id="work">
<ul class="nav">
<li id="home"><a href="home.html" >Home</a><li>
<li class="about"><a href="home.html">About</a><li>
<li class="servies"><a href="home.html">Our Servies</a><li>
<li class="work"><a href="home.html">Our Work</a><li>
</ul>
</body>
寻找以下ID和类名的组合：
#home .nav #home a,
#about .nav .about a,
#servies .nav .servies a,
#work .nav .work a{
background-position:85% center;
background-color:#FF0000;
color:#fff;
cursor:default;
}
用户在主页上面时，具有home类的导航项处于被选择状态，在关于页面上是关于的导航项处于被选择的状态。 为了增加效果，我们把鼠标的转换改为默认样式，可以不诱使用户点击此链接。
D:\asp1\cssexample\基本垂直导航条.html
6.4创建简单的水平导航条
假设有一个搜索结果页面，要创建一个基于页面的简单导航列表，比如像图这样， 为此需要先创建导航项的有序列表。
要创建一个基于页面的简单列表。先创建导航项的有序列表。
<ol class="pagination">
<li><a herf="search.html?page=1" rel="prev">Prve</a></li>
<li class="select">2</li>
<li><a herf="search.html?page=3">3</a></li>
<li><a herf="search.html?page=4">4</a></li>
<li><a herf="search.html?page=5">5</a></li>
<li><a herf="search.html?page=6">6</a></li>
<li><a herf="search.html?page=7">7</a></li>
<li><a herf="search.html?page=3" rel="next">Next</a></li>
</ol>
现在是使用rel属性表示结果集中的前一个和下一个页面。 这是更好的rel属性的用法，将来设置不同的链接样式很方便。
首先去掉默认浏览器的外边距，内边距和列表样式。 有好多开发人员喜欢在样式表的开头使用reset来完成这个任务。 如果使用reset则可以跳过这个步骤。
ol.pagination{
margin:0;
padding:0;
list-style-type:none;
}
为了让列表项水平排列而不是垂直排列，可以吧display的属性设置成inline。 但是对于更复杂的，水平列表样式，如果使用浮动列表项，然后用外边距把他们封开就会很灵活。
ol.pagination li{
float:left;
margin-right:0.6em;
}
现在，列表项都水平显示了，可以应用图像样式了。
ol.pagination a,il.pagination li.selected{
display:block;
padding:0.2em 0.5em;
border:1px solid #ccc;
text-decoration:none;
}
ol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected{
background-color:blue;
color:#FFFFFF;
}
对于页码非常合适，但是我希望prev和next的样式会稍微不同。 为此合一用属性选择器寻找他们的属性。
ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
border:none;
}
ol.pagination a[rel="prev"]:before{
content:"\00AB";
padding-right:0.5em;
}/*应用于列表开头的锚链接，使用字符编码00AB在这个链接前面添加双左箭头*/
ol.pagination a[rel="next"]:after{
content:"\00BB";/*应用于最后一个连接，在连接后面添加双右箭头*/
padding-left:0.5em;
}
D:\asp1\cssexample\水平页码导航条.html
效果图：
6.4创建图形化导航条
简单的导航条很适合分页的内容，但是你可能希望为主导航栏创建更丰富的菜单。这个示例演示如何创建图形化的导航条。
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pruducts.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="case-studise">Case Studies</a></li>
</ul>
然后将Padding的和Margin设置为零，并且去掉默认的项目符号。 在这个示例中 水平导航条的快读是72em，并且以重复的桔色渐变作为背景。
ul.nav{
margin:0;
padding:0;
list-style:none;
width:72em;
background:#FAA819 url() repeat-x;
}
列表是垂直现实的为了让他水平显示：
ul .nav li{
float:left;
}
请记住当元素浮动是不占据文档流中的任何位置，就睡不占据文档流中的任何空间。 因此付列表实际上没有任何内容他就会收缩。从而会隐藏列表背景。
有几种方法可以让父元素包含浮动的子元素。一种方法是添加进行清理的元素。但是会在页面中添加不必要的标记，所以应该避免。 另一种 方法是让父元素浮动，并且使用某个元素对他进行清理以便于换行； 第三中使用overflow：hidden技术， 作者说他经常只用这种方法。
ul.nav {
margin:0;
padding:0;
list-style:none;
width:72em;
overflow:hidden;
background:#FAA819 url() repeat-x;
}
与页面导航条的示例一样，导航条中每个连接的display的属性也设置成block，从而让他们表现的想按钮一样。 如果希望每个按钮有固定的尺寸，可以显式的设置成固定的高度和宽度，但是这会导致维护性问题。 因此我希望每个按钮的宽度由锚文本的尺寸决定。 为此不显式的设置宽度，而是在每个锚链接的左边和右边设置成3em的内边距。 和前面一样让链接文本垂直居中，最后关闭下划线并且是链接的颜色改为白色：
ul.nav a{
display:block;
padding:0 3em;
line-height:2.1em;
text-decoration:none;
color:#FFFFFF;
}
现在我希望在导航条的每个连接之间创建分隔线。 可以通过在列表项或锚上设置水平边框来实现。 但是为了简单，我在锚链接中引用一个背景图像。
ul.nav a {
display:block;
padding:0.2em;
line-height:2.1em;
background:url(img/divider,gif) repeat-y left top;
text-decoration:none;
}
但是，导航挑中的第一个链接会产生不必要的分隔线。 在第一个列表上添加一个类并且将背景图像设置成none就可以去掉它：
ul.nav .first a{
background-image:none;
}
代码（为了试验效果）要写成下面的样子：
或ul.nav li.first a{ ...........} 第二个栏目News左侧面没有分隔线。
如果你实在太在乎IE6的支持问题，也可以不用其他类，而是使用：first-child伪类。
ul.nav li:first-child a{
background:none;
}
最后加上翻转状态的颜色
ul.nav a:hover,ul.nav a:focus{
color:#333;
}
哥们不会ps ，会的话做个渐变的图像就很好看了。 D:\asp1\cssexample\图形化的导航条.html
6.6简化的“滑动门”标签页式导航
第四章学习了Douglas Bowman的滑动门技术，以及如何使用它创建灵活的圆角框。 这种方法也可以来创建灵活的可扩展的标签也是导航。
用来创建的图像table-left.png 和table-right.png都非常大，允许字号增加几倍也不会出现断裂。
HTML标签和以前水平导航条的完全一样。
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pruducts.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="case-studise">Case Studies</a></li>
</ul>
与前面一样，先将margin和padding的设置为零， 去掉项目符号，并设置导航条的宽度。 还要把导航条的overflow的值设置成hidden以便清理内部的浮动元素。
ul.nav{
margin:0;
padding:0;
list-style:none;
width:72em;
overflow:hidden;
}
ul.nav li{
float:left;
background:url(images/table-right.png) no-repeat right top;
}
与前面一样，锚显示为块级元素是整个区域可单击。 每个标签页的宽度由内容的宽度控制，设置行高可以控制高度。 为了显示标签页效果，可以讲标签页的左边图像作为背景引用于锚元素并且向左对齐。 当标签改变内容改变尺寸时，这个图像总是对准左边，盖在大图上面。盖住左边的硬边缘。。
为了确保这个技术在Mac的 IE 5.2中有效，让锚也浮动。
ul.nav li a{
display:block;
padding:0 2em;
line-height:2.5em;
background:url(images/table-left.png) no-repeat left top;
taxt-decoration:none;
color:#FFF;
float:left;
}
为了创建翻转效果，只改变字的颜色。
ul.nav a:hover,ul.nav a:focus{
color:#333;
}
D:\asp1\cssexample\简化的滑动门标签页式导航.html
效果图：
6.7Suckerfish的下拉菜单
尽管在易用性方面有一些问题，但是下拉菜单认识WEB界面上最流行的元素。 他有一些Javascript的解决方案，但是其中许多有先天性的访问性问题----即使在禁用Javascript后的浏览器无效。 因此一些开发人员做出了纯CSS的下拉菜单。
这种技术及其简单，只需要把导航嵌套在无序列表中，把列表定位在屏幕之外，当鼠标悬停在父列表项上时重新定位它。
首先建立多层导航列表。
<ul class="nav">
<li><a href="/home">Home</a></li>
<li><a href="/pruducts">Products</a>
<ul>
<li><a href="/pruducts/sliverback">Sliverback</a></li>
<li><a href="/pruducts/Fontdeck">Font deck</a></li>
</ul></li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/services/design">Design</a></li>
<li><a href="/services/development">Development</a></li>
<li><a href="/services/design">Design</a></li>
</ul></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
与所有的导航一样，首先把外边距和内边距设置为零，去掉默认的项目符号。 向左浮动， 添加边框和背景颜色， 让列表也浮动。
ul.nav,ul.nav ul{/*下拉菜单项和列表项完全相同*/
margin:0;
padding:0;
list-style-type:none;
float:left;
border:1px solid #486b02;
background-color:#8BD400;
}
ul.nav li{
float:left;
width:8em;
background-color:#8DB400;
}
再激活之前隐藏实际的下拉菜单，需要把他们的position/设置为absolute,然后把它隐藏到屏幕后面。
ul.nav li ul{
width:8em;
position:absolute;
left:-9999px;
}
现在到了最关键的时候，在副列表中添加鼠标悬停的伪选择器，把下拉菜单的位置改回正常位置，下拉菜单就会重新出现。
.nav li:hover ul{
left:auto;
}
ul.nav a{
display:block;
color:#2B3F00;
text-decoration:none;
padding:0.3em 1em;
border-right:1px solid #486B02;
border-left:1px solid #E4FFD3;
}
ul.nav li ul li{
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;
border-left:0;
border-right:0;
}
/*remove unwanted borders on the end list items*/
ul.nav li:last-child a{
border-right:0;
border-bottom:0;
}
ul a:hover,ul a:focus{
color:#E4FFD3;
background-color:#6DA203;
}
这就是想要的结果：一个只使用CSS的简单下拉导航条。
D:\asp1\cssexample\Suckfish下拉菜单.html
6.8 CSS图像映射
利用图像映射可以将图像中的一些区域设置为热点。 这种技术在前几年比较流行这些年不常见了，一部分原因是应为Flash流行起来了，更多原因是出现了更简单的标记，表现性能更低的标记。
首先需要做的是将图像添加到页面中，放在一个一名名为的div中：
<div class="imagemap">
<img src="images/201.jpg" alt="电脑风景" width="800" height="600" usemap="#Map" border="0" />
然后再图像上面添加每个人的图像热区的链接名称
<ul>
<li class="moutain"><a href="http://www.calgunt.com/" title="雪山">雪山</a></li>
<li class="lake"><a href="http://www.calgunt.com/" title="湖水">湖水</a></li>
</ul>
</div>
然后设置div的宽度和高度，让他匹配图像尺寸。 然后将div的position属性设置为relative这是这种技术的关键， 应为它让图像包含的链接可以相对于div也就是图像的边缘定位。
.imagemap{
width: 800px;
height: 600px;
position: relative;/*The key to this Technique*/
top: 0;
left:200px;
}
和前面一样，去掉项目符号，将margin和padding的属性设置为零
.imagemap ul{
margin:0;
padding:0;
list-style:none;
}
对连接应用样式，首先对锚链接进行绝对定位，将他们移动到容器div的左上角。 然后分别定位到每个连接需要出现的位置上，设置宽度和高度形成热点。
.imagemap a{
position:absolute;
display:block;
width:140px;
height:80px;
text-indent:-99999em;
background-image:url(images/divider.PNG);/*设置背景图像是为了修复在IE和360浏览器中的BUG，在IE和360中不设置背景图像就什么也看不到。这是一种很奇妙的方法再不解释*/
/*这里可以用一个不存在的url()路径， 但是不存在的url给人感觉很怪异，所以就用真实路径 然后隐藏掉它*/
background-repeat:no-repeat;
background-position:-5000px 0;
}
现在 将连接定位到每个身上
.imagemap .moutain a{
top:10px;
left:330px;
}
.imagemap .lake a{
top:330px;
left:210px;
}
创建简单的翻转效果，一个白色的实线应用于鼠标悬停是的连接。
.imagemap a:hover,.imagemap a focus{
border:1px solid #fff;
}
Flickr风格的图像映射
和上面的例子稍有不同，当翻转加了说明的图像时，包含在每个区域上出啊练了一个双边框的框。 当鼠标悬停在上面是突出显示，并显示说明。
为了创建双边框的框，需要在每个锚链接内部添加两个额外的<span>..添加以后应该像下面：
<ul>
<li class="moutain"><a href="http://www.calgunt.com/" title="雪山">
<span class="outer">
<span class="inner">
<span class="note">雪山</span>
</span>
</span>
</a></li>
<li class="lake"><a href="http://www.calgunt.com/" title="湖水">
<span class="outer">
<span class="inner">
<span class="note">湖水</span>
</span>
</span>
</a></li>
</ul>
.imagemap{}和.imagemap ul{}与前面示例中一样，再次不赘述。
与前面一样，包含的锚链接进行绝对定位。 但是这一次要设置内部span的尺寸， 让外部span和锚链接根据他们确定尺寸。 最后设置颜色以及引用一些基本样式。
.imagemap a{
position:absolute;
display:block;
text-indent:-99999em;
background-image:url(images/divider.PNG);
background-repeat:no-repeat;
background-position:-5000px 0;
color:#000;
text-decoration:none;
border:1px solid transparent;
}
.imagemap a .outer{
display:block;
border:1px solid #000;
}
.imagemap a .inner{
display:block;
width:140px;
height:80px;
border:1px solid #fff;
}
与前面一样，定位链接
然后对连接应用翻转效果
为了在热点翻转时显示说明， 首先将说明的span的内容定位到热点下面。 为此将说明的span的位置设置为absolute并且将底部位置设置为负值， 为了美观设置一些内边距和背景颜色，然后让文本居中。
.imagemap a .note{
position:abusolute;
bottem:-3em;
width:9em;
padding:0.2em 0.5em;
background-color:#ffc;
text-align:center;
left:25px;
margin-lefgt:-4em;
}
D:\asp1\cssexample\css图像映射.html
6.9 远距离翻转
远距离翻转时一种鼠标悬停事件， 他在页面的其他地方触发显示方式的改变。 实现方法是：在锚链接内嵌套一个或多个元素； 然后使用绝对定位对嵌套的元素分别进行定位。
尽量显示在不同的地方，但是他们呢都包含在同一个父锚中，所以对于同一个鼠标悬停时间做出反应， 因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。
网页代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>远距离翻转</title>
<style type="text/css">
.remote{
width:333px;
height:500px;
position:relative;/*The key to this Technique*/
}
.remote img{
box-shadow:3px 5px 7px #666666; /*给如片加上投影，数字代表的意思为向右 向下 投影长度 颜色 */
}
.remote ul{
margin:0;
padding:0;
list-style:none;
}
/*首先要做的就是将热点的position属性设置为absolute，然后指定尺寸。 先定义默认尺寸，然后再后面地方再覆盖他们。*/
.remote a .hotspot{
width: 53px;
height: 73px;
position: absolute;
background-image: url(images/divide.PNG);/*防止IE和360没反应的Bug*/
}
.remote .yuanjie a .hotspot{
top: 224px;
left: 458px;
}
.remote .xiaoxi a .hotspot{
top: 153px;
left: 57px;
width: 70px;
height: 96px;
}
.remote .mao a .hotspot{
top: 208px;
left: 395px;
width: 62px;
height: 76px;
}
.remote .chunge a .hotspot{
top: 190px;
left: 276px;
width: 65px;
height: 85px;
}
.remote .aliang a .hotspot{
top: 203px;
left: 563px;
width: 61px;
height: 76px;
}
/*同样包含链接文本的span也进行绝对定位，并将宽度设置为15em. 他们的定位是相对于他们的列表的，在这个示例中用负的有位置和指定到图像的右边。 最后给链接设置光标样式，保证IE中正常显示。*/
/*与前面一样先定义默认尺寸再在后面注意覆盖，处理完文字应该在正确的位置上*/
.remote a .link{
position: absolute;
display: block;
width:10em;
right: -31em;
cursor: pointer;
/*由于默认的链接样式较稳难看 ，所以我在这里改改*/
font-family:"方正喵呜体","楷体";
font-size: 24px;
color:#8FCF06;
white-space:pre;/*不忽略 姓名文本中的空格*/
}
.remote .yuanjie a .link{
top:0;
}
.remote .xiaoxi a .link{
top:1.2em;
}
.remote .mao a .link{
top:2.4em;
}
.remote .chunge a .link{
top:3.6em;
}
.remote .aliang a .link{
top:4.8em;
}
/*.remote a:hover{
background-color:rgba(0,0,0,0.5);RGBa不透明机制，前三种数字是红 绿 蓝 值，后一种是不透明度0.2表示是20%
}*/
/*为了鼠标悬停在文本上时出现翻转效果，给人物加上边框*/
.remote a:hover .hotspot,.remote a:focus .hotspot{
border:1px dashed white;
}
/*同样给文本加上翻转样式*/
.remote a:hover .link,.remote a:focus .link{
color:#EE3579;
}
</style>
</head>
<body>
<div class="remote">
<img src="images/Originals/IMG_0108.JPG" width="800" height="600" alt="哥几个" />
<ul>
<li class="yuanjie">
<a href="#" title="袁杰">
<span class="hotspot"></span>
<span class="link">»袁 杰</span>
</a>
</li>
<li class="xiaoxi">
<a href="#" title="孔祥熙">
<span class="hotspot"></span>
<span class="link">»孔祥熙</span>
</a>
</li>
<li class="mao">
<a href="#" title="毛奇立">
<span class="hotspot"></span>
<span class="link">»毛奇立</span>
</a>
</li>
<li class="chunge">
<a href="#" title="沈家椿">
<span class="hotspot"></span>
<span class="link">»沈家椿</span>
</a>
</li>
<li class="aliang">
<a href="#" title="李高亮">
<span class="hotspot"></span>
<span class="link">»李高亮</span>
</a>
</li>
</ul>
</div>
</body>
</html>
D:\asp1\cssexample\远距离翻转.html
6.10 对于定义列表的简短说明
本章讨论了如何用无序列表创建各种效果（也可以扩展到有序列表）。 但是还有三种常备忽视的列表类型----定义列表， 这种列表受到越来越多的关注。 定义列表由两个核心部件组成： 定义术语<dt>和一个或多个定义描述<dd>.
<dl>
<dt>Apple</dt>
<dd>red yellow or green Fruit</dd>
<dd>Cumputer Company</dd>
<dt>Banana</dt>
<dd>A Fruit</dd>
</dl>
顾名思义，此种列表的主要用途就是组成“定义”。 但是HTML的规范相当含糊，他可以定义列表为产品属性或回话等其他用途。 这是这个概念有了一定程度的伸展。
定义列表可以用来对一系列的相关元素进行结构性分组，因此开始使用它们创建各种东西，从产品清单到图像库，从表单到页面布局。
以这种风格使用定义列表的理由之一是，没有其他HTML元素能够提供这种类型的关联。 但是，这不完全正确， 因为div吧文档分成逻辑部分。 更令人担心的是，这个理由与使用表格进行布局的理由安全一样。 这是人担心定义列表开始被滥用。
如果你想了解更多关于定义列表样式的信息，请阅读：Mark Norman在24Ways发表的文章（http://24ways.org/2007/my-other-christmas-present-is-adefinition-list）。
列表能够对相关的元素进行分组，并给他们添加意义和结构。人们天生喜欢列表。。。
本章学习的内容：
用CSS对列表应用样式
使用背景图像作为项目符号
创建垂直导航条和水平导航条
使用滑动门标签也是导航
纯CSS下拉菜单
创建CSS图像映射
创建远距离翻转
使用定义列表
6.1基本列表样式
非常简单：
<ul>
<li>Read Emails</li>
<li>Cooking</li>
<li>Go Shopping</li>
<li>Write Chapter</li>
<li>Read Emails</li>
</ul>
为了天界指定的项目符号，常常可以使用list-style-image属性。 但是这种方法对于项目图像为位置控制力不强，所以常用的方法是关闭项目符号，并将项目符号作为背景添加在列表上。 然后使用背景图像精确的控制项目符号的对准方式。
IE早期和OPera使用做外边距控制列表的缩进，而包括Safari和FireFox和大多数现代的浏览器使用的是左内边距控制缩进。 所以先要将列表的padding和margin设置为0 。
ul{
margin:0;
padding:0;
list-style-type:none;
}
然后添加特定的项目符号作为背景：
li{
background:url(bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
产生的列表样式如图：
6.2创建基本的垂直导航条
应用第五章学习到的链接样式技术，可以创建出图形丰富的垂直导航条
首先需要良好的语义标记：
<ul class="nav">
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
<li><a href="home.html">Home</a><li>
</ul>
先去掉默认的项目标号并将外边距和内边距的值设置为零：
在设置背景颜色和边框：
ul.nav{
margin:0;
padding:0;
list-style-type:none;
width:8em;/*以em为单位设置导航列表的宽度*/
background-color:#8bd400;
border:1px solid #486b02;
}
不对列表元素应用样式而是对其中的锚链接应用样式，由此提供更好的浏览器兼容性。 为了穿件类似按钮的单机区域，我们呢要把display的值设置成block。然后扩展链接。
ul.nav a{
display:block;
color:#2b3f00;
text-decoration:none;
}
为了在菜单项上面创建斜面效果需要将顶边框颜色设置的浅一点，将底边框的颜色设置的深一点。还可以设置个背景图像作为图标。
ul.nav a{
display:block;
color:#2b3f00;
text-decoration:none;
border-top:1px solid #e4ffd3;
border-bottom:1px solid #486b02;
background:url(arrow.gif) no-repeat 5% 50%;
padding:0.3em 1em;
}
所有边框折叠在另一个半框的顶上，但是最后一个连接的底边框与列表底边框形成了双线。 我们采取简单的办法： 去掉列表底边框 但是在某些情况下是不可行的。 那么可以在第一个或者最后一个列表项上加上类， 这样就可以直接删除边框。
ul.nav .last a{
border-bottom:0;
}
这里这个列表看起来向漂亮的导航条了。 为了完成这个效果，最后还要用：hover, :focus和:selected状态。
ul.nav a:hover,ul.nav a:focus,ul nav .selected a {
color:#E4FFD3;
background-color:#6DA203;
}
最终的效果：
D:\asp1\cssexample\基本垂直导航条.html
在Windows上IE6的更低的版本上这样的设置都是有效地但是在IE6上会在列表项上添加了额外的空间这很令人费解，为了修复这个Bug，我们需要将列表向上的diaplay值设置为inline:
ul.nav li{
display:inline:/*Removes large gaps in IE、*/;
}
6.3在导航条中突出显示当前页面
这个概念的工作方式是，在每个页面的body元素里面添加一个ID或者类名。导航然后再导航列表的每个项目中添加一个ID或者类名，从而指出当前用户在那个页面当中。 可使用body的ID或者类名和列表导航的ID或者类的唯一组合来突出显示当前部分或页面。
<body id="work">
<ul class="nav">
<li id="home"><a href="home.html" >Home</a><li>
<li class="about"><a href="home.html">About</a><li>
<li class="servies"><a href="home.html">Our Servies</a><li>
<li class="work"><a href="home.html">Our Work</a><li>
</ul>
</body>
寻找以下ID和类名的组合：
#home .nav #home a,
#about .nav .about a,
#servies .nav .servies a,
#work .nav .work a{
background-position:85% center;
background-color:#FF0000;
color:#fff;
cursor:default;
}
用户在主页上面时，具有home类的导航项处于被选择状态，在关于页面上是关于的导航项处于被选择的状态。 为了增加效果，我们把鼠标的转换改为默认样式，可以不诱使用户点击此链接。
D:\asp1\cssexample\基本垂直导航条.html
6.4创建简单的水平导航条
假设有一个搜索结果页面，要创建一个基于页面的简单导航列表，比如像图这样， 为此需要先创建导航项的有序列表。
要创建一个基于页面的简单列表。先创建导航项的有序列表。
<ol class="pagination">
<li><a herf="search.html?page=1" rel="prev">Prve</a></li>
<li class="select">2</li>
<li><a herf="search.html?page=3">3</a></li>
<li><a herf="search.html?page=4">4</a></li>
<li><a herf="search.html?page=5">5</a></li>
<li><a herf="search.html?page=6">6</a></li>
<li><a herf="search.html?page=7">7</a></li>
<li><a herf="search.html?page=3" rel="next">Next</a></li>
</ol>
现在是使用rel属性表示结果集中的前一个和下一个页面。 这是更好的rel属性的用法，将来设置不同的链接样式很方便。
首先去掉默认浏览器的外边距，内边距和列表样式。 有好多开发人员喜欢在样式表的开头使用reset来完成这个任务。 如果使用reset则可以跳过这个步骤。
ol.pagination{
margin:0;
padding:0;
list-style-type:none;
}
为了让列表项水平排列而不是垂直排列，可以吧display的属性设置成inline。 但是对于更复杂的，水平列表样式，如果使用浮动列表项，然后用外边距把他们封开就会很灵活。
ol.pagination li{
float:left;
margin-right:0.6em;
}
现在，列表项都水平显示了，可以应用图像样式了。
ol.pagination a,il.pagination li.selected{
display:block;
padding:0.2em 0.5em;
border:1px solid #ccc;
text-decoration:none;
}
ol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected{
background-color:blue;
color:#FFFFFF;
}
对于页码非常合适，但是我希望prev和next的样式会稍微不同。 为此合一用属性选择器寻找他们的属性。
ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
border:none;
}
ol.pagination a[rel="prev"]:before{
content:"\00AB";
padding-right:0.5em;
}/*应用于列表开头的锚链接，使用字符编码00AB在这个链接前面添加双左箭头*/
ol.pagination a[rel="next"]:after{
content:"\00BB";/*应用于最后一个连接，在连接后面添加双右箭头*/
padding-left:0.5em;
}
D:\asp1\cssexample\水平页码导航条.html
效果图：
6.4创建图形化导航条
简单的导航条很适合分页的内容，但是你可能希望为主导航栏创建更丰富的菜单。这个示例演示如何创建图形化的导航条。
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pruducts.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="case-studise">Case Studies</a></li>
</ul>
然后将Padding的和Margin设置为零，并且去掉默认的项目符号。 在这个示例中 水平导航条的快读是72em，并且以重复的桔色渐变作为背景。
ul.nav{
margin:0;
padding:0;
list-style:none;
width:72em;
background:#FAA819 url() repeat-x;
}
列表是垂直现实的为了让他水平显示：
ul .nav li{
float:left;
}
请记住当元素浮动是不占据文档流中的任何位置，就睡不占据文档流中的任何空间。 因此付列表实际上没有任何内容他就会收缩。从而会隐藏列表背景。
有几种方法可以让父元素包含浮动的子元素。一种方法是添加进行清理的元素。但是会在页面中添加不必要的标记，所以应该避免。 另一种 方法是让父元素浮动，并且使用某个元素对他进行清理以便于换行； 第三中使用overflow：hidden技术， 作者说他经常只用这种方法。
ul.nav {
margin:0;
padding:0;
list-style:none;
width:72em;
overflow:hidden;
background:#FAA819 url() repeat-x;
}
与页面导航条的示例一样，导航条中每个连接的display的属性也设置成block，从而让他们表现的想按钮一样。 如果希望每个按钮有固定的尺寸，可以显式的设置成固定的高度和宽度，但是这会导致维护性问题。 因此我希望每个按钮的宽度由锚文本的尺寸决定。 为此不显式的设置宽度，而是在每个锚链接的左边和右边设置成3em的内边距。 和前面一样让链接文本垂直居中，最后关闭下划线并且是链接的颜色改为白色：
ul.nav a{
display:block;
padding:0 3em;
line-height:2.1em;
text-decoration:none;
color:#FFFFFF;
}
现在我希望在导航条的每个连接之间创建分隔线。 可以通过在列表项或锚上设置水平边框来实现。 但是为了简单，我在锚链接中引用一个背景图像。
ul.nav a {
display:block;
padding:0.2em;
line-height:2.1em;
background:url(img/divider,gif) repeat-y left top;
text-decoration:none;
}
但是，导航挑中的第一个链接会产生不必要的分隔线。 在第一个列表上添加一个类并且将背景图像设置成none就可以去掉它：
ul.nav .first a{
background-image:none;
}
代码（为了试验效果）要写成下面的样子：
或ul.nav li.first a{ ...........} 第二个栏目News左侧面没有分隔线。
如果你实在太在乎IE6的支持问题，也可以不用其他类，而是使用：first-child伪类。
ul.nav li:first-child a{
background:none;
}
最后加上翻转状态的颜色
ul.nav a:hover,ul.nav a:focus{
color:#333;
}
哥们不会ps ，会的话做个渐变的图像就很好看了。 D:\asp1\cssexample\图形化的导航条.html
6.6简化的“滑动门”标签页式导航
第四章学习了Douglas Bowman的滑动门技术，以及如何使用它创建灵活的圆角框。 这种方法也可以来创建灵活的可扩展的标签也是导航。
用来创建的图像table-left.png 和table-right.png都非常大，允许字号增加几倍也不会出现断裂。
HTML标签和以前水平导航条的完全一样。
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pruducts.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="case-studise">Case Studies</a></li>
</ul>
与前面一样，先将margin和padding的设置为零， 去掉项目符号，并设置导航条的宽度。 还要把导航条的overflow的值设置成hidden以便清理内部的浮动元素。
ul.nav{
margin:0;
padding:0;
list-style:none;
width:72em;
overflow:hidden;
}
ul.nav li{
float:left;
background:url(images/table-right.png) no-repeat right top;
}
与前面一样，锚显示为块级元素是整个区域可单击。 每个标签页的宽度由内容的宽度控制，设置行高可以控制高度。 为了显示标签页效果，可以讲标签页的左边图像作为背景引用于锚元素并且向左对齐。 当标签改变内容改变尺寸时，这个图像总是对准左边，盖在大图上面。盖住左边的硬边缘。。
为了确保这个技术在Mac的 IE 5.2中有效，让锚也浮动。
ul.nav li a{
display:block;
padding:0 2em;
line-height:2.5em;
background:url(images/table-left.png) no-repeat left top;
taxt-decoration:none;
color:#FFF;
float:left;
}
为了创建翻转效果，只改变字的颜色。
ul.nav a:hover,ul.nav a:focus{
color:#333;
}
D:\asp1\cssexample\简化的滑动门标签页式导航.html
效果图：
6.7Suckerfish的下拉菜单
尽管在易用性方面有一些问题，但是下拉菜单认识WEB界面上最流行的元素。 他有一些Javascript的解决方案，但是其中许多有先天性的访问性问题----即使在禁用Javascript后的浏览器无效。 因此一些开发人员做出了纯CSS的下拉菜单。
这种技术及其简单，只需要把导航嵌套在无序列表中，把列表定位在屏幕之外，当鼠标悬停在父列表项上时重新定位它。
首先建立多层导航列表。
<ul class="nav">
<li><a href="/home">Home</a></li>
<li><a href="/pruducts">Products</a>
<ul>
<li><a href="/pruducts/sliverback">Sliverback</a></li>
<li><a href="/pruducts/Fontdeck">Font deck</a></li>
</ul></li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/services/design">Design</a></li>
<li><a href="/services/development">Development</a></li>
<li><a href="/services/design">Design</a></li>
</ul></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
与所有的导航一样，首先把外边距和内边距设置为零，去掉默认的项目符号。 向左浮动， 添加边框和背景颜色， 让列表也浮动。
ul.nav,ul.nav ul{/*下拉菜单项和列表项完全相同*/
margin:0;
padding:0;
list-style-type:none;
float:left;
border:1px solid #486b02;
background-color:#8BD400;
}
ul.nav li{
float:left;
width:8em;
background-color:#8DB400;
}
再激活之前隐藏实际的下拉菜单，需要把他们的position/设置为absolute,然后把它隐藏到屏幕后面。
ul.nav li ul{
width:8em;
position:absolute;
left:-9999px;
}
现在到了最关键的时候，在副列表中添加鼠标悬停的伪选择器，把下拉菜单的位置改回正常位置，下拉菜单就会重新出现。
.nav li:hover ul{
left:auto;
}
ul.nav a{
display:block;
color:#2B3F00;
text-decoration:none;
padding:0.3em 1em;
border-right:1px solid #486B02;
border-left:1px solid #E4FFD3;
}
ul.nav li ul li{
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;
border-left:0;
border-right:0;
}
/*remove unwanted borders on the end list items*/
ul.nav li:last-child a{
border-right:0;
border-bottom:0;
}
ul a:hover,ul a:focus{
color:#E4FFD3;
background-color:#6DA203;
}
这就是想要的结果：一个只使用CSS的简单下拉导航条。
D:\asp1\cssexample\Suckfish下拉菜单.html
6.8 CSS图像映射
利用图像映射可以将图像中的一些区域设置为热点。 这种技术在前几年比较流行这些年不常见了，一部分原因是应为Flash流行起来了，更多原因是出现了更简单的标记，表现性能更低的标记。
首先需要做的是将图像添加到页面中，放在一个一名名为的div中：
<div class="imagemap">
<img src="images/201.jpg" alt="电脑风景" width="800" height="600" usemap="#Map" border="0" />
然后再图像上面添加每个人的图像热区的链接名称
<ul>
<li class="moutain"><a href="http://www.calgunt.com/" title="雪山">雪山</a></li>
<li class="lake"><a href="http://www.calgunt.com/" title="湖水">湖水</a></li>
</ul>
</div>
然后设置div的宽度和高度，让他匹配图像尺寸。 然后将div的position属性设置为relative这是这种技术的关键， 应为它让图像包含的链接可以相对于div也就是图像的边缘定位。
.imagemap{
width: 800px;
height: 600px;
position: relative;/*The key to this Technique*/
top: 0;
left:200px;
}
和前面一样，去掉项目符号，将margin和padding的属性设置为零
.imagemap ul{
margin:0;
padding:0;
list-style:none;
}
对连接应用样式，首先对锚链接进行绝对定位，将他们移动到容器div的左上角。 然后分别定位到每个连接需要出现的位置上，设置宽度和高度形成热点。
.imagemap a{
position:absolute;
display:block;
width:140px;
height:80px;
text-indent:-99999em;
background-image:url(images/divider.PNG);/*设置背景图像是为了修复在IE和360浏览器中的BUG，在IE和360中不设置背景图像就什么也看不到。这是一种很奇妙的方法再不解释*/
/*这里可以用一个不存在的url()路径， 但是不存在的url给人感觉很怪异，所以就用真实路径 然后隐藏掉它*/
background-repeat:no-repeat;
background-position:-5000px 0;
}
现在 将连接定位到每个身上
.imagemap .moutain a{
top:10px;
left:330px;
}
.imagemap .lake a{
top:330px;
left:210px;
}
创建简单的翻转效果，一个白色的实线应用于鼠标悬停是的连接。
.imagemap a:hover,.imagemap a focus{
border:1px solid #fff;
}
Flickr风格的图像映射
和上面的例子稍有不同，当翻转加了说明的图像时，包含在每个区域上出啊练了一个双边框的框。 当鼠标悬停在上面是突出显示，并显示说明。
为了创建双边框的框，需要在每个锚链接内部添加两个额外的<span>..添加以后应该像下面：
<ul>
<li class="moutain"><a href="http://www.calgunt.com/" title="雪山">
<span class="outer">
<span class="inner">
<span class="note">雪山</span>
</span>
</span>
</a></li>
<li class="lake"><a href="http://www.calgunt.com/" title="湖水">
<span class="outer">
<span class="inner">
<span class="note">湖水</span>
</span>
</span>
</a></li>
</ul>
.imagemap{}和.imagemap ul{}与前面示例中一样，再次不赘述。
与前面一样，包含的锚链接进行绝对定位。 但是这一次要设置内部span的尺寸， 让外部span和锚链接根据他们确定尺寸。 最后设置颜色以及引用一些基本样式。
.imagemap a{
position:absolute;
display:block;
text-indent:-99999em;
background-image:url(images/divider.PNG);
background-repeat:no-repeat;
background-position:-5000px 0;
color:#000;
text-decoration:none;
border:1px solid transparent;
}
.imagemap a .outer{
display:block;
border:1px solid #000;
}
.imagemap a .inner{
display:block;
width:140px;
height:80px;
border:1px solid #fff;
}
与前面一样，定位链接
然后对连接应用翻转效果
为了在热点翻转时显示说明， 首先将说明的span的内容定位到热点下面。 为此将说明的span的位置设置为absolute并且将底部位置设置为负值， 为了美观设置一些内边距和背景颜色，然后让文本居中。
.imagemap a .note{
position:abusolute;
bottem:-3em;
width:9em;
padding:0.2em 0.5em;
background-color:#ffc;
text-align:center;
left:25px;
margin-lefgt:-4em;
}
D:\asp1\cssexample\css图像映射.html
6.9 远距离翻转
远距离翻转时一种鼠标悬停事件， 他在页面的其他地方触发显示方式的改变。 实现方法是：在锚链接内嵌套一个或多个元素； 然后使用绝对定位对嵌套的元素分别进行定位。
尽量显示在不同的地方，但是他们呢都包含在同一个父锚中，所以对于同一个鼠标悬停时间做出反应， 因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。
网页代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>远距离翻转</title>
<style type="text/css">
.remote{
width:333px;
height:500px;
position:relative;/*The key to this Technique*/
}
.remote img{
box-shadow:3px 5px 7px #666666; /*给如片加上投影，数字代表的意思为向右 向下 投影长度 颜色 */
}
.remote ul{
margin:0;
padding:0;
list-style:none;
}
/*首先要做的就是将热点的position属性设置为absolute，然后指定尺寸。 先定义默认尺寸，然后再后面地方再覆盖他们。*/
.remote a .hotspot{
width: 53px;
height: 73px;
position: absolute;
background-image: url(images/divide.PNG);/*防止IE和360没反应的Bug*/
}
.remote .yuanjie a .hotspot{
top: 224px;
left: 458px;
}
.remote .xiaoxi a .hotspot{
top: 153px;
left: 57px;
width: 70px;
height: 96px;
}
.remote .mao a .hotspot{
top: 208px;
left: 395px;
width: 62px;
height: 76px;
}
.remote .chunge a .hotspot{
top: 190px;
left: 276px;
width: 65px;
height: 85px;
}
.remote .aliang a .hotspot{
top: 203px;
left: 563px;
width: 61px;
height: 76px;
}
/*同样包含链接文本的span也进行绝对定位，并将宽度设置为15em. 他们的定位是相对于他们的列表的，在这个示例中用负的有位置和指定到图像的右边。 最后给链接设置光标样式，保证IE中正常显示。*/
/*与前面一样先定义默认尺寸再在后面注意覆盖，处理完文字应该在正确的位置上*/
.remote a .link{
position: absolute;
display: block;
width:10em;
right: -31em;
cursor: pointer;
/*由于默认的链接样式较稳难看 ，所以我在这里改改*/
font-family:"方正喵呜体","楷体";
font-size: 24px;
color:#8FCF06;
white-space:pre;/*不忽略 姓名文本中的空格*/
}
.remote .yuanjie a .link{
top:0;
}
.remote .xiaoxi a .link{
top:1.2em;
}
.remote .mao a .link{
top:2.4em;
}
.remote .chunge a .link{
top:3.6em;
}
.remote .aliang a .link{
top:4.8em;
}
/*.remote a:hover{
background-color:rgba(0,0,0,0.5);RGBa不透明机制，前三种数字是红 绿 蓝 值，后一种是不透明度0.2表示是20%
}*/
/*为了鼠标悬停在文本上时出现翻转效果，给人物加上边框*/
.remote a:hover .hotspot,.remote a:focus .hotspot{
border:1px dashed white;
}
/*同样给文本加上翻转样式*/
.remote a:hover .link,.remote a:focus .link{
color:#EE3579;
}
</style>
</head>
<body>
<div class="remote">
<img src="images/Originals/IMG_0108.JPG" width="800" height="600" alt="哥几个" />
<ul>
<li class="yuanjie">
<a href="#" title="袁杰">
<span class="hotspot"></span>
<span class="link">»袁 杰</span>
</a>
</li>
<li class="xiaoxi">
<a href="#" title="孔祥熙">
<span class="hotspot"></span>
<span class="link">»孔祥熙</span>
</a>
</li>
<li class="mao">
<a href="#" title="毛奇立">
<span class="hotspot"></span>
<span class="link">»毛奇立</span>
</a>
</li>
<li class="chunge">
<a href="#" title="沈家椿">
<span class="hotspot"></span>
<span class="link">»沈家椿</span>
</a>
</li>
<li class="aliang">
<a href="#" title="李高亮">
<span class="hotspot"></span>
<span class="link">»李高亮</span>
</a>
</li>
</ul>
</div>
</body>
</html>
D:\asp1\cssexample\远距离翻转.html
6.10 对于定义列表的简短说明
本章讨论了如何用无序列表创建各种效果（也可以扩展到有序列表）。 但是还有三种常备忽视的列表类型----定义列表， 这种列表受到越来越多的关注。 定义列表由两个核心部件组成： 定义术语<dt>和一个或多个定义描述<dd>.
<dl>
<dt>Apple</dt>
<dd>red yellow or green Fruit</dd>
<dd>Cumputer Company</dd>
<dt>Banana</dt>
<dd>A Fruit</dd>
</dl>
顾名思义，此种列表的主要用途就是组成“定义”。 但是HTML的规范相当含糊，他可以定义列表为产品属性或回话等其他用途。 这是这个概念有了一定程度的伸展。
定义列表可以用来对一系列的相关元素进行结构性分组，因此开始使用它们创建各种东西，从产品清单到图像库，从表单到页面布局。
以这种风格使用定义列表的理由之一是，没有其他HTML元素能够提供这种类型的关联。 但是，这不完全正确， 因为div吧文档分成逻辑部分。 更令人担心的是，这个理由与使用表格进行布局的理由安全一样。 这是人担心定义列表开始被滥用。
如果你想了解更多关于定义列表样式的信息，请阅读：Mark Norman在24Ways发表的文章（http://24ways.org/2007/my-other-christmas-present-is-adefinition-list）。
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
