css -- 导航条

1、垂直导航条

HTML：

<ul class="nav"> 
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
</ul>

去除默认样式：

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

对a链接进行操作：

ul .nav a{
    display: block;
    color: #ccc;
    text-decoration: none;
    border-top: 1px solid #000;
    padding: 0.3em 1em;
}

对最后一项a进行操作：

ul .nav .last a{
     border-bottom:0;  
}

 2、水平导航条

在1、垂直导航条的基础，对li进行左浮动

注意：当元素浮动的时候，它不再占据文档流中的任何空间，因此，父列表中实际没有东西，它就会收缩，从而掩藏列表背景。有几种办法可以让父元素包含子元素：

A：添加一个进行清理的元素

B：让父元素浮动，并且使用某个元素（比如页脚站点）对他进行清理以便换行

C：使用overflow：hidden技术

3、下拉式菜单

<ul class="nav"> 
    <li><a href="">Home</a></li>
        <ul> 
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
        </ul>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
</ul>

CSS样式：横导航，竖下拉

ul.nav, ul.nav ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
    border: 1px solid #ccc;
    background-color: #f00;
}

ul.nav li{
    float: left;
    width: 8em;
    background-color: #f00;
}

ul.nav li ul{
    width: 8em;
    position: absolute;
    left: -999em;
}

.nav li:hover ul{
    left: auto;
}

ul.nav a{
    display: block;
    color: #ccc;
    text-decoration: none;
    padding: 0.3em 1em;
    border-right: 1px solid #f00;
    border-left: 1px solid #333;
}

ul.nav li li a{
    border-top: 1px solid #444;
    border-bottom: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
}

/*remove unwanted borders on the end list*/
ul.nav li:last-child a{
    border-right: 0;
    border-bottom: 0;
}

ul a:hover,
ul a:focus{
    color: #fff;
    background-color: #000;
}

 

 

　　

 

转载于:https://www.cnblogs.com/zhanghuiyun/p/5582402.html