Web前端開發-小米網站頭部導航條製作

03-06

視頻教程

一個網站的頁面如何開始製作：

第一步

整個網站的布局就是這下面的一張圖

先分析整個頁面的布局，布局分為頭部、中間體和底部三個主要的部分

頭部

首先小米網站的頭部就是一張橫屏的圖片製作起來很簡單

頭部製作如下視頻：

html代碼：

<div class="top"> <img src="top.png"</div>

css部分：

.top{ width: 100%; height: 117px;}

頭部圖片就這麼簡單完成了

https://www.zhihu.com/video/914907028072308736

接下來我們必須做頭部的導航條製作:頭部導航條分為左右導航條

頭部導航條的製作

右側導航條製作

這塊可以分為左右導航條，最難的一部分可能就是右側導航條的購物車圖標的製作和功能的實現

d代碼部分：

html部分

<div class="menubg"> <div class="menu_content"> <div class="menu_left"> <ul> <li>小米商城</li> <li>MIUI</li> <li>米聊</li> <li>遊戲</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li class="menu_left_last">Select Region</li> </ul> </div> <div class="menu_right"> <ul> <li><a href="http://www.51rgb.com">登錄</a><span class="line">|</span></li> <li><a href="http://www.51rgb.com">註冊</a><span class="line">|</span></li> <li><a href="http://www.51rgb.com">消息通知</a></li> </ul> <div class="gouwuche"> <a class="gouwuche_a" href="http://www.51rgb.com"> <img stylex="width: 18px; vertical-align: middle; margin-right: 2px;" src="gouwuche-hui.png"> <span>購物車</span></a> <div class="gouwuche_con">51rgb講web前端課程</div> </div> </div> </div> </div>

css部分：

.menu_content{margin: 0 auto; width: 1200px; height: 100%;}

