abstrak：<!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;
/*清楚瀏覽器的默認(rèn)邊距樣式*/
}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
/*清除默認(rèn)鏈接下劃線，設(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è)置對(duì)象上下間隔為0px，左右間隔根據(jù)對(duì)象寬度自適應(yīng)。
line-height:設(shè)置行間的距離（行高）。*/
.tapnav_content a:hover{
color: #ee7800 ;
text-decoration: underline;
}
/*設(shè)置移動(dòng)到導(dǎo)航條鏈接上的效果:顏色以及增加下劃線*/
.tapnav_left{
width: 320px;
height: 45px;
float: left;
}
/*設(shè)置左側(cè)盒子的寬高,以及浮動(dòng)效果*/
.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è)置移動(dòng)到網(wǎng)站導(dǎo)航塊出現(xiàn)白色背景*/
.tapnav_midl{
width: 550px;
height: 45px;
float: left;
}
/*設(shè)置中間導(dǎo)航條寬高以及浮動(dòng),*/
.tapnav_midl a{
margin-right: 5px;
}
/*設(shè)置各選項(xiàng)卡間距*/
.tapnav_hot{
width: 100px;
height: 45px;
float: left;
}
/*設(shè)置熱門標(biāo)簽寬高以及浮動(dòng)*/
.tapnav_h{
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
/*設(shè)置熱門標(biāo)簽文本居中及左右邊距*/
.tapnav_hot a:hover{
background-color: white;
}
/*設(shè)置鼠標(biāo)移到熱門標(biāo)簽出現(xiàn)白色背景塊*/
.tapnav_right{
width: 100px;
height: 45px;
float: right;
}
/*設(shè)置右導(dǎo)航寬高以及浮動(dòng)*/
.tapnav_right a{
margin-right: 15px;
}
/*設(shè)置右導(dǎo)航標(biāo)簽的間距*/
.clear{clear: both}
/*清除浮動(dòng)效果*/
</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="">注冊(cè)</a>
</span>
</div>
</div>
<div class="clear"></div>
<hr>
</div>
</body>
</html>
——————————————————————————————————————————————
原文網(wǎng)址：http://news.17173.com/content/04252019/102657943.shtml
個(gè)人理解：做導(dǎo)航條應(yīng)提前計(jì)算好各個(gè)盒子的寬高屬性，做到心里有數(shù)！
還有多使用內(nèi)外邊距來調(diào)整標(biāo)簽的寬度！
感謝老師的教程！收獲很大！
Guru membetulkan：查無此人Masa pembetulan：2019-04-26 13:31:48
Rumusan guru：完成的不錯(cuò)。可以把常用的css樣式寫到單獨(dú)的文件里，隨時(shí)可以使用。繼續(xù)加油。