第6章 对列表应用样式和创建导航条

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: "\00AB";
33         padding-right: 0.5em;        
34     }
35     ol.nav a[rel="next"]:after{
36         margin-left:o.5em;
37         content:"\00BB"
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>

 

posted @ 2015-11-17 00:13  hou_hou  阅读(229)  评论(0)  编辑  收藏  举报