1.所需图片位置
链接：https://pan.baidu.com/s/1uD80tFJW3pl-qMHUWy7jeg
提取码：e1y4
复制这段内容后打开百度网盘手机App，操作更方便哦
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 清除滚动条*/
html,body{height: 100%;/*overflow: hidden;*/}
html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
/*display相关属性值：
none:此元素不会被显示。
block:此元素将显示为块级元素，此元素前后会带有换行符。
inline:默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block:行内块元素。*/
/*text-decoration: none;去除a标签下划线;*/
a{text-decoration: none;display: block;}
li{list-style: none;}/* 去除li前边的点*/
img{display: block;}/*把img设置为块级元素 */
/* 如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因
* *为内部没有clear，导致不能撑开,所以使用清除浮动解决这个问题。*/
.clearfix{*zoom: 1;}
.clearfix:after{content: "";display: block;clear: both;}
/*头部的包裹区域*/
#head{width: 100%;height: 80px;position: relative;}
/*头部布局中的主体内容*/
#head>.headerMain{width: 1100px;height: 100%;position: relative;background: orange;
margin: 0 auto;}
#head>.headerMain>.logo{float: left;margin-top: 30px;}
#head>.headerMain>#nav{float: right;margin-top: 50px;}
#head>.headerMain>#nav>.list li{float: left;margin-left: 40px;position: relative;}
#head>.headerMain>#nav>.list li .up{position: absolute;color: black;width: 0;overflow: hidden;
transition: 2s width;}
#head>.headerMain>#nav>.list li:hover .up{width: 100%;}
#head>.headerMain>.arrow{width: 21px;height: 11px;background: url(img/arrow.png) no-repeat;
position: absolute;left: 50%;bottom: -11px;z-index: 2;transition: 2s left;}
#wrap>.content{width: 1100px;height: 550px;background: darkgrey;
position: absolute;left: 0;top: 0;right: 0;bottom: 0;
margin: auto;}
</style>
</head>
<body>
<section id="wrap">
<!--头部布局-->
<header id="head">
<div class="headerMain">
<!--logo-->
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav id="nav">
<ul class="list clearfix">
<li>
<a href="javascript:void(0)">
<div class="up"><img src="img/home_b.png"/></div>
<div class="down"><img src="img/home.png"/></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Course</div>
<div class="down">Course</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Works</div>
<div class="down">Works</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">About</div>
<div class="down">About</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Team</div>
<div class="down">Team</div>
</a>
</li>
</ul>
</nav>
<!--小箭头-->
<div class="arrow"></div>
</div>
</header>
<!--主体内容区-->
<section class="content"></section>
</section>
</body>
<script type="text/javascript">
window.οnlοad=function(){
//获取所以得菜单标签li
var headLis=document.querySelectorAll("#head>.headerMain>#nav>.list li");
//获取所以得菜单标签li下的up元素
var headLiUps=document.querySelectorAll("#head>.headerMain>#nav>.list li .up");
var arrow=document.querySelector("#head>.headerMain>.arrow");
//初始化的时候让第一个按钮默认选中
headLiUps[0].style.width="100%";
//设置初始化的时候小箭头的位置
arrow.style.left=headLis[0].offsetLeft+headLis[0].offsetWidth/2-arrow.offsetWidth/2+"px";
//给每一个菜单按钮一个点击事件
for(var i=0;i<headLis.length;i++){
//给每一个li一个属性index，属性值为该li的下标值
headLis[i].index=i;
headLis[i].οnclick=function(){
for (var i=0;i<headLiUps.length;i++) {
headLiUps[i].style.width="";}
//让小箭头移动到当前点击按钮的居中位置
arrow.style.left=headLis[this.index].offsetLeft+
headLis[this.index].offsetWidth/2-arrow.offsetWidth/2+"px";
headLiUps[this.index].style.width="100%";
}
}
}
</script>
</html>
3.头部显示界面
