1 垂直列表
1 <style type="text/css"> 2 ul.nav { 3 margin: 0; 4 padding: 0; 5 width: 8em; 6 list-style-type: none; 7 background-color: #8BD400; 8 border: 1px solid #486B02; 9 } 10 11 ul.nav a {display: block; 12 color: #2B3f00; 13 text-decoration: none; 14 border-top:1px solid #E4FFD3; 15 border-bottom: 1px solid #486B02; 16 background: url(/img/arrow.gif) no-repeat 5% 50%; 17 padding:0.3em 1em; 18 } 19 ul.nav li { 20 display: inline: /*ie6 为列表上下添加了额外空间 :KLUDGE: Removes large gaps in IE/Win */ 21 } 22 23 ul.nav .last a{ 24 border-bottom: 0;}/*底边与外边框重合会形成双边*/ 25 26 ul.nav a:hover, 27 ul.nav a:focus, 28 ul.nav .selected a { 29 color: #E4FFD3; 30 background-color: #6DA203; 31 } 32 </style> 33 </head> 34 35 <body> 36 <ul class="nav"> 37 <li><a href = "">列表1</a></li> 38 <li><a href = "">列表2</a></li> 39 <li><a href = "">列表3</a></li> 40 <li><a href = "">列表4</a></li> 41 <li class = "last"><a href = "">列表5</a></li> 42 </ul> 43 </body>
2 简单的水平导航条
1 <style type="text/css"> 2 ol.nav { 3 margin: 0; 4 padding: 0; 5 list-style-type: none; 6 } 7 ol.nav li{ 8 float:left; 9 margin-right: 0.6em; 10 } 11 ol.nav a, 12 ol.nav li.selected { 13 display:block; 14 text-decoration: none; 15 border :1px solid black; 16 padding:0.2em 0.5em; 17 } 18 19 ol.nav a:hover, 20 ol.nav a:focus, 21 ol.nav li.selected { 22 color: white; 23 background-color: blue; 24 } 25 26 /*通过属性选择器寻找rel属性，先清除两端的边框，然后通过：before和:after伪类选择器以及content属性添加两端样式，也可以直接在HTML中添加*/ 27 ol.nav a[rel="prev"], 28 ol.nav a[rel="next"]{ 29 border:none;} 30 31 ol.nav a[rel="prev"]:before { 32 content: " 0AB"; 33 padding-right: 0.5em; 34 } 35 ol.nav a[rel="next"]:after{ 36 margin-left:o.5em; 37 content:" 0BB" 38 } 39 40 </style> 41 </head> 42 43 <body> 44 <ol class="nav"> 45 <li><a href = "" rel = "prev">上一页</a></li> 46 <li><a href = "">1</a></li> 47 <li class = "selected">2</li> 48 <li><a href = "">3</a></li> 49 <li><a href = "">4</a></li> 50 <li><a href = "" rel="next">下一页</a></li> 51 </ol> 52 </body>
3 图形化导航条
1 <style type="text/css"> 2 ul.nav { 3 margin: 0; 4 padding: 0; 5 list-style-type: none; 6 width:72em; 7 background: #FAA819 url(img/mainNavBg.gif) repeat-x;/*使用重复的桔红色渐变作为背景*/ 8 overflow:hidden;/*元素浮动，脱离文档流，父列表由于没有内容而收缩导致看不到背景，第3章中三种方法清除浮动*/ 9 10 } 11 ul.nav li{ 12 float:left; 13 } 14 ul.nav a{ 15 display:block;/*经常忘写*/ 16 padding: 0 3em;/*直接设置宽高可能导致可维护性问题，因此通过设置内边距，让按钮宽度由锚文本的宽度决定*/ 17 line-height: 2.1em;/*使链接文本垂直居中*/ 18 text-decoration:none; 19 color:#fff; 20 background: url(img/divider.gif) repeat-y left top;/*创建分割线，也可以通过设置水平边框实现*/ 21 } 22 ul.nav .first a{ 23 background-image:none;}/*删除第一个链接上多余的分割线*/ 24 25 ul.nav a:hover, 26 ul.nav a:focus { 27 culor: #333; 28 } 29 30 </style> 31 </head> 32 33 <body> 34 <ul class="nav"> 35 <li class="first"><a href = "">HOME</a></li> 36 <li><a href = "">ABOUT</a></li> 37 <li><a href = "">NEWS</a></li> 38 <li><a href = "">SERVICES</a></li> 39 <li ><a href = "">CLIENTS</a></li> 40 </ul> 41 </body>
4 简化的“滑动门”标签页导航
<style type="text/css"> ul.nav { margin: 0; padding: 0; list-style-type: none; width:72em; overflow:hidden;/*元素浮动，脱离文档流，父列表由于没有内容而收缩导致看不到背景，第3章中三种方法清除浮动*/ } ul.nav li{ float:left; background: url(img/tab-right.gif) no-repeat top right;/*将组成标签页的两个图像中较大的作为背景图像应用于 列表项，形成右边缘，所以定位在右边.*/ } ul.nav a{ display:block;/*经常忘写*/ padding: 0 2em;/*直接设置宽高可能导致可维护性问题，因此通过设置内边距，让按钮宽度由锚文本的宽度决定*/ line-height: 2.1em;/*使链接文本垂直居中*/ text-decoration:none; color:#fff; background: url(img/tab-left.gif) no-repeat left top;/*标签页的宽度有内容决定，这个图像总是覆盖在大图像的左边硬边缘上*/ float:left;/*为了在mac 上ie5.2中有效，让锚浮动*/ } ul.nav a:hover, ul.nav a:focus { culor: #333; } </style> </head> <body> <ul class="nav"> <li class="first"><a href = "">HOME</a></li> <li><a href = "">ABOUT</a></li> <li><a href = "">NEWS</a></li> <li><a href = "">SERVICES</a></li> <li ><a href = "">CLIENTS</a></li> </ul> </body>
5 Suckerfish 下拉菜单
<style type="text/css"> 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;/*为确保下拉菜单中的菜单项垂直对齐，需要把列表的宽度设置为与列表项相同*/ } ul.nav li ul{ width:8em; position:absolute;/*为了在激活前隐藏下拉菜单，需要将其绝对定位并隐藏到屏幕左边之外*/ left:-999em; margin-left: -1px;/*???*/ } .nav li:hover ul{ left:auto; }/*在父列表项添加鼠标悬停伪选择器，将下拉 菜单改为正确位置。但是，因为IE老版本不支 持在非锚元素上使用:hover伪类，所以需要使用js或.htc启用此功能*/ ul.nav a{ display:block;/*经常忘写*/ padding: 0.3em 1em; text-decoration:none; color:#fff; border-right: 1px solid #486B02; border-left: 1px solid #E4FFD3; } ul.nav li li a { border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02; border-left: 0; border-right: 0; } /*移除多余边*/ ul.nav li:last-child a { border-right: 0; border-bottom: 0;} ul a:hover, ul a:focus { culor: #333; background-color: #6DA203; } </style> </head> <body> <ul class="nav"> <li><a href = "">HOME</a></li> <li><a href = "">NEWS</a> <ul> <li><a href="">Design</a></li> <li><a href="">Development</a></li> <li><a href="">Consultancy</a></li> </ul> </li> <li><a href = "">SERVICES</a> <ul> <li><a href="">Design</a></li> <li><a href="">Development</a></li> <li><a href="">Consultancy</a></li> </ul> </li> <li ><a href = "">CLIENTS</a></li> </ul> </body>