效果:
代码:
.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);
}