abstract： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝导航</title> <link rel="stylesheet" href="css/style05.css"> <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <!-- 页面显示内容开始 --> <div class="content"> <!-- 1.号导航条开始 --> <!-- 1号导航条位置居中，尺寸大小设置 --> <div class="menu"> <!-- 1号导航条左边，位置靠左，尺寸大小，每个列表项间距设置，字体居中 --> <ul class="mbl"> <li class="l gj" >中国大陆 <i class="fa fa-angle-down";></i> <!-- 下拉菜单 --> <div class="gjb"> <div >英国</div> <div >英国</div> <div >英国</div> <div >英国</div> <div >英国</div> <div >英国</div> </div> </li> <li class="l"><a href="" style="color:#F72900;">亲，请登录</a></li> <li class="l"><a href="">免费注册</a></li> <li class="l"><a href="">手机逛淘宝</a></li> </ul> <!-- 1号导航条右边，位置靠右，尺寸大小，每个列表项间距设置，字体居中 --> <ul class="mbr r"> <li class="l tb"><a href="">我的淘宝 <i class="fa fa-angle-down"></i></a> <div class="wdtb"> <div >已买到的宝贝</div> <div >我的足迹</div> </div> </li> <li class="l"><a href=""><span class="fa fa-cart-plus" style="color:#F72900;"></span>购物车<i class="fa fa-angle-down"></i></a></li> <li class="l sc"><a href=""><span class="fa fa-star"></span>收藏夹<i class="fa fa-angle-down"></i></a> <div class="scj"> <div >收藏的宝贝</div> <div >收藏的店铺</div> </div> </li> <li class="l"><a href="">商品分类<i class="fa fa-angle-down"></i></a></li> <li class="l mjz"><a href="">卖家中心<i class="fa fa-angle-down"></i></a> <div class="mjzx"> <div>免费开店</div> <div>已卖出的宝贝</div> <div>出售中的宝贝</div> <div>卖家服务市场</div> <div>卖家培训中心</div> <div>体检中心</div> <div>问商友</div> </div> </li> <li class="l kf"><a href="">联系客服<i class="fa fa-angle-down"></i></a> <div class="lxkf"> <a class="aa" href="">消费者客服</a> <a class="aa" href="">卖家客服</a> </div> </li> <li class="l dh"><a href=""><span class="fa fa-reorder"></span>网址导航<i class="fa fa-angle-down";></i></a> <div class="wzdh"> <a href="">主题市场</a> <a href="">特色市场</a> <a href="">阿里市场</a> <a href="">精彩推荐</a> </div> </li> </ul> </div> </div> </body> </html>
*{margin: 0px;padding-bottom: 0px;} /* 清除所有边距 */
a{text-decoration: none; color:#6C6C6C;font-size: 13px;}/* 清除a标签的样式 */
.l{float: left;}/* 左浮动 */
.r{float: right;}/* 右浮动 */
.clear{clear: both;}/* 清除浮动 */
ul li{list-style: none;}/* 清除列表项前面的黑点 */
/* <!-- 1号导航条背景，尺寸大小设置 --> */
.content{width:100%;background: #f5f5f5;}
/* <!-- 1号导航条位置居中，尺寸大小设置 --> */
.menu{width: 1200px;height:40px;margin:0px auto;}
/* 1号导航条左边，每个列表项间距设置，字体居中 。*/
.mbl li{margin-right: 10px;line-height: 40px;}
.mbl li a:hover {color:#F72900; }
.gj{color:#6C6C6C;width: 90px;height: 40px;font-size: 13px;text-align: center; position: relative;}
.gjb{display: none;width: 270px;height: 300px;position: absolute;border:1px solid #f5f5f5;border-top:none; }
.gjb div{display: inline-block;width: 100%; line-height: 25px;color:#6C6C6C;text-align: left; left:0px;}
.gj:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom:none;}
.gj:hover .gjb{color:#6C6C6C;display: block;}
.gjb div:hover{background:#f5f5f5;font-size: 13px;color:#6C6C6C;}
/* 1号导航条右边，每个列表项间距设置，字体居中 。*/
.mbr li{margin-right: 10px;line-height: 40px;}
.mbr li a:hover {color:#F72900; }
.mbr li a i{margin-left: 5px;}
.mbr li a span{margin-right: 5px;}
/* 我的淘宝下拉框 */
.tb{position: relative;width: 80px;}
.wdtb{display: none;width: 80px;height: 50px;border: 1px solid #f5f5f5 ;
border-top: none;position: absolute;}
.wdtb div{width: 80px;height: 20px;line-height: 20px;font-size: 13px;padding: 1px;color: #6C6C6C;}
.tb:hover .wdtb{display: block;background: #ffff;}
.tb:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.wdtb div:hover{background:#f5f5f5;}
/* 收藏夹下拉框 */
.sc{position: relative;width: 80px;}
.scj{display: none;width: 80px;height: 70px;position: absolute;padding:5px 0px;
border:1px solid #f5f5f5;border-top: none;}
.scj div{height: 20px;line-height: 20px;font-size: 13px;text-align: center;padding: 5px;color: #6C6C6C;}
.sc:hover .scj{display: block;}
.sc:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.scj div:hover{background: #f5f5f5;}
/* 卖家中心下拉框 */
.mjz{position: relative;width: 80px;}
.mjzx{display: none;width: 80px;height: 70px;position: absolute;padding:5px 2px;
border:1px solid #f5f5f5;border-top: none;}
.mjzx div{height: 20px;line-height: 20px;font-size: 13px;color: #6C6C6C;}
.mjz:hover .mjzx{display: block;}
.mjz:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.mjzx div:hover{background: #f5f5f5;}
/* 联系客服下拉框 */
.kf{position: relative;width: 80px;}
.lxkf{display: none;width: 80px;height: 70px; position: absolute;border:1px solid #f5f5f5;border-top: none;
padding: 2px 0px;}
.lxkf a{display: block; height: 20px;line-height: 20px;font-size: 13px;padding: 2px 0px;}
.kf:hover .lxkf{display: block;}
.kf:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.lxkf .aa:hover{background: #f5f5f5;color: #6C6C6C;}
/* 网址导航下拉框 */
.dh{position: relative;}
.wzdh{display: none;width: 1200px;height: 300px;position: absolute;right: 0px;
border: 1px solid #f5f5f5;border-top: none;}
.wzdh a{display: block; width: 298px;height:299px;border: 1px solid#f5f5f5 ;
border-top: none;float: left;text-align: center;}
.dh:hover .wzdh{display: block;}
.dh:hover{background: #ffff;border: 1px solid #f5f5f5;border-bottom: none;}
Correcting teacher：天蓬老师Correction time：2019-02-02 11:58:15
Teacher's summary：任何效果, 一定要搞清原理, 了解关键代码是什么, 先写对, 再求好, 例如本例, 就是考察的绝对定位, 了解了原理, 就好办了,对不对?