您的位置：首页 > Web前端 > CSS

精通css 第六章 (1)导航栏

2017-07-26 11:52 344 查看

下拉菜单

.nav li{
list-style-type: none;
line-height: 30px;
text-align: center;
}
.nav>li{
float: left;
}
.nav li a{
display: inline-block;
width: 100px;
height: 30px;
text-decoration: none;
background-color: black;
}
.nav li a:hover,a:active{
color: cornflowerblue;
}
.nav li a:link,a:visited{
color: white;
}

//下拉菜单实现的重点代码
.nav .subnav{
left: -999em;/*将子菜单移出屏幕*/
position: absolute;
z-index: 1000;
}
.nav li:hover .subnav{
left:auto;/*让子菜单回到自然状态*/
}




页码导航

<style>
body{
font-size: 1.4em;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
float: left;
list-style-type: none;
margin-left: 0.5em;
}
ul li a{
display: block;/*变为块级元素*/
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none;
background: white;
color: blue;
}
ul a[rel="Prev"],
ul a[rel="Next"]{
border: none;/*向前，向后无边框*/
}
ul li a:hover,
ul li a:focus,
ul li.selected{
background: blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" rel="Prev"><<Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" rel="Next">Next>></a></li>
</ul>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航