abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿17173页面导航</title> <link rel="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿17173页面导航</title>
<link rel="stylesheet" type="text/css" href="style.css">
<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;
/*清楚浏览器的默认边距样式*/
}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
/*清除默认链接下划线，设置颜色跟字体大小*/
.tapnav{
width: 100%;
height: 45px;
background-color: #F5F5F5;
}
/*设置顶部导航条的宽高背景颜色*/
.tapnav_content{
width: 1280px;
height: 45px;
margin:0px auto;
line-height: 45px;}
/* 设置导航条的宽高，外边距为0
margin:0px auto;设置对象上下间隔为0px，左右间隔根据对象宽度自适应。
line-height:设置行间的距离（行高）。*/
.tapnav_content a:hover{
color: #ee7800 ;
text-decoration: underline;
}
/*设置移动到导航条链接上的效果:颜色以及增加下划线*/
.tapnav_left{
width: 320px;
height: 45px;
float: left;
}
/*设置左侧盒子的宽高,以及浮动效果*/
.tapnav_left a{
margin-right: 5px;
}
/*设置左侧导航条的边距*/
.tapnav_a{
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
/*设置网站导航块文本居中,文本左右内边距*/
.tapnav_a:hover{
background-color: white;
}
/*设置移动到网站导航块出现白色背景*/
.tapnav_midl{
width: 550px;
height: 45px;
float: left;
}
/*设置中间导航条宽高以及浮动,*/
.tapnav_midl a{
margin-right: 5px;
}
/*设置各选项卡间距*/
.tapnav_hot{
width: 100px;
height: 45px;
float: left;
}
/*设置热门标签宽高以及浮动*/
.tapnav_h{
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
/*设置热门标签文本居中及左右边距*/
.tapnav_hot a:hover{
background-color: white;
}
/*设置鼠标移到热门标签出现白色背景块*/
.tapnav_right{
width: 100px;
height: 45px;
float: right;
}
/*设置右导航宽高以及浮动*/
.tapnav_right a{
margin-right: 15px;
}
/*设置右导航标签的间距*/
.clear{clear: both}
/*清除浮动效果*/
</style>
</head>
<body>
<div class="tapnav">
<div class="tapnav_content">
<div class="tapnav_left">
<span>
<a href="">17173首页 </a>
</span>
<span>
<a href=""class="tapnav_a">
<span class="fa fa-navicon (alias)" style="color: #ee7800"></span>
网站导航
</a>
</span>
</div>
<div class="tapnav_midl">
<span class="tapnav_a">
<a href="">新网游</a>
</span>
<span class="tapnav_a">
<a href="">新页游</a>
</span>
<span class="tapnav_a">
<a href="">礼包/激活码</a>
</span>
<span class="tapnav_a">
<a href="">今日开服</a>
</span>
<span class="tapnav_a">
<a href="">热门页游</a>
</span>
</div>
<div class="tapnav_hot">
<a href="" class="tapnav_h">热门游戏</a>
</div>
<div class="tapnav_right">
<span>
<a href="">登录</a>
</span>
<span>
<a href="">注册</a>
</span>
</div>
</div>
<div class="clear"></div>
<hr>
</div>
</body>
</html>
——————————————————————————————————————————————
原文网址：http://news.17173.com/content/04252019/102657943.shtml
个人理解：做导航条应提前计算好各个盒子的宽高属性，做到心里有数！
还有多使用内外边距来调整标签的宽度！
感谢老师的教程！收获很大！
Correcting teacher：查无此人Correction time：2019-04-26 13:31:48
Teacher's summary：完成的不错。可以把常用的css样式写到单独的文件里，随时可以使用。继续加油。