1.垂直导航栏
效果图
当鼠标放上去的时候,颜色会变
点击时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS垂直导航栏</title>
<style>
body{
/* 消除间隙 */
margin:0;
}
ul{
/* 清除小标志*/
list-style-type: none;
padding:0;
margin:0;
width:200px;
height:100%;
background-color: gainsboro;
/* 这种简写的情况下,不要忘记设置border-style,这里设置为solid实线 */
border:1px solid black;
}
a{
/* 从行内元素变为块级元素,可以让一行都点击 */
display:block;
/* 设置长度 */
width:auto;
/* 链接去掉下划线 */
text-decoration: none;
/* 设置字体颜色 */
color:black;
/* 设置a的 不要设置li的 不然会有空隙 */
padding-top: 10px;
text-align: center;
}
/* 这里只添加了 下边界,因为如果全部边界都包裹的话会重叠*/
li{
border-bottom:1px solid black;
}
/* 为了不重叠最下面的,最后一个设置为0 */
li:last-child{
border-bottom: 0px;
}
a:hover{
background-color: gray;
color:white;
}
a:active{
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
2. 全屏高度的固定导航条
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS垂直全屏固定导航栏</title>
<style>
body{
/* 消除间隙 */
margin:0;
}
ul{
/* 清除小标志*/
list-style-type: none;
padding:0;
margin:0;
width:25%;
background-color: gainsboro;
/* 全屏添加了这里 */
height: 100%;
/* 要设定position为fixed,为了固定 */
position:fixed;
/* 如果导航栏的内容很多允许滚动 */
overflow:auto;
}
a{
/* 从行内元素变为块级元素,可以让一行都点击 */
display:block;
/* 设置长度 */
width:auto;
/* 链接去掉下划线 */
text-decoration: none;
/* 设置字体颜色 */
color:black;
/* 设置a的 不要设置li的 不然会有空隙 */
padding-top: 10px;
text-align: center;
}
/* 这里只添加了 下边界,因为如果全部边界都包裹的话会重叠*/
/* 为了不重叠最下面的,最后一个设置为0 */
li:last-child{
border-bottom: 0px;
}
a:hover{
background-color: gray;
color:white;
}
a:active{
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
3.水平导航栏
可以用float或者将li元素设置为display:inline
推荐使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.水平导航栏浮动</title>
<style>
ul{
width:100%;
list-style-type: none;
margin:0;
padding:0;
position: fixed;
background-color:lemonchiffon;
/* 固定在顶部 */
top:0;
/* 固定在底部 */
/* bottom:0; */
}
a{
float:left;
color:black;
padding: 20px;
text-align: center;
text-decoration: none;
}
a:hover{
background-color:lavender;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>