????：本章節(jié)實現的頁面導航利用簡單的布局，實現兩個小米商城導航效果案例1：HTML部分------------------------------------------------------------------------------------------------------------------------------------------------<div class=&q

本章節(jié)實現的頁面導航

利用簡單的布局，實現兩個小米商城導航效果

案例1：

HTML部分

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

<div class="banner_1 mr13 ">

<ul>

<li  style="margin-right: 12.7px;"><span class="fa fa-mobile-phone fa-2x"></span>選購手機</li>

<li  style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企業(yè)團購</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>話費充值</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;}

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

實際效果如圖：

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

導航2：

HTML部分：

<div class="bannerh2">

<h2>智能</h2>

<div class="tab">

<ul>

<li>熱門</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;}

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

效果如圖：

鼠標懸浮在文字上有一個2像素的下邊框效果

?? ???：滅絕師太?? ??：2019-02-25 09:10:33
???? ??：布局思路清晰 , 完成的不錯 ! 繼續(xù)加油哦 !