首页 > 代码库 > 导航制作
导航制作
首先，来个效果图：！！！！！！！！！！！！！！！！
代码如下：：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
nav{
width: 100%;
height: 200px;
}
ul{
width: 80%;
height: 100px;
margin: auto;
line-height: 100px;
padding-top: 5%;
}
li{
list-style: none;
width: 20%;
margin-top: 20px;
height: 40px;
float: left;
background: transparent;
border-radius: 10px;
line-height: 40px;
}
li:hover{
background: red;
transition: all ease-in .5s;
box-shadow: 2px 2px 5px grey;
}
a:nth-child(2){
color: black;
display: block;
text-decoration: none;
font-family: "黑体";
font-weight: bold;
}
li:hover a:nth-child(2){
color: white;
}
li>span{
display: block;
}
.icon1,.icon2,.icon3,.icon4,.icon5{
display: block;
margin-left: 30%;
margin-right: 5%;
float: left;
}
.icon1{
margin-top: 10px;
width: 21px;
height: 20px;
background: url("icon.png");
}
.icon1{
margin-top: 10px;
width: 21px;
height: 20px;
background: url("icon.png");
background-position:-22px 0;
}
.icon2{
margin-top: 10px;
width: 20px;
height: 19px;
background: url("icon.png");
background-position:-22px -20px;
}
.icon3{
width: 17px;
height: 23px;
margin-top: 8px;
background: url("icon.png");
background-position:-22px -41px;
}
.icon4{
width: 19px;
height: 16px;
margin-top: 12px;
background: url("icon.png");
background-position:-23px -64px;
}
.icon5{
width: 19px;
height: 16px;
margin-top: 12px;
background: url("icon.png");
background-position:-23px -102px;
}
li:hover span .icon1{
background: url("icon.png");
background-position:0 0;
}
li:hover span .icon2{
background: url("icon.png");
background-position:0 -20px;
}
li:hover span .icon3{
background: url("icon.png");
background-position:0 -41px;
}
li:hover span .icon4{
background: url("icon.png");
background-position:0 -64px;
}
li:hover span .icon5{
background: url("icon.png");
background-position:0 -102px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<span>
<a class="icon1" href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#">热点</a>
</span>
</li>
<li>
<span>
<a class="icon2" href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#">成都</a>
</span>
</li>
<li>
<span>
<a class="icon3" href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#">头条</a>
</span>
</li>
<li>
<span>
<a class="icon4" href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#">教育</a>
</span>
</li>
<li>
<span>
<a class="icon5" href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#">热点</a>
</span>
</li>
</ul>
</nav>
</body>
</html>
总结：float的包裹性。让你设置后的块级元素失效。
导航的设置要跟随窗口的变化而变化，不能让
导航混乱。
导航制作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。