CSS3构建左侧导航栏

废话不说，先上图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计左侧导航栏</title>
    <style>
        a{
            text-decoration: none;/*去掉字下划线*/
            margin: 0 30px;
            color: white;
        }
        nav{
            width: 300px;
            height: 400px;
        }
        li{
            background-color: rgba(0,0,0,0.7);/*0.7表示透明度*/
            overflow: hidden;/*隐藏圆点*/
            line-height: 40px;/*行高*/
        }
        li:nth-of-type(2n){/*2n表示偶数行*/
            background-color: rgba(0,0,0,0.9);
        }
        li:hover{/*hover表示鼠标放上去之后的变化*/
            background-color: cadetblue;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" ><span>JavaEE培训</span></a></li>
        <li><a href="#" ><span>Android培训</span></a></li>
        <li><a href="#" ><span>PHP培训</span></a></li>
        <li><a href="#" ><span>UI设计培训</span></a></li>
        <li><a href="#" ><span>iOS培训</span></a></li>
        <li><a href="#" ><span>前端与移动开发培训</span></a></li>
        <li><a href="#" ><span>C/C++培训</span></a></li>
        <li><a href="#" ><span>网络营销培训</span></a></li>
        <li><a href="#" ><span>游戏开发培训</span></a></li>
        <li><a href="#" ><span>云计算之大数据培训</span></a></li>
    </ul>
</nav>
</body>
</html>

 

posted @ 2019-11-12 20:44  外号班长  阅读(2511)  评论(0)  编辑  收藏  举报