如何用CSS建立网页左边导航
网页左边导航,也称为侧边栏导航,是指在网页左边设置的一个导航栏,用来帮助用户快速找到所需的内容,提高网页的用户体验。本文将介绍如何使用CSS来建立网页左边导航。
首先,需要创建一个div元素,用来作为整个导航栏的容器,并为其添加一个id,例如“sidebar”,这样可以方便地使用CSS来设置它的样式。
接下来,我们可以为sidebar设置宽度和高度,以及它的位置,例如:
```
#sidebar {
width: 200px;
height: 400px;
position: fixed;
left: 0px;
top: 0px;
}
```
上面的代码设置了sidebar的宽度为200px,高度为400px,位置为固定,左边距0px,上边距0px,这样sidebar就可以始终在页面左边固定的位置显示了。
接下来,我们需要创建一个左边导航栏的列表,为每个列表项添加一个id,然后设置每个列表项的样式,例如:
```
#sidebar ul li {
list-style: none;
font-size: 16px;
line-height: 40px;
background-color: #f2f2f2;
color: #333;
padding-left: 10px;
border-bottom: 1px solid #ddd;
text-decoration: none;
}
```
上面的代码设置了每个列表项的样式,并且将列表标记设置为none,以及设置字体大小、行高等,让每个列表项看起来更舒适。
最后,要设置当鼠标悬停在每个列表项时的样式,可以使用CSS的:hover伪类来实现,例如:
```
#sidebar ul li:hover {
background-color: #f7f7f7;
color: #000;
cursor: pointer;
}
```
上面的代码设置了当鼠标悬停在每个列表项上时的样式,包括背景颜色、字体颜色、鼠标形状等,这样就可以使用CSS来建立网页左边导航了。