摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取随机色</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取随机色</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<style>
*{margin: 0;padding: 0}
.top{width: 100%;height: 60px;background: black;}
.logo{width: 140px;float: left;margin-right: 20px;}
.logo img{width: 140px;height: 60px;}
a{text-decoration:none; color:#D3D3D3;display: block;}
li{list-style: none;}
.nav_left{float: left;}
.nav_left li{float: left;width: 96px;
margin:0 10px 0 10px;line-height: 55px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;border-bottom: 5px solid black;}
.nav_left li:hover{
border-bottom: 5px solid #CDCDB4;
}
.circle{position: absolute;top: 15px;}
.notice,.userbox{float:right;height: 60px;color:#D3D3D3;width: 60px;}
.userbox{margin-right: 10px;}
.userbox img{display:block;width: 28px;height: 28px;margin:16px 16px;border-radius:50%;}
.notice{font-size: 20px;line-height: 60px;text-align: center;}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index"><img src="images/logo.png" alt=""></a></div>
<ul class="nav_left">
<li style="width: 68px;background:rgba(255,255,255,0.2);border-bottom: 5px solid #CDCDB4;"><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">技术文章 <i class="fa fa-sort-down fa-1g"></i></a></li>
<li><a href="">编程词典 <i class="fa fa-sort-down fa-1g"></i></a></li>
<li><a href="">工具下载 <i class="fa fa-sort-down fa-1g"></i></a></li>
<li><a href="">特色课程 <i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></li>
<li><a href="">菜鸟学堂</a></li>
</ul>
<div class="userbox">
<a href=""><img src="images/avatar.jpg" alt=""></a>
</div>
<div class="notice"><a href=""><i class="fa fa-volume-up"></i><i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></div>
</div>
</body>
<script>
$('li').hover(
function(){$('li:first').css('border-bottom-color','black');$(this).css('border-bottom-color','#CDCDB4');}
,function(){$(this).css('border-bottom-color','black');$('li:first').css('border-bottom-color','#CDCDB4');}
)
</script>
</html>-----效果图-----
思路：
1、与老师的布局不同，考虑到可调整性，采用了下边框的方式。
2、下边框的显示用了jquery的hover事件，当鼠标移上li时，先把第一个li(也即首页)的下边框设为黑色，把当前li的下边框颜色设为米白；当鼠标移出li时，先把当前li下边框变黑，再把首页下边框变米白。
批改老师：天蓬老师批改时间：2019-04-14 21:44:30
老师总结：布局只要遵循一定的原则即可, 细节之处, 每个人的处理方式都是不同的, 实现效果, 做对是第一位的, 然后再求优
