简单导航条小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
header{ width: 60%; height:60px; margin: 0 auto;
}
ul li{ width: 100px;height: 30px;
background: black;
padding: 15px;
text-align: center;
list-style: none;
}
ul li a:before{
content: url("hot.png");
margin-right: 2px;
}
span{
display: inline-block;
position: relative;
padding-top: 1px;
width: 100px;
height: 25px;
}
ul li:hover span{
border: 1px orange solid;
border-radius: 8px;
/*box-shadow: 0px 2px 20px orange ;*/
box-shadow: 0px 1px 20px orange inset;
}
ul li:hover a{color: yellow;}
ul li:hover a:before{content: none;}
a {text-decoration: none;color: white;}
.f-left{float: left}
</style>
</head>
<body>
<div class="top" style="clear: both">
<header >
<ul>
<li class="f-left"><span><a href="#">php</a></span></li>
<li class="f-left"><span><a href="#">javascript</a></span></li>
<li class="f-left"><span><a href="#">html</a></span></li>
<li class="f-left"><span><a href="#">css</a></span></li>
</ul>
</header>
</div>
</body>
</html>简单导航条小案例