css怎么做侧边导航栏

今天我们来学习一下如何用CSS制作侧边导航栏。在这里我们使用HTML的

和
• 标签作为基础结构，在CSS中进行样式的设置。 首先，我们需要定义
  和
  • 的样式。

    ul{
        list-style:none; /*去掉列表默认样式*/
        padding:0; /*去掉默认的内边距*/
        margin:0; /*去掉外边距*/
    }
    li{
        height:30px; /*设置每个导航项的高度*/
        line-height:30px; /*设置每个导航项的行高*/
        text-align:center; /*文字居中*/
        background-color:#eee; /*设置背景颜色*/
        border-bottom:1px solid #ccc; /*设置底部边框*/
    }
    

    接下来，我们需要为选中的导航项和鼠标悬停在导航项上的状态添加样式。

    

    li:hover{
        background-color:#ccc; /*设置鼠标悬停时的背景颜色*/
    }
    li.active{
        background-color:#ccc; /*设置选中时的背景颜色*/
    }
    

    最后，我们需要将导航项垂直排列，并设置导航项的宽度。

    ul{
        flex-direction:column; /*设置列表条排列方向*/
    }
    li{
        width:200px; /*设置导航项的宽度*/
    }
    

    通过这些简单的CSS样式设置，我们就可以得到一个美观的侧边导航栏了。