时间：2023-07-26 16:06:01 | 来源：网站运营
时间：2023-07-26 16:06:01 来源：网站运营
Web前端开发-小米网站头部导航条制作：视频教程
在线咨询
<div class="top"> <img src="top.png"</div>css部分：.top{ width: 100%; height: 117px;}头部图片就这么简单完成了<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 style="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下面的容代码就不一一介绍了</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 style="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>关键词：导航,小米
