css之导航条

垂直导航条

1.效果

垂直导航条.png

2.html代码:利用无序列表创建导航

<ul class="nav">
       <li><a href="#">Read Mails</a></li>
       <li><a href="#">Write Chap</a></li>
       <li><a href="#">Go shopping</a></li>
       <li><a href="#">Cook Dinner</a></li>
       <li><a href="#">Watch Lost</a></li>
</ul>

3.css

先清除距离，去除列表样式，设置颜色边框样式

ul.nav{
    margin: 0;
    padding:0;
    list-style-type: none;
    width: 11em;
    background-color: #8BD400;
    border: 1px solid #486B02;
}

再设置导航中的a标签

ul.nav a{
    display: block;
    color: #2B3F00;
    text-decoration: none;
    border-top: 1px solid #E4FFD3;
    border-bottom: 1px solid #486B02;
    background: url(../pic/bullet.gif) no-repeat 2% 50%;
    /*背景图见附件*/
    padding:0.3em 2em;
}

设置最后一个标签，避免重叠，设置鼠标移过，焦点，选择的状态

ul.nav .last a{
    border-bottom: 0;
}
ul.nav a:hover,ul.nav a:focus,ul.nav selected a{
    color: #E4FFD3; 
    background-color: #6DA203;
}

4.附件

bullet.gif

水平导航条

1.效果

水平导航条.png

2.html代码:利用有序列表创建导航

<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>

3.css代码

导航条水平

ol.pagination{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
/*为了让列表项水平排列*/
ol.pagination li{
    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;
}

让prev和next属性不同,使用了css文本语言。

ol.pagination a[rel="Prev"],ol.pagination a[rel="Next"]{
    border: none;
}
ol.pagination a[rel="Prev"]:before{
    content: "\00AB";
    padding-right: 0.5em;
}
ol.pagination a[rel="Next"]:after{
    content: "\00BB";
    padding-left: 0.5em;
}

css之导航条

垂直导航条

水平导航条

推荐阅读更多精彩内容