abstract：继续根据17173网站导航条的的下拉菜单进行模仿下拉菜单案例！结合两次作业，个人理解制作导航一定要提前有多规划，不光要规划好各盒子的宽度高度，更要对盒子的层级有清晰的定位！只有提前定位好层级，才能更好的结合实际情况，做出好的导航条！还是要多多练习~练习的多才能做出更符合用户审美的布局！本机上是HTML跟CSS文件分开制作的~因为要上传作业~所以把CSS文件里的复制到HTML文件里方便上传！<
继续根据17173网站导航条的的下拉菜单进行模仿下拉菜单案例！
结合两次作业，个人理解制作导航一定要提前有多规划，
不光要规划好各盒子的宽度高度，
更要对盒子的层级有清晰的定位！
只有提前定位好层级，才能更好的结合实际情况，做出好的导航条！
还是要多多练习~练习的多才能做出更符合用户审美的布局！
本机上是HTML跟CSS文件分开制作的~因为要上传作业~所以把CSS文件里的复制到HTML文件里方便上传！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17173导航条</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/*清楚浏览器的默认边距样式*/
}
li{list-style: none}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
/*清除默认链接下划线，设置颜色跟字体大小*/
a:hover{
color: #ee7800;
}
.tapnav{
width: 100%;
height: 45px;
background-color: #38b48b;
}
/*1.首先设置顶部导航条的宽高背景颜色*/
.tapnav_con{
width: 1280px;
height: 45px;
margin:0px auto;
line-height: 45px;
}
/*2.设置中间导航条的宽高，line-height: 设置行高（一般同导航条宽度）
margin:0px auto;设置对象上下间隔为0px，左右间隔根据对象宽度自适应。*/
.tapnav_c1{
width: 250px;
height: 45px;
float:left;
}
/*3.分析各个盒子的宽度跟浮动效果，设置c1 c2 c3 user宽高跟排序*/
.tapnav_d1{
padding-right: 20px;
}
/*4.设置左侧盒子标签1的格式*/
.tapnav_d2{
width: 108px;
height: 45px;
display: inline-block;
position: relative;
text-align: center;
/*8.设置导航栏相对定位，同时设置下拉菜单绝对定会，就可以解决移动显示下拉菜单时其他标签跟随移动的问题*/
}
/*5.设置左侧盒子标签2的格式*/
.tapnav_d2:hover{
background-color: white;
}
.tapnav_e1{
width: 106px;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
border-bottom: #cccccc 1px solid;
display: none;
}
/*6.设置导航下拉菜单边框的属性，并设置隐藏不显示*/
.tapnav_d2:hover .tapnav_e1{
display: block;
position: absolute;
}
/*7.设置鼠标放置到导航菜单的位置，显示下拉菜单*/
.tapnav_f1{
height: 120px;
text-align:left;
padding-left: 10px;
}
/*9.分析下拉菜单的宽高边距来进行设置*/
.tapnav_f2{
height: 30px;
line-height: 30px;
font-weight: bold;
color: #ee7800;
text-align:left;
padding-left: 10px;
}
.tapnav_f3{
height: 60px;
text-align:left;
padding-left: 10px;
}
.tapnav_g1{
height: 30px;
line-height: 30px;
font-weight: bold;
color: #ee7800;
}
.tapnav_g2{
height: 30px;
line-height: 30px;
text-indent: 15px;
}
.tapnav_c2{
width: 400px;
height: 45px;
float:left;
}
.tapnav_c3{
width: 100px;
height: 45px;
float:right;
}
.tapnav_user{
width: 120px;
height: 45px;
float:right;
}
</style>
</head>
<body>
<div class="tapnav"><!--整体导航条盒子-->
<div class="tapnav_con"><!-- 中心控制条盒子-->
<div class="tapnav_c1"><!--左侧控制条盒子-->
<span class="tapnav_d1"><a href="">17173首页</a></span><!--首页盒子-->
<div class="tapnav_d2"><!--网站导航-->
<a href=""><span class="fa fa-navicon (alias)" style="color: #ee7800"></span>网站导航</a><!--网站导航-->
<div class="tapnav_e1"><!--网站导航下拉菜单-->
<div class="tapnav_f1">
<div class="tapnav_g1"><a href="">找游戏</a> </div>
<div class="tapnav_g2">
<ul>
<li><a href="">近期热门</a></li>
<li><a href="">最新入库</a> </li>
<li><a href="">最新测试</a> </li>
</ul>
</div>
</div>
<div class="tapnav_f2"><a href="">看新闻</a> </div>
<div class="tapnav_f3">
<div class="tapnav_g1"><a href="">看视频</a></div>
<div class="tapnav_g2"><a href="">游戏直播</a> </div>
</div>
<div class="tapnav_f2"><a href="">抢号</a></div>
<div class="tapnav_f2"><a href="">领福利</a> </div>
<div class="tapnav_f2"><a href="">逛论坛</a> </div>
</div>
</div>
</div>
<div class="tapnav_c2"></div><!--中间控制条盒子-->
<div class="tapnav_c3"></div><!--热门游戏控制盒子-->
<div class="tapnav_user"></div><!--右侧控制条盒子-->
</div>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-27 17:33:13
Teacher's summary：完成的不错，可以把常用的css样式写到一个文件，下次直接可以使用。继续加油