<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{margin: 0;
padding: 0;}
body{font-size: 20px;}
.header{
background-color: #00712F;
height: 50px;
width: 100%;
}
.header ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.header ul li{float: left;}
.header ul a{
display: block;
color: white;
text-align: center;
font-size: 15px;
padding: 14px 16px;
text-decoration: none;
}
.header ul a:hover{background-color: tan;}
.header ul .left{
margin-left: 100px;
float: left;
}
.header ul .right{
margin-right: 100px;
float: right;
}
.header1 img{/*图片设置*/
width: 279px;
height: 64px;
margin-left: 239px;
margin-top: 23px;
margin-bottom: 10px;
}
.header1 .line{/*图片下横线分栏*/
border-top: 1px solid brown;
width: 1160px;
margin-left: 239px;
}
.header1 ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-left: 200px;
}
.header1 ul li{float: left;}
.header1 ul a{
display: block;
height: 15px;
width: 78px;
color: #00712F;
background-color: white;
text-align: center;
font-size: 16px;
padding: 14px 12px;
margin-left: 20px;
text-decoration: none;
}
.header1 ul a:hover{color: white; background-color: #00712F;}
.header1 ul li .DrapdownWord{/*列表下拉菜单内容*/
display: none;/*平时不显示*/
position: absolute;
}
.header1 ul li:hover .DrapdownWord{/*鼠标放置li时DrapdownWord状态设置*/
display: block;
}
.header1 ul li .DrapdownWord a{
display: block;
height: 15px;
width: 78px;
color: white;
background-color: #00712F;
text-align: center;
font-size: 16px;
padding: 14px 12px;
margin-left: 20px;
text-decoration: none;
}
.header1 ul li .DrapdownWord a:hover{
color: #00712F;
background-color: tan;
}
.header1 ul li .DrapdownWord:hover .li{/*鼠标放置DrapdownWord时,li状态设置*/
color: white;
background-color: #00712F;
}
</style>
</head>
<body>
<div class="header">
<ul>
<div class="left">
<li><a href="">电子邮箱</a></li>
<li><a href="">校务公开</a></li>
<li><a href="">信息门户</a></li>
<li><a href="">图书馆</a></li>
<li><a href="">博物馆</a></li>
</div>
<div class="right">
<li><a href="">学生</a></li>
<li><a href="">教工</a></li>
<li><a href="">考生</a></li>
<li><a href="">校友</a></li>
<li><a href="">访客</a></li>
<li><a href="">国际</a></li>
<li><a href="">搜索</a></li>
</div>
</ul>
</div>
<div class="header1">
<a href=""><img src="img/logo2018.png"/></a>
<div class="line"></div>
<ul>
<li><a href="">学校新闻</a></li>
<li>
<a href="">学校概况</a>
<div class="DrapdownWord">
<a href="">学校简介</a>
<a href="">学校简章</a>
<a href="">历史沿革</a>
<a href="">院系设置</a>
<a href="">机构设置</a>
<a href="">现任领导</a>
<a href="">历任领导</a>
</div>
</li>
<li><a href="">院系设置</a></li>
<li><a href="">教育教学</a>
<div class="DrapdownWord">
<a href="">本科生教育</a>
<a href="">研究生教育</a>
<a href="">国际生教育</a>
<a href="">继续教育</a>
</div>
</li>
<li><a href="">招生就业</a>
<div class="DrapdownWord">
<a href="">本科生招生</a>
<a href="">研究生招生</a>
<a href="">留学生招生</a>
<a href="">继续教育</a>
<a href="">本科生就业</a>
<a href="">研究生就业</a>
</div>
</li>
<li>
<a href="">师资团队</a>
<div class="DrapdownWord">
<a href="">概况</a>
<a href="">人才计划</a>
</div>
</li>
<li>
<li><a href="">人才招聘</a></li>
<li><a href="">学科科研</a>
<div class="DrapdownWord">
<a href="">学科建设</a>
<a href="">科学研究</a>
<a href="">学术期刊</a>
<a href="">社会服务</a>
</div>
</li>
<li><a href="">合作交流</a></li>
<li><a href="">走进华农</a>
<div class="DrapdownWord">
<a href="">校园风光</a>
<a href="">校园生活</a>
<a href="">使用信息</a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>![图片[1]-华中农业大学: 官网导航栏 – 北梦の博客-北梦の博客](https://www.hzau.edu.cn/dfiles/14527/public/doc/images/logo2018.png){kind=logo}
© 版权声明
THE END
暂无评论内容