本课程中所有的导航布局
基本思路:
首先将页面头部的导航条样式，其中class名为header_left；再将下拉菜单的小米手机下拉菜单做出，之后的上方下拉菜单处可以借鉴相同的代码部分，其中class名为contentMenu_ul_li1；再做出侧边栏竖导航，同样可以先做手机电话卡第一个部分，再在下面使用相同class名contentPic_l_Phone，使用图片时再改相关的路径，做出大致样式；最后一部分导航条是页面中的小导航条，思路也是做出一部分再之后直接用做出的代码即可。
注意事项：
做页面的导航条时，很多部分都是类似的，可以重复利用，使做出页面时能更加简便。
引用图片路径时，要注意图片的格式是jpg还是png，这样页面才能加载出图片。
在做手机部分后面的导航部分时，现在引用i标签将图标引用进来，再在外面套置一span标签，将其改变成块级元素，并通过css设置多种样式使之产生圆形阴影样式，并通过伪属性使其产生相关效果。
完整代码：
html部分:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城</title> <link rel="shortcut icon" type="images/x-icon" href="static/images/footlogo.png"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="menu"> <ul class="header_left"> <li><a href="#">小米商城</a><span>|</span></li> <li><a href="#">MIUI</a><span>|</span></li> <li><a href="#">IOT</a><span>|</span></li> <li><a href="#">云服务</a><span>|</span></li> <li><a href="#">小爱分享平台</a><span>|</span></li> <li><a href="#">金融</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">企业服务</a><span>|</span></li> <li><a href="#">SelectRegion</a></li> </ul> <div class="header_right"> <ul> <li><a href="#">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="shop/order.html">我的订单</a></li> <li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a> <div>购物车中还没有商品，赶紧选购吧！</div> </li> </ul> </div> </div> </div> <!-- 主体部分 --> <div class="contents"> <div class="content"> <div class="contentMenu"> <div class="contentMenu_pic"> <img src="static/images/footlogo.png" style="margin: 5px 0px;margin-right:10px;"> <img src="static/images/logoAD.gif"> </div> <ul class="contentMenu_ul"> <li class="contentMenu_ul_li1">小米手机 <div class="MI_phone"> <div class="MI_phoneDiv"> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> </div> </div> </li> <li>红米</li> <li>电视</li> <li>笔记本</li> <li>盒子</li> <li class="contentMenu_ul_li1">新品 <div class="MI_phone"> <div class="MI_phoneDiv"> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> <span></span> <div class="MI_phoneDivNumber1"> <div class="MI_phone_NewProduct">新品</div> <div class="MI_phone_NewProduct_Shop"> <img src="static/images/phone/phone1.png"> <br> <a href="#">小米9</a> <br> <a href="#" style="color: #ff6700;">2999元起</a> </div> </div> </div> </div> </li> <li>路由器</li> <li>智能硬件</li> <li>服务</li> <li>社区</li> </ul> <div class="contentMenu_form"> <form> <input type="text" name=""> <div class="contentMenu_form_a"> <a href="">电视新品</a> <a href="">618预热</a></div> <div class="contentMenu_form_button"><i class="fa fa-search"></i></div> </form> </div> </div> <div class="clear"></div> <div class="contentPic"> <div class="contentPic_l"> <ul class="content_pic_ul"> <li><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/phone/phone1.png"><a href="#">小米MIX 2S</a></div> <div><img src="static/images/phone/phone2.png"><a href="#">红米6A</a></div> <div><img src="static/images/phone/phone12.jpg"><a href="#">米粉卡 日租卡</a></div> <div><img src="static/images/phone/phone3.png"><a href="#">小米8</a></div> <div><img src="static/images/phone/phone4.jpg"><a href="#">小米6X</a></div> <div><img src="static/images/phone/phone15.jpg"><a href="#">小米移动 电话卡</a></div> <div><img src="static/images/phone/phone5.jpg"><a href="#">红米Note 4</a></div> <div><img src="static/images/phone/phone7.png"><a href="#">黑鲨游戏手机</a></div> <div><img src="static/images/phone/phone18.png"><a href="#">手机上门维修</a></div> <div><img src="static/images/phone/phone8.png"><a href="#">红米Note 5</a></div> <div><img src="static/images/phone/phone13.png"><a href="#">小米9</a></div> <div><img src="static/images/phone/phone6.jpg"><a href="#">移动4G专区</a></div> </div> </li> <li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/tv/tv1.jpg"><a href="#">小米电视4A 65英寸</a></div> <div><img src="static/images/tv/tv2.jpg"><a href="#">小米电视4X 55英寸</a></div> <div><img src="static/images/tv/tv3.jpg"><a href="#">小米电视4S 55英寸</a></div> <div><img src="static/images/tv/tv4.jpg"><a href="#">小米电视4C 32英寸</a></div> <div><img src="static/images/tv/tv5.jpg"><a href="#">小米电视4 55英寸</a></div> <div><img src="static/images/tv/tv6.jpg"><a href="#">小米电视4S 65英寸</a></div> <div><img src="static/images/tv/tv7.jpg"><a href="#">小米电视4C 43英寸</a></div> <div><img src="static/images/tv/tv8.jpg"><a href="#">小米电视4C 50英寸</a></div> <div><img src="static/images/tv/tv9.jpg"><a href="#">小米电视4S 32英寸</a></div> <div><img src="static/images/tv/tv10.png"><a href="#">小米电视4S 65英寸PRO</a></div> <div><img src="static/images/tv/tv11.jpg"><a href="#">小米电视4S 50英寸</a></div> <div><img src="static/images/tv/tv12.jpg"><a href="#">小米盒子</a></div> </div> </li> <li><a href="">笔记本 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/pc/pc4.jpg"><a href="#">小米笔记本 15.6''</a></div> <div><img src="static/images/pc/pc7.jpg"><a href="#">小米笔记本 13.3''</a></div> <div><img src="static/images/pc/pc6.png"><a href="#">鼠标/鼠标垫</a></div> <div><img src="static/images/pc/pc9.jpg"><a href="#">小米笔记本 12.5''</a></div> <div><img src="static/images/pc/pc10.jpg"><a href="#">小米游戏本</a></div> <div><img src="static/images/pc/pc5.jpg"><a href="#">转接器</a></div> <div><img src="static/images/pc/pc7.jpg"><a href="#">小米笔记本 15.6''</a></div> <div><img src="static/images/pc/pc11.jpg"><a href="#">小米笔记本内胆包</a></div> <div><img src="static/images/pc/pc2.jpg"><a href="#">小米充电头</a></div> </div> </li> <li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/machine/machine8.jpg"><a href="#">剃须刀</a></div> <div><img src="static/images/machine/machine3.jpg"><a href="#">扫地机器人</a></div> <div><img src="static/images/machine/machine4.jpg"><a href="#">净水器</a></div> <div><img src="static/images/machine/machine12.jpg"><a href="#">净水器滤芯</a></div> <div><img src="static/images/machine/machine5.jpg"><a href="#">空气净化器</a></div> <div><img src="static/images/machine/machine7.jpg"><a href="#">扫地机配件</a></div> <div><img src="static/images/machine/machine10.jpg"><a href="#">电水壶</a></div> <div><img src="static/images/machine/machine11.jpg"><a href="#">电饭煲</a></div> <div><img src="static/images/machine/machine15.jpg"><a href="#">电磁炉</a></div> </div> </li> <li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/healthy/healthy3.jpg"><a href="#">小米手环</a></div> <div><img src="static/images/healthy/healthy1.jpg"><a href="#">剃须刀</a></div> <div><img src="static/images/healthy/healthy4.jpg"><a href="#">小米摄像头</a></div> <div><img src="static/images/healthy/healthy5.jpg"><a href="#">小米手表</a></div> <div><img src="static/images/healthy/healthy13.jpg"><a href="#">体重秤</a></div> <div><img src="static/images/healthy/healthy16.jpg"><a href="#">牙刷</a></div> <div><img src="static/images/healthy/healthy6.jpg"><a href="#">洗手机</a></div> <div><img src="static/images/healthy/healthy15.jpg"><a href="#">小米监控摄像头</a></div> </div> </li> <li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/child/child1.jpg"><a href="#">儿童滑板车</a></div> <div><img src="static/images/child/child2.jpg"><a href="#">遥控电动</a></div> <div><img src="static/images/child/child6.jpg"><a href="#">儿童手表</a></div> <div><img src="static/images/child/child10.jpg"><a href="#">益智积木</a></div> <div><img src="static/images/child/child13.jpg"><a href="#">早教启智</a></div> <div><img src="static/images/child/child12.jpg"><a href="#">儿童单车</a></div> <div><img src="static/images/child/child16.jpg"><a href="#">儿童玩具</a></div> <div><img src="static/images/child/child18.jpg"><a href="#">小米手环</a></div> <div><img src="static/images/child/child17.jpg"><a href="#">儿童相机</a></div> </div> </li> <li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/router/router1.jpg"><a href="#">路由器</a></div> <div><img src="static/images/router/router2.jpg"><a href="#">智能家庭</a></div> <div><img src="static/images/router/router6.jpg"><a href="#">手机壳</a></div> <div><img src="static/images/router/router9.jpg"><a href="#">智能门锁</a></div> <div><img src="static/images/router/router18.jpg"><a href="#">打印机</a></div> </div> </li> <li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/battery/battery1.jpg"><a href="#">移动电源</a></div> <div><img src="static/images/battery/battery2.jpg"><a href="#">电池</a></div> <div><img src="static/images/battery/battery3.jpg"><a href="#">接线板</a></div> <div><img src="static/images/battery/battery4.jpg"><a href="#">充电头</a></div> <div><img src="static/images/battery/battery5.jpg"><a href="#">充电器</a></div> <div><img src="static/images/battery/battery8.jpg"><a href="#">车充</a></div> <div><img src="static/images/battery/battery10.jpg"><a href="#">自拍杆</a></div> <div><img src="static/images/battery/battery11.jpg"><a href="#">手机壳</a></div> <div><img src="static/images/battery/battery14.jpg"><a href="#">其他配件</a></div> </div> </li> <li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/earphone/earphone1.jpg"><a href="#">蓝牙耳机</a></div> <div><img src="static/images/earphone/earphone2.jpg"><a href="#">入耳式耳机</a></div> <div><img src="static/images/earphone/earphone3.jpg"><a href="#">转换器</a></div> <div><img src="static/images/earphone/earphone5.jpg"><a href="#">k歌耳机</a></div> <div><img src="static/images/earphone/earphone7.jpg"><a href="#">头戴耳机</a></div> <div><img src="static/images/earphone/earphone11.jpg"><a href="#">品牌耳机</a></div> <div><img src="static/images/earphone/earphone9.jpg"><a href="#">线控耳机</a></div> <div><img src="static/images/earphone/earphone15.jpg"><a href="#">小米AL音箱</a></div> <div><img src="static/images/earphone/earphone16.jpg"><a href="#">蓝牙音箱</a></div> </div> </li> <li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/life/life1.jpg"><a href="#">旅行箱</a></div> <div><img src="static/images/life/life2.jpg"><a href="#">服饰</a></div> <div><img src="static/images/life/life4.png"><a href="#">沙发</a></div> <div><img src="static/images/life/life5.jpg"><a href="#">双肩包</a></div> <div><img src="static/images/life/life6.jpg"><a href="#">运动鞋</a></div> <div><img src="static/images/life/life7.jpg"><a href="#">伞</a></div> <div><img src="static/images/life/life8.png"><a href="#">枕头</a></div> <div><img src="static/images/life/life11.jpg"><a href="#">螺丝刀</a></div> <div><img src="static/images/life/life15.jpg"><a href="#">米兔</a></div> </div> </li> </ul> </div> <div class="contentPic_r"></div> </div> <div class="clear"></div> <div class="contentPic_ul"> <div class="contentPic_ul_1"> <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> <div class="contentPic_ul_0" style="background:url(static/images/midAD1.jpg);margin-right:13px;"></div> <div class="contentPic_ul_0" style="background:url(static/images/midAD2.jpg);margin-right:13px;"></div> <div class="contentPic_ul_0" style="background:url(static/images/midAD3.jpg);"></div> </div> <!-- 小米闪购 --> <div class="contentShop"> <h2>小米闪购</h2> <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div> <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid orange;"></div> <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid green;"></div> <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid blue;"></div> <div class="contentShop_1" style="border-top:1px solid purple;"></div> </div> <div class="clear"></div> <div class="contentImg" style="background:url(static/images/longAD1.jpg)"></div> <div class="contentUL"> <h2>手机</h2> <div class="Tab"> 查看全部 <span><i class="fa fa-angle-right"></i></span> </div> </div> <div class="clear"></div> <div class="contentPhone"> <div class="contentPhone_l"></div> <div class="contentPhone_r"> <div style="margin-right:12.7px;"></div> <div style="margin-right:12.7px;"></div> <div style="margin-right:12.7px;"></div> <div></div> <div style="margin-right:12.7px;margin-top:12.7px;"></div> <div style="margin-right:12.7px;margin-top:12.7px;"></div> <div style="margin-right:12.7px;margin-top:12.7px;"></div> <div style="margin-top:12.7px"></div> </div> </div> <div class="contentImg" style="background:url(static/images/longAD2.jpg);"></div> <div class="contentUL"><h2>家电</h2> <div class="tab"> <ul> <li>热门</li> <li>电视影音</li> <li>电脑</li> <li>家居</li> </ul> </div> </div> <div class="contentPhone"> <div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/家电AD1.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1"></div> <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/家电AD2.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_2" style="margin-top:12.7px;"> <div class="contentPhone_1_t"></div> <div class="contentPhone_1_b"></div> </div> </div> <div class="contentImg" style="background:url(static/images/longAD3.jpg);"></div> <div class="contentUL"><h2>智能</h2> <div class="tab"> <ul> <li>热门</li> <li>出行</li> <li>健康</li> <li>酷玩</li> <li>路由器</li> </ul> </div> </div> <div class="contentPhone"> <div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/智能AD1.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1"></div> <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/智能AD2.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_2" style="margin-top:12.7px;"> <div class="contentPhone_1_t"></div> <div class="contentPhone_1_b"></div> </div> </div> <div class="contentImg" style="background:url(static/images/longAD4.jpg);"></div> <div class="contentUL"><h2>搭配</h2> <div class="tab"> <ul> <li>热门</li> <li>耳机音箱</li> <li>电源</li> <li>电池储存卡</li> </ul> </div> </div> <div class="contentPhone"> <div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/搭配AD1.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1"></div> <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/搭配AD2.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="contentPhone_2" style="margin-top:12.7px;"> <div class="contentPhone_1_t"></div> <div class="contentPhone_1_b"></div> </div> </div> <div class="contentImg" style="background:url(static/images/longAD5.jpg);"></div> <div class="contentUL"><h2>配件</h2> <div class="tab"> <ul> <li>热门</li> <li>保护套</li> <li>贴膜</li> <li>其他配件</li> </ul> </div> </div> <div class="contentPhone"> <div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/配件AD1.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1" style="margin-right:12.7px;"></div> <div class="contentPhone_1"></div> <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/配件AD2.jpg)"></div> <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div> <div class="c