摘要：本章節(jié)實(shí)現(xiàn)的頁(yè)面導(dǎo)航利用簡(jiǎn)單的布局，實(shí)現(xiàn)兩個(gè)小米商城導(dǎo)航效果案例1：HTML部分------------------------------------------------------------------------------------------------------------------------------------------------<div class=&q

本章節(jié)實(shí)現(xiàn)的頁(yè)面導(dǎo)航

利用簡(jiǎn)單的布局，實(shí)現(xiàn)兩個(gè)小米商城導(dǎo)航效果

案例1：

HTML部分

------------------------------------------------------------------------------------------------------------------------------------------------

<div class="banner_1 mr13 ">

<ul>

<li  style="margin-right: 12.7px;"><span class="fa fa-mobile-phone fa-2x"></span>選購(gòu)手機(jī)</li>

<li  style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企業(yè)團(tuán)購(gòu)</li>

<li><span class="fa fa-facebook fa-2x"></span>F碼通道</li>

<li  style="margin-right: 12.7px;"><span class="fa fa-file-text fa-2x"></span>米粉卡</li>

<li  style="margin-right: 12.7px;"><span class="fa fa-refresh fa-2x"></span>以舊換新</li>

<li><span class="fa fa-credit-card fa-2x"></span>話費(fèi)充值</li>

</ul>

</div>

------------------------------------------------------------------------------------------------------------------------------------------------

CSS部分：

.banner_1{width: 235px;background: #000;height: 100%;float: left;}

.banner_1 ul{padding: 20px 10px;}

.banner_1 ul li{float: left;color: #ccc;line-height: 40px;text-align: center;width: 60px;}

.banner_1 ul li span{display: block;}

------------------------------------------------------------------------------------------------------------------------------------------------

實(shí)際效果如圖：

------------------------------------------------------------------------------------------------------------------------------------------------

導(dǎo)航2：

HTML部分：

<div class="bannerh2">

<h2>智能</h2>

<div class="tab">

<ul>

<li>熱門(mén)</li>

<li>電視影音</li>

<li>電腦</li>

<li>家具</li>

</ul>

<span><i class="fa fa-angle-right"></i></span>  

</div>

</div>

------------------------------------------------------------------------------------------------------------------------------------------------

CSS部分：

.bannerh2{height: 60px;line-height: 60px;}

.bannerh2 h2{font-size: 22px;font-weight: 400;float: left;}

.bannerh2 .tab{float:right;margin-right: 10px;}

.tab span{width: 20px;height: 20px;background: #ccc;line-height: 20px;border-radius: 10px;display: inline-block;text-align: center;color: #fff;margin-left: 10px;}

.tab ul{float: left;top: 16px;position: relative;}

.tab ul li{float: left;margin-right: 15px;height: 28px;line-height: 28px;}

.tab ul li:hover{color: #ff6500;border-bottom: 2px solid #ff6500;}

------------------------------------------------------------------------------------------------------------------------------------------------

效果如圖：

鼠標(biāo)懸浮在文字上有一個(gè)2像素的下邊框效果

批改老師：滅絕師太批改時(shí)間：2019-02-25 09:10:33
老師總結(jié)：布局思路清晰 , 完成的不錯(cuò) ! 繼續(xù)加油哦 !