摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝下拉菜单练习</title> <lin
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝下拉菜单练习</title> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <style> body{width: 100%; height: 100%; font:12px "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif;} *{margin:0px; padding: 0px; } ul li{list-style: none; display: list-item; } .top_content{height:35px; width:1920px; background: #F5F5F5; color: #6c6c6c;} .top_left{ height: 33px; float: left; margin-left: 350px;} .top_right{ height: 33px; float: right; margin-right: 350px;} .top_left_nav,.top_right_nav{list-style: none; line-height: 35px;} .top_left_nav li{float: left; } .top_right_nav li{float: left; } .nav_01{ padding: 0px 5px; text-align: center; } .pl_login,.nav_01_shop,.nav_01_dh{color: #ff5000; } .nav_01_favorites{color:#9c9c9c; } .phone_tb{margin-left: 20px;} .pl_login{margin-left: 10px;} .nav_01_d,.nav_shop_class_co,.nav_li_kef,.nav_li_sef,.web_site_nav{display: none;} .nav_01_w{width: 100px;} .top_right ul li{border:1px solid transparent;} .nav_co ul li{clear: both; 28px;line-height: 28px;padding:0 5px;: cursor: pointer;} .region{width:290px; height: 290px; position: absolute; border: 1px solid #eee; margin-top: -1px; display: none; } .region ul li{ width:290px; line-height: 28px; padding:0px 5px;cursor: pointer; } .nav_li_region:hover .nav_01_region{background: #fff; bordert: 1px solid #eee;} .nav_li_region:hover .region{display: block;} .nav_01_w:hover{border: 1px solid #eee;background: #fff;} .nav_01_w:hover .nav_co{position: absolute;border: 1px solid #eee; margin-left: -1px; display: block;padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;} .nav_shop_class:hover{border: 1px solid #eee;background: #fff;} .nav_shop_class:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;} .nav_shop_class:hover{border: 1px solid #eee;background: #fff;} .nav_shop_class:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;} .nav_li_k:hover{border: 1px solid #eee;background: #fff;} .nav_li_k:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;} .nav_li_se:hover{border: 1px solid #eee;background: #fff;} .nav_li_se:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;} .web_site_nav{position:fixed;; left:350px;z-index: 100001;width:1220px;height:300px;border: 1px solid #eee;} .web_site_nav div{float: left;width: 305px; } .site-nav-sitemap-mod{ height:38px; width: 305px; } .site-nav-sitemap-mod h4{margin-left:20px; line-height: 38px; font-size: 16px;} .site-nav-sitemap-mod-bd{border-left:1px solid #eee;border-right:1px solid #eee; } .site-nav-sitemap-mod-bd ul li{float: left; width: 62px; padding: 0 5px; display: inline-block; text-align: center;} .mod_title_01{color: red;} .mod_title_02{color: #9fb838;} .mod_title_03{color: #d75696;} .mod_title_04{color: #2e9fdb;} .web_site_nav_w:hover .web_site_nav{display: block;} .web_site_nav_w:hover{border: 1px solid #eee; background: #fff;} } </style> </head> <body> <div> <div> <ul> <li> <div class="nav_01 nav_01_region"> <span>中国大陆</span> <i class="fa fa-angle-down"></i> </div> <div> <ul visibility="hidden"> <li>中国</li> <li>美国</li> </ul> </div> </li> <li> <div> <span>亲,请登陆</span> <span>免费注册</span> </div> </li> <li> <div > <span >手机逛淘宝</span> </div> </li> </ul> </div> <div> <ul> <li> <div class="nav_01 "> <span>我的淘宝</span> <i class="fa fa-angle-down"></i> </div> <div class="nav_01_d nav_co" > <ul > <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </div> </li> <li> <div> <i class="fa fa-shopping-cart nav_01_shop fa-1x"></i> <span>购物车</span> <i class="fa fa-angle-down"></i> </div> </li> <li> <div> <span>收藏夹</span> <i class="fa fa-angle-down"></i> </div> <div class="nav_shop_class_co nav_co" > <ul > <li>收藏的宝贝</li> <li>收藏的店铺</li> </ul> </div> </li> <li> <div> <i class="fa fa-star nav_01_favorites"></i> <span>商品分类</span> <i class="fa fa-angle-down"></i> </div> </li> <li> <div> <span>卖家中心</span> <i class="fa fa-angle-down"></i> </div> <div class="nav_li_sef nav_co" > <ul > <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体检中心</li> <li>问商友</li> </ul> </div> </li> <li> <div> <span>联系客服</span> <i class="fa fa-angle-down"></i> </div> <div class="nav_li_kef nav_co" > <ul > <li>消费者客服</li> <li>卖家客服</li> </ul> </div> </li> <li> <div> <i class="fa fa-bars nav_01_dh "></i> <span>网址导航</span> <i class="fa fa-angle-down"></i> </div > <div> <div> <div><h4>主题市场</h4></div> <div> <ul> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> </ul> </div> </div> <div> <div><h4>特色市场</h4></div> <div> <ul> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> </ul> </div> </div> <div> <div><h4>阿里APP</h4></div> <div> <ul> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> </ul> </div> </div> <div> <div><h4>精彩推荐集</h4></div> <div> <ul> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> <li>男装</li> </ul> </div> </div> </div> </li> </ul> </div> </div> </body> </html>
批改老师:灭绝师太批改时间:2019-01-04 09:13:10
老师总结:布局还可以简化,完成的不错!下次交作业可以附上作业完成图片!