html+css创建侧边导航栏

 效果：

 代码：

.left{
    position: fixed;
    width: 250px;
    height: 2000px;
    background-color: rgb(100, 93, 93);
    float: left;
    text-align: center;
}
.nav a{
    display: block;
    width: 247px;
    height: 70px;
    background-color: rgb(100, 93, 93);
    color: rgb(254, 254, 254);
    text-decoration: none;
    padding-top: 20px;
    line-height: 30px;
    font-size: 20px;
    border: 1px dotted black;
    font-weight: bold;
}
a:hover{
    background-color: rgb(8, 8, 8);

说明：

.left{

    position: fixed;             #将左侧盒子固定，使得页面上下拉动时左侧导航栏不会跟随移动

    width: 250px;

    height: 2000px;

    background-color: rgb(100, 93, 93);

    float: left;                      #使左侧盒子自动靠右

    text-align: center;         #将选项文字居中

}

 

.nav a{

    display: block;                #将选项链接转换成块，以便调节选项样式

    width: 247px;

    height: 70px;

    background-color: rgb(100, 93, 93);

    color: rgb(254, 254, 254);

    text-decoration: none;       #去除链接显示时自动生成的下划线

    padding-top: 20px;

    line-height: 30px;

    font-size: 20px;

    border: 1px dotted black;

    font-weight: bold;             

}

a:hover{                           #“hover”  使得当鼠标放在选项上时改变选项的字体颜色

    background-color: rgb(8, 8, 8);              

}