本质:导航栏=链接列表
一般分为:垂直,水平2种
垂直导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
/*从列表中删除边距和填充设置整个列表宽度和背景色,添加边框实线红色,*/
ul{
list-style-type:none ;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid red;
}
/*设置每一列为块元素,背景色,内边距*/
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色和字体颜色 */
li a:hover {
background-color: deepskyblue;
color: sandybrown;
}
/*每一列居中,添加红色边框*/
li {
text-align: center;
border-bottom: 1px solid red;
}
/*最后一列的下边框不要,因为会和ul边框重复变双线*/
li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.kugou.com/song/#hash=3FC7F2369A02F00F6315869804AE89E4&album_id=10684687" target="_blank">音乐</a></li>
<li><a href="http://v.baidu.com/" target="_blank">视频</a></li>
<li><a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E5%9B%BE%E7%89%87" target="_blank">图片</a></li>
<li><a href="http://tg.37.com/?uid=1808911" target="_blank">游戏</a></li>
</ul>
</body>
</html>
效果:
也可以通过设置成全屏高度的固定导航条,不设置边框,ul相对窗口固定,设置宽高比例。body外边距为0.
ul {
width: 25%;
position: fixed;
height: 100%;
overflow: auto; /* 如果导航栏选项多,允许滚动 */
}
body { margin: 0}