abstrak：繼續(xù)根據(jù)17173網(wǎng)站導(dǎo)航條的的下拉菜單進(jìn)行模仿下拉菜單案例！結(jié)合兩次作業(yè)，個(gè)人理解制作導(dǎo)航一定要提前有多規(guī)劃，不光要規(guī)劃好各盒子的寬度高度，更要對(duì)盒子的層級(jí)有清晰的定位！只有提前定位好層級(jí)，才能更好的結(jié)合實(shí)際情況，做出好的導(dǎo)航條！還是要多多練習(xí)~練習(xí)的多才能做出更符合用戶(hù)審美的布局！本機(jī)上是HTML跟CSS文件分開(kāi)制作的~因?yàn)橐蟼髯鳂I(yè)~所以把CSS文件里的復(fù)制到HTML文件里方便上傳！<
繼續(xù)根據(jù)17173網(wǎng)站導(dǎo)航條的的下拉菜單進(jìn)行模仿下拉菜單案例！
結(jié)合兩次作業(yè)，個(gè)人理解制作導(dǎo)航一定要提前有多規(guī)劃，
不光要規(guī)劃好各盒子的寬度高度，
更要對(duì)盒子的層級(jí)有清晰的定位！
只有提前定位好層級(jí)，才能更好的結(jié)合實(shí)際情況，做出好的導(dǎo)航條！
還是要多多練習(xí)~練習(xí)的多才能做出更符合用戶(hù)審美的布局！
本機(jī)上是HTML跟CSS文件分開(kāi)制作的~因?yàn)橐蟼髯鳂I(yè)~所以把CSS文件里的復(fù)制到HTML文件里方便上傳！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17173導(dǎo)航條</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;
/*清楚瀏覽器的默認(rèn)邊距樣式*/
}
li{list-style: none}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
/*清除默認(rèn)鏈接下劃線，設(shè)置顏色跟字體大小*/
a:hover{
color: #ee7800;
}
.tapnav{
width: 100%;
height: 45px;
background-color: #38b48b;
}
/*1.首先設(shè)置頂部導(dǎo)航條的寬高背景顏色*/
.tapnav_con{
width: 1280px;
height: 45px;
margin:0px auto;
line-height: 45px;
}
/*2.設(shè)置中間導(dǎo)航條的寬高，line-height: 設(shè)置行高（一般同導(dǎo)航條寬度）
margin:0px auto;設(shè)置對(duì)象上下間隔為0px，左右間隔根據(jù)對(duì)象寬度自適應(yīng)。*/
.tapnav_c1{
width: 250px;
height: 45px;
float:left;
}
/*3.分析各個(gè)盒子的寬度跟浮動(dòng)效果，設(shè)置c1 c2 c3 user寬高跟排序*/
.tapnav_d1{
padding-right: 20px;
}
/*4.設(shè)置左側(cè)盒子標(biāo)簽1的格式*/
.tapnav_d2{
width: 108px;
height: 45px;
display: inline-block;
position: relative;
text-align: center;
/*8.設(shè)置導(dǎo)航欄相對(duì)定位，同時(shí)設(shè)置下拉菜單絕對(duì)定會(huì)，就可以解決移動(dòng)顯示下拉菜單時(shí)其他標(biāo)簽跟隨移動(dòng)的問(wèn)題*/
}
/*5.設(shè)置左側(cè)盒子標(biāo)簽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.設(shè)置導(dǎo)航下拉菜單邊框的屬性，并設(shè)置隱藏不顯示*/
.tapnav_d2:hover .tapnav_e1{
display: block;
position: absolute;
}
/*7.設(shè)置鼠標(biāo)放置到導(dǎo)航菜單的位置，顯示下拉菜單*/
.tapnav_f1{
height: 120px;
text-align:left;
padding-left: 10px;
}
/*9.分析下拉菜單的寬高邊距來(lái)進(jìn)行設(shè)置*/
.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"><!--整體導(dǎo)航條盒子-->
<div class="tapnav_con"><!-- 中心控制條盒子-->
<div class="tapnav_c1"><!--左側(cè)控制條盒子-->
<span class="tapnav_d1"><a href="">17173首頁(yè)</a></span><!--首頁(yè)盒子-->
<div class="tapnav_d2"><!--網(wǎng)站導(dǎo)航-->
<a href=""><span class="fa fa-navicon (alias)" style="color: #ee7800"></span>網(wǎng)站導(dǎo)航</a><!--網(wǎng)站導(dǎo)航-->
<div class="tapnav_e1"><!--網(wǎng)站導(dǎo)航下拉菜單-->
<div class="tapnav_f1">
<div class="tapnav_g1"><a href="">找游戲</a> </div>
<div class="tapnav_g2">
<ul>
<li><a href="">近期熱門(mén)</a></li>
<li><a href="">最新入庫(kù)</a> </li>
<li><a href="">最新測(cè)試</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="">搶號(hào)</a></div>
<div class="tapnav_f2"><a href="">領(lǐng)福利</a> </div>
<div class="tapnav_f2"><a href="">逛論壇</a> </div>
</div>
</div>
</div>
<div class="tapnav_c2"></div><!--中間控制條盒子-->
<div class="tapnav_c3"></div><!--熱門(mén)游戲控制盒子-->
<div class="tapnav_user"></div><!--右側(cè)控制條盒子-->
</div>
</div>
</body>
</html>
Guru membetulkan：查無(wú)此人Masa pembetulan：2019-04-27 17:33:13
Rumusan guru：完成的不錯(cuò)，可以把常用的css樣式寫(xiě)到一個(gè)文件，下次直接可以使用。繼續(xù)加油