摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!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>简单导航条小案例
批改老师：西门大官人批改时间：2019-02-17 10:36:34
老师总结：作业写的不错，最好能上传一下页面运行的效果图
