摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航布局</title><style>*{margin:0px;padding:0px;}.nav{}.banner{height: 45px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航布局</title>
<style>
*{margin:0px;padding:0px;}
.nav{
}
.banner{height: 45px;
width:100%;
margin:0 auto;
box-shadow:0px 2px 5px #A0A0A0;
background: #ECEBE3;
}
.nav li{width:19%;
height: 45px;
padding-left:9px;
color:#000;
text-align: center;
line-height: 45px;
list-style: none;
float: left;
}
.nav li:hover{
font-weight: bold;
background-color: #373423;
}
#clear{clear:both;}
a{text-decoration:none;
color:#000;
}
</style>
</head>
<body>
<div class="nav">
<div class="banner">
<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 id="clear"></div>
</div>
</body>
</html>
批改老师:灭绝师太批改时间:2019-02-19 16:28:26
老师总结:完成导航样式稍简单,可以挑战其他类型导航哦!