CSS3构建左侧导航栏

最新推荐文章于 2023-09-20 08:50:45 发布

程序员班长

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量1k

点赞数 2

分类专栏： Web前端文章标签： CSS3

本文链接：https://blog.csdn.net/KK_2018/article/details/103038213

版权

Web前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

废话不说，先上图

代码：

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