abstrait：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿17173頁面導(dǎo)航</title> <link rel="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿17173頁面導(dǎo)航</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">
<!--導(dǎo)入字體庫-->
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/*清楚瀏覽器的默認邊距樣式*/
}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
/*清除默認鏈接下劃線，設(shè)置顏色跟字體大小*/
.tapnav{
width: 100%;
height: 45px;
background-color: #F5F5F5;
}
/*設(shè)置頂部導(dǎo)航條的寬高背景顏色*/
.tapnav_content{
width: 1280px;
height: 45px;
margin:0px auto;
line-height: 45px;}
/* 設(shè)置導(dǎo)航條的寬高，外邊距為0
margin:0px auto;設(shè)置對象上下間隔為0px，左右間隔根據(jù)對象寬度自適應(yīng)。
line-height:設(shè)置行間的距離（行高）。*/
.tapnav_content a:hover{
color: #ee7800 ;
text-decoration: underline;
}
/*設(shè)置移動到導(dǎo)航條鏈接上的效果:顏色以及增加下劃線*/
.tapnav_left{
width: 320px;
height: 45px;
float: left;
}
/*設(shè)置左側(cè)盒子的寬高,以及浮動效果*/
.tapnav_left a{
margin-right: 5px;
}
/*設(shè)置左側(cè)導(dǎo)航條的邊距*/
.tapnav_a{
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
/*設(shè)置網(wǎng)站導(dǎo)航塊文本居中,文本左右內(nèi)邊距*/
.tapnav_a:hover{
background-color: white;
}
/*設(shè)置移動到網(wǎng)站導(dǎo)航塊出現(xiàn)白色背景*/
.tapnav_midl{
width: 550px;
height: 45px;
float: left;
}
/*設(shè)置中間導(dǎo)航條寬高以及浮動,*/
.tapnav_midl a{
margin-right: 5px;
}
/*設(shè)置各選項卡間距*/
.tapnav_hot{
width: 100px;
height: 45px;
float: left;
}
/*設(shè)置熱門標簽寬高以及浮動*/
.tapnav_h{
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
/*設(shè)置熱門標簽文本居中及左右邊距*/
.tapnav_hot a:hover{
background-color: white;
}
/*設(shè)置鼠標移到熱門標簽出現(xiàn)白色背景塊*/
.tapnav_right{
width: 100px;
height: 45px;
float: right;
}
/*設(shè)置右導(dǎo)航寬高以及浮動*/
.tapnav_right a{
margin-right: 15px;
}
/*設(shè)置右導(dǎo)航標簽的間距*/
.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>
網(wǎng)站導(dǎo)航
</a>
</span>
</div>
<div class="tapnav_midl">
<span class="tapnav_a">
<a href="">新網(wǎng)游</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>
——————————————————————————————————————————————
原文網(wǎng)址：http://news.17173.com/content/04252019/102657943.shtml
個人理解：做導(dǎo)航條應(yīng)提前計算好各個盒子的寬高屬性，做到心里有數(shù)！
還有多使用內(nèi)外邊距來調(diào)整標簽的寬度！
感謝老師的教程！收獲很大！
Professeur correcteur：查無此人Temps de correction：2019-04-26 13:31:48
Résumé du professeur：完成的不錯?？梢园殉Ｓ玫腸ss樣式寫到單獨的文件里，隨時可以使用。繼續(xù)加油。