前端css基础篇（四）导航栏和隔行变色

一、垂直导航条

固定在左侧的垂直导航条

<style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            width:25%;
            background-color:#f1f1f1;
            position:fixed;/*固定定位*/
            height:100%;
        }
        li a {
            display:block;
            color:#000;
            padding:8px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a.active{
            background-color:#4CAF50;
            color:white;
        }
        li a:hover:not(.active)/*选择器，选鼠标划过不是active的标签*/{
            background-color: #555;
            color:white;
        }
    </style>
<ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

二、水平导航栏

   <style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            background-color:#333;
            overflow:hidden;/*清除浮动*/
        }
        li{
            float:left;
        }
        li a {
            display:block;
            color:white;
            text-align:center;
            padding:8px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a:hover/*鼠标移动到选项上修改背景颜色*/{
            background-color: #111;

        }
    </style>
    
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

三、 导航栏下拉菜单

 <style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            background-color:#333;
            overflow:hidden;
        }
        li{
            float:left;/*让li标签左浮动*/
        }
        li a , .dropbtn/*让li中a标签和div中a标签变成行内块元素在一行显示*/{
            display:inline-block;
            color:white;
            text-align:center;
            padding:14px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a:hover,.dropdown:hover,.dropbth/*鼠标移动到选项上修改背景颜色*/{
            background-color: #111;

        }
        .dropdown/*让下拉列表整个div盒子变成行内块元素*/{
            display:inline-block;
        }
        .dropdown-content/*让下拉列表的链接内容隐藏*/{
            display:none;
            position:absolute;
            background-color:#f9f9f9;
            min-width:160px;
            box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)
        }
        .dropdown-content a/*让下拉列表的a标签变成块级元素独占一行*/
        {
            color:black;
            padding:12px 16px;
            text-decoration:none;
            display:block;
        }
        .dropdown-content a:hover/*下拉列表的a标签鼠标划过变的颜色*/
        {
            background-color:#3059fa;
        }
        .dropdown:hover .dropdown-content/*下拉列表的内容变成块级元素显示*/{
            display: block;
        }


    </style>
    <ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
    <div class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
            <a href="#">链接1</a>
            <a href="#">链接2</a>
            <a href="#">链接3</a>
        </div>
    </div>
</ul>

四、选项卡

利用css3中新添的伪类选择器，选择奇偶数，进行隔行变色
：nth-child（n） n表示具体的第几个

<style>
    li{
        list-style: none;
    }
    .list li{
        display: block;
        width:300px;
        height: 50px;
    }
    .list li:nth-child(2n){
        background-color:orange;
    }
    .list li:nth-child(2n-1){
        background-color: deepskyblue;
    }
</style>



div class="list">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>4</li>
    </ul>
  </div>