页面小导航demo

摘要：本章节实现的页面导航利用简单的布局，实现两个小米商城导航效果案例1：HTML部分------------------------------------------------------------------------------------------------------------------------------------------------<div class=&q

本章节实现的页面导航

利用简单的布局，实现两个小米商城导航效果

案例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>企业团购</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
老师总结：布局思路清晰 , 完成的不错 ! 继续加油哦 !