一、垂直导航条
固定在左侧的垂直导航条
<style>
body{
margin:0;
}
ul{
list-style-type: none;/*去除li有序列表默认样式*/
margin:0;
padding:0;
width:25%;
background-color:#f1f1f1;
position:fixed;/*固定定位*/
height:100%;
}
li a {
display:block;
color:#000;
padding:8px 16px;
text-decoration:none;/*去除a链接默认样式下划线*/
}
li a.active{
background-color:#4CAF50;
color:white;
}
li a:hover:not(.active)/*选择器,选鼠标划过不是active的标签*/{
background-color: #555;
color:white;
}
</style>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
二、水平导航栏
<style>
body{
margin:0;
}
ul{
list-style-type: none;/*去除li有序列表默认样式*/
margin:0;
padding:0;
background-color:#333;
overflow:hidden;/*清除浮动*/
}
li{
float:left;
}
li a {
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration:none;/*去除a链接默认样式下划线*/
}
li a:hover/*鼠标移动到选项上修改背景颜色*/{
background-color: #111;
}
</style>
<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>
三、 导航栏下拉菜单
<style>
body{
margin:0;
}
ul{
list-style-type: none;/*去除li有序列表默认样式*/
margin:0;
padding:0;
background-color:#333;
overflow:hidden;
}
li{
float:left;/*让li标签左浮动*/
}
li a , .dropbtn/*让li中a标签和div中a标签变成行内块元素在一行显示*/{
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;/*去除a链接默认样式下划线*/
}
li a:hover,.dropdown:hover,.dropbth/*鼠标移动到选项上修改背景颜色*/{
background-color: #111;
}
.dropdown/*让下拉列表整个div盒子变成行内块元素*/{
display:inline-block;
}
.dropdown-content/*让下拉列表的链接内容隐藏*/{
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a/*让下拉列表的a标签变成块级元素独占一行*/
{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover/*下拉列表的a标签鼠标划过变的颜色*/
{
background-color:#3059fa;
}
.dropdown:hover .dropdown-content/*下拉列表的内容变成块级元素显示*/{
display: block;
}
</style>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</div>
</ul>
四、选项卡
利用css3中新添的伪类选择器,选择奇偶数,进行隔行变色
:nth-child(n) n表示具体的第几个
<style>
li{
list-style: none;
}
.list li{
display: block;
width:300px;
height: 50px;
}
.list li:nth-child(2n){
background-color:orange;
}
.list li:nth-child(2n-1){
background-color: deepskyblue;
}
</style>
div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
</ul>
</div>