.menu_left ul li{float: left; color:#8C8C8C; font-size: 12px; padding:0 5px; border-right:1px solid #3F3F3F;}

.menu_left{padding-top: 10px; float: left;} .menu_right{float: right;} .menu_right ul li{float: left; color:#8C8C8C; font-size: 12px; padding:0 5px; line-height: 40px;} .menu_left_last{border-right:0px!important;} .line{margin-left: 10px; color: #3F3F3F;} .menu_right ul li a{text-decoration: none; color:#8C8C8C; } .menu_right ul li a:hover{color: #FFFFFF;} .menu_right ul{float: left;} .gouwuche{float: left; height: 40px; color: #8C8C8C; font-size: 12px; line-height: 40px; width: 100px; text-align: center; background-color:c; margin-left: 20px; position: relative;} .gouwuchesp{color:#ea990b!important;} .gouwuchebg{background-color: #fff;} .gouwuchecontent{display:block!important} .gouwuche_con{ width: 180px; height: 70px;background-color:#fff; box-shadow: 0px 0px 5px #ccc; margin-left: -80px; position: relative; z-index: 5; display: none; line-height: 70px; text-align: center;} .gouwuche_a{ width: 100px; height: 40px;display: block;position: relative;z-index: 10;} .gouwuche a{color:#8C8C8C; text-decoration: none; background-color: #424242;} .contentbg{ width:1200px; height: 80px; margin: 0 auto;} .content_left{float: left; width: 55px; height:68px; padding-top: 12px;} .content_mi

下面的容代碼就不一一介紹了

三、購物車製作

購物車製作01

購物車製作02

購物車製作03

四、整個網站的主體內容製作

小米網站頭主體內容製作01

小米網站主體內容製作02

整個內容html代碼部分：

</head><body><div class="all"> <div class="top"> <img src="top.png"> </div> <div class="menubg"> <div class="menu_content"> <div class="menu_left"> <ul> <li>小米商城</li> <li>MIUI</li> <li>米聊</li> <li>遊戲</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li>小米商城</li> <li class="menu_left_last">Select Region</li> </ul> </div> <div class="menu_right"> <ul> <li><a href="http://www.51rgb.com">登錄</a><span class="line">|</span></li> <li><a href="http://www.51rgb.com">註冊</a><span class="line">|</span></li> <li><a href="http://www.51rgb.com">消息通知</a></li> </ul> <div class="gouwuche"> <a class="gouwuche_a" href="http://www.51rgb.com"> <img stylex="width: 18px; vertical-align: middle; margin-right: 2px;" src="gouwuche-hui.png"> <span>購物車</span></a> <div class="gouwuche_con">51rgb講web前端課程</div> </div> </div> </div> </div> <div class="contentbg"> <div class="content"> <div class="content_left"> <img src="logo.png"> </div> <div class="content_middle"> <ul> <li><a href="#">小米手機</a></li> <li><a href="#">萬晨曦</a></li> <li><a href="#">小米手機</a></li> <li><a href="#">小米手機</a></li> <li><a href="#">小米手機</a></li> <li><a href="#">小米手機</a></li> <li><a href="#">小米手機</a></li> </ul> </div> <div class="content_right"> <input class="content_right_inp" type="text"/> <div class="fangdajing"> <img class="fangdajing_pic" src="fangdajing-hui.png"> </div> <a class="content_right_a1" href="#">月影老師</a><a class="content_right_a2" href="#">萬晨曦老師</a> <div class="content_right_inp_con"> <ul> <li>51rgb</li> </ul> </div> </div> </div> </div> <div class="content_middle_con"> <ul class="middle_ul_1"> <li> <div class="middle_ul_1_top">51rgb</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">51rgb</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">51rgb</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">51rgb</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">51rgb</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> </ul> <ul class="middle_ul_1"> <li> <div class="middle_ul_1_top">新品</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">新品</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">新品</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">新品</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">新品</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> </ul> <ul class="middle_ul_1"> <li> <div class="middle_ul_1_top">月影老師</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">月影老師</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">月影老師</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">月影老師</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> <li> <div class="middle_ul_1_top">月影老師</div> <div class="middle_ul_1_middle"> <img class="middle_ul_1_middle_img" src="note2320x220.png"> <span class="middle_ul_1_middle_sp"></span> </div> <div class="middle_ul_1_bottom"> <p>小米MIX 2</p> <p>3299起</p> </div> </li> </ul> </div> <div class="contont2bg"> <div class="contont2"> <ul class="contont2_nav"> <li><span class="contont2_nav_sp1">月影老師首席</span><span class="contont2_nav_sp2">></span> <div class="contont2_nav_con contont2_nav_con_1">12345</div> </li> <li><span class="contont2_nav_sp1">萬晨曦老師</span><span class="contont2_nav_sp2">></span> <div class="contont2_nav_con">678910</div> </li> <li><span class="contont2_nav_sp1">web前端開發</span><span class="contont2_nav_sp2">></span> <div class="contont2_nav_con">555555555</div> </li> <li><span class="contont2_nav_sp1">月薪至少過萬</span><span class="contont2_nav_sp2">></span></li> <li><span class="contont2_nav_sp1">月影老師首席</span><span class="contont2_nav_sp2">></span></li> <li><span class="contont2_nav_sp1">萬晨曦老師</span><span class="contont2_nav_sp2">></span></li> <li><span class="contont2_nav_sp1">web前端開發</span><span class="contont2_nav_sp2">></span></li> <li><span class="contont2_nav_sp1">月薪至少過萬111</span><span class="contont2_nav_sp2">></span></li> </ul> </div> </div> <div class="chanpinbg"> <div class="chanpin"> <ul> <li class="chanpin_1"> <ul> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> <p class="chanpin_1_li_left_p3"></p> </div> <div class="chanpin_1_li_right"></div> </li> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> <p class="chanpin_1_li_left_p3"></p> </div> <div class="chanpin_1_li_right"></div> </li> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> <p class="chanpin_1_li_left_p3"></p> </div> </li> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> </div> <div class="chanpin_1_li_right"></div> </li> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> </div> <div class="chanpin_1_li_right"></div> </li> <li class="chanpin_1_li"> <div class="chanpin_1_li_left"> <p class="chanpin_1_li_left_p1"><img src="gouwuche-hui.png"></p> <p class="chanpin_1_li_left_p2">選購手機</p> </div> </li> </ul> </li> <li class="chanpin_2 chanpin_2_2"> <img src="chanpin-pic.png"> </li> <li class="chanpin_2"> <img src="chanpin-pic.png"> </li> <li class="chanpin_2"> <img src="chanpin-pic.png"> </li> </ul> </div> </div></div>