摘要：直接附上代码吧，总结理不清思路，做这个案例费了好大力气呢<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘宝</title><link href="css/font-awesome-4.7.0/font-awesome-4.7.
直接附上代码吧，总结理不清思路，做这个案例费了好大力气呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<link href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/case.css">
</head>
<body>
<div>
<div>
<div>
<a href="" style="color:#000;">中国大陆 <i class="fa fa-angle-down"></i>
<ul>
<li>全球</li>
<li>中国大陆</li>
<li>香港</li>
<li>台湾</li>
<li>澳门</li>
<li>韩国</li>
<li>澳大利亚</li>
</ul>
</a>
<a href="" style="color: #FF4400;">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">
我的淘宝 <i class="fa fa-angle-down"></i>
<ul>
<li>已购买的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><i class="fa fa-cart-plus" style="color:#FF4400;"> </i>购物车 <i class="fa fa-angle-down"></i>
<div>
您购物车里还没有任何宝贝。<button>查看我的购物车</button>
</div>
</a>
<a href=""><i class="fa fa-star"></i> 收藏夹 <i class="fa fa-angle-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">商品分类</a>
<span>|</span>
<a href="">卖家中心 <i class="fa fa-angle-down"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
</ul>
</a>
<a href="">联系客服 <i class="fa fa-angle-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href=""><i class="fa fa-navicon" style="color:#FF4400;"></i> 网站导航 <i class="fa fa-angle-down"></i>
<div>
<ul>
<li>主题市场</li>
<li><span>女装</span></li>
<li><span>男装</span></li>
<li><span>内衣</span></li>
<li><span>鞋靴</span></li>
<li><span>箱包</span></li>
<li><span>婴童</span></li>
<li><span>家电</span></li>
<li><span>数码</span></li>
<li><span>女装</span></li>
<li><span>男装</span></li>
<li><span>内衣</span></li>
<li><span>鞋靴</span></li>
<li><span>箱包</span></li>
<li><span>婴童</span></li>
<li><span>家电</span></li>
<li><span>数码</span></li>
<li><span>女装</span></li>
<li><span>男装</span></li>
<li><span>内衣</span></li>
<li><span>鞋靴</span></li>
<li><span>箱包</span></li>
<li><span>婴童</span></li>
<li><span>家电</span></li>
<li><span>数码</span></li>
<li><span>女装</span></li>
<li><span>男装</span></li>
<li><span>内衣</span></li>
<li><span>鞋靴</span></li>
<li><span>箱包</span></li>
<li><span>婴童</span></li>
<li><span>家电</span></li>
<li><span>数码</span></li>
<li><span>教育</span></li>
<li><span>卡券</span></li>
<li><span>本地</span></li>
</ul>
<ul class="header_web_url_3 header_web_url_span_color2">
<li>特色市场</li>
<li><span>iFashion</li>
<li><span>爱逛街</span></li>
<li><span>美妆秀</span></li>
<li><span>全球购</span></li>
<li><span>腔调</span></li>
<li><span>淘女郎</span></li>
<li><span>iFashion</span></li>
<li><span>爱逛街</span></li>
<li><span>美妆秀</span></li>
<li><span>全球购</span></li>
<li><span>腔调</span></li>
<li><span>淘女郎</span></li>
<li><span>iFashion</span></li>
<li><span>爱逛街</span></li>
<li><span>美妆秀</span></li>
<li><span>全球购</span></li>
<li><span>腔调</span></li>
<li><span>淘女郎</span></li>
<li><span>iFashion</span></li>
<li><span>爱逛街</span></li>
<li><span>美妆秀</span></li>
<li><span>全球购</span></li>
<li><span>腔调</span></li>
<li><span>淘女郎</span></li>
<li><span>阿里翻译</span></li>
</ul>
<ul class="header_web_url_3 header_web_url_span_color3">
<li>阿里APP</li>
<li><span>淘宝</span></li>
<li><span>天猫</span></li>
<li><span>支付宝</span></li>
<li><span>聚划算</span></li>
<li><span>飞猪</li>
<li><span>蚂蚁聚宝</span></li>
<li><span>淘宝</span></li>
<li><span>天猫</span></li>
<li><span>支付宝</span></li>
<li><span>聚划算</span></li>
<li><span>飞猪</span></li>
<li><span>蚂蚁聚宝</span></li>
<li><span>淘宝</span></li>
<li><span>天猫</span></li>
<li><span>支付宝</span></li>
<li><span>聚划算</span></li>
<li><span>飞猪</span></li>
<li><span>蚂蚁聚宝</span></li>
<li><span>网商银行</span></li>
<li><span>阿里邮箱</span></li>
<li><span>阿里众包</span></li>
</ul>
<ul class="header_web_url_2 header_web_url_span_color4">
<li>精彩推荐集</li>
<li><span>余额宝</span></li>
<li><span>大牌捡宝</span></li>
<li><span>淘公仔</span></li>
<li><span>浏览器</span></li>
<li><span>余额宝</span></li>
<li><span>大牌捡宝</span></li>
<li><span>淘公仔</span></li>
<li><span>浏览器</span></li>
<li><span>余额宝</span></li>
<li><span>大牌捡宝</span></li>
<li><span>淘公仔</span></li>
</ul>
</div>
</a>
</div>
<div></div>
</div>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
.clear{clear: both;}
.header{width: 100%;background: #F5F5F5;}
.header_content{width: 1192px;margin: 0px auto;line-height: 36px;text-align: center;}
.header_content a{text-decoration: none;color:#6C6C6C;margin-right: 2px;}
.header_content a:hover{color: #FF4400;}
.header_a{display: inline-block;width: 86px;position: relative;}
.header_a:hover{background: #FFF;}
.header_a .header_ul{position: absolute;text-align: left;list-style: none;color: #6C6C6C;display: none;font-size: 12px;}
.header_a .header_ul li{width: 80px;padding-left: 6px;}
.header_a:hover .header_ul{display: block;}
.header_a .header_ul li:hover{background-color: #F5F5F5; }
.header_a .header_ul_2{position: absolute;text-align: left;list-style: none;color: #6C6C6C;display: none;font-size: 12px;max-height: 150px;overflow-y: scroll;}
.header_a .header_ul_2 li{width: 266px;padding-left: 10px;}
.header_a:hover .header_ul_2{display: block;}
.header_a .header_ul_2 li:hover{background-color: #F5F5F5; }
.header_a .cart_info{position: absolute;width: 316px;height: 60px;line-height: 60px;color: #6C6C6C;display: none;}
.header_a .cart_info button{padding: 4px 8px;background-color:#FF4400;border: none;color: #FFF;border-radius: 2px;}
.header_a:hover .cart_info{display: block;}
.header_a .header_web_url{width: 1192px;height:312px;position: absolute;right: 0;display: none;}
.header_a:hover .header_web_url{display:block;}
.header_a .header_web_url ul{width: 296px;border: 0px solid red;float: left;list-style: none;color:#6C6C6C;border-right: 1px solid #ccc;}
.header_a .header_web_url ul:last-child{border:none;}
.header_a .header_web_url ul li{float: left;height: 40px;}
.header_a .header_web_url .header_web_url_4 li:not(.web_url_category_1){width: 70px;}
.header_a .header_web_url .header_web_url_3 li{width: 90px;}
.header_a .header_web_url .header_web_url_2 li:not(.web_url_category_4){width: 120px;text-align: left;padding-left: 20px;}
.header_a .header_web_url .web_url_category_1{width: 282px;text-align: left;color: #FF5500;padding-left:14px;font-size: 16px;font-weight: bold;}
.header_a .header_web_url ul:nth-child(2) .web_url_category_2{width: 282px;text-align: left;color: #A0B959;padding-left:14px;font-size: 16px;font-weight: bold;}
.header_a .header_web_url ul:nth-child(3) .web_url_category_3{width: 282px;text-align: left;color: #DF61AB;padding-left:14px;font-size: 16px;font-weight: bold;}
.header_a .header_web_url .web_url_category_4{width: 282px;text-align: left;color: #52A0E5;padding-left:14px;font-size: 16px;font-weight: bold;}
.header_a .header_web_url .header_web_url_4 span:hover{background-color: #FF5500;padding: 4px 8px;border-radius: 2px;color: #FFF;}
.header_a .header_web_url .header_web_url_span_color2 span:hover{background-color: #A0B959;padding: 4px 8px;border-radius: 2px;color: #FFF;}
.header_a .header_web_url .header_web_url_span_color3 span:hover{background-color: #DF61AB;padding: 4px 8px;border-radius: 2px;color: #FFF;}
.header_a .header_web_url .header_web_url_span_color4 span:hover{background-color: #52A0E5;padding: 4px 8px;border-radius: 2px;color: #FFF;}
.header_left{height: 36px;float: left;}
.header_left a{font-size:13px;}
.header_right{height:36px;float: right;}
.header_right a{font-size:14px;}
.fenge{font-size:13px;color: #ccc;margin-left: 6px;}
批改老师：灭绝师太批改时间：2018-11-11 13:49:20
老师总结：后面会越来越得心应手的，前端没啥捷径，多写写就可以啦！不懂的及时反馈
