css学习之-对导航条设置样式

对导航条添加样式的注意点：

1.添加定制的列表符号，用list-style-image属性，在列表项左添加内边距，为符号留出所需的空间，然后将背景图像作为列表符号应用于列表项，如果列表项跨越多好，将其放在顶部，反之，可以将垂直位置设为middle或50%

2，对导航条应用样式时，如果对其中包含的锚链接应用样式，可以提高浏览器的兼容性

3.IE6在列表项上添加了额外的空间，为了修复这个bug，需要将列表项上的display设为inline

4.在导航条中突出显示当前页面，实现方式，在每个页面的主体元素中添加一个ID或类名，从而指出用户当前在哪个页面或部分中，再在列表项的每个项中添加一个对应的ID或类名，使用主题和列表项的唯一组合在站点导航中突出显示当前页面

5.下拉菜单，先把它们的position设为absolute，在把它们隐藏到屏幕之外，用很大的负值位置

<!DOCTYPE html>
<html>
<head>
    <title>基本导航条</title>
    <meta charset="utf-8">
    <style type="text/css">
    ul{
        padding: 0;
        margin: 0;
        list-style-type: none;
        width: 8em;
        background-color: #8bd400;
        border: 1px solid #486b02;
    }    
    ul a{
        text-decoration: none;
        display: block;
        color: #2b3f00;
        border-top: 1px solid #e4ffd3;
        border-bottom: 1px solid #486b02;
        padding: 0.3em 1em;
    }
    ul .last a{
        border-bottom: 0;
    }
    ul a:hover,ul a:focus{
        color: #e4ffd3;
        background-color: #6da203;
    }
/*    IE6在列表项上下添加了额外的空间，为了修复这个bug，需要将列表项上的display：inline*/
    ul li{
        display: inline;
    }
    ol.pagination{
        margin: 0;
        padding: 0;
        list-style-type: none;
        margin-top:20px;
    }
    ol.pagination li{
/*        display: inline;
*/        float: left;
        margin-right: 0.6em;
    }
    ol.pagination a,ol.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: white;
    }
    ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
        border: none;
    }
/*    字符编码“00AB”在这个链接前面添加双左箭头，“00BB”在这个链接后面添加双右箭头
*/    ol.pagination a[rel="prev"]:before{
        content:"\00AB";
        padding-right: 0.5em;
    }
        ol.pagination a[rel="next"]:after{
        content: "\00BB";
        padding-left:0.5em;
    }

    </style>
</head>
<body>
<!-- 一般的垂直导航条
 --><ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Our work</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<!-- 一般的水平导航条
 --><ol class="pagination">
    <li><a href="#" rel="prev">prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" rel="next">next</a></li>
</ol>
 </body>
</html>

posted on 2017-03-19 22:38 夏小娘阅读(1667) 评论(0) 编辑收藏举报