垂直导航栏:
html中:
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
CSS中:
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
width: 200px;
background-color: #f1f1f1;
}
li a{
display: block;
text-decoration: none;
padding:8px 16px;
color: #000;
}
li a:hover {
background-color: #555;
color: white;
}
选中的垂直导航栏
html中:
<ul>
<li><a class="active"href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
CSS中:
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
width: 200px;
background-color: #f1f1f1;
}
li a{
display: block;
text-decoration: none;
padding:8px 16px;
color: #000;
}
li a.active{
background-color:#4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
水平导航栏
html中:
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
CSS中:
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a{
display: block;
text-decoration: none;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
background-color: green;
}
选中的水平导航栏
html中:
<ul>
<li><a class = "active" href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
CSS中:
*{
margin:0;
padding:0;
}
ul{
list-style: none;
background-color: #333;
overflow: hidden;
}
li{
float: left;
}
li a{
display: block;
text-decoration: none;
color: white;
padding:14px 16px;
text-align:center;
}
li a.active{
background-color: green;
}
li a:hover:not(.active){
background-color: blue;
}