纯css模仿天猫首页

<style>
*{margin:0;padding:0}
li{list-style:none}
a{text-decoration:none}
#wrapper{font: 12px/1.5 tahoma,arial,"\5b8b\4f53";}
div#top-nav{height:40px;background:#f2f2f2;border-bottom:1px solid #e1e1e1;padding:0 60px;color:#999}
div#top-nav nav ul{float:right;width:65%;text-align:center}
div#top-nav nav ul li {display:inline-block;list-style:none;position:relative;}
div#top-nav nav ul li a{margin:0 15px;line-height:40px}
div#top-nav>span{float:left;line-height:40px;}
div#top-nav span>a{padding:0 10px;}
div#top-nav nav ul li.sj:after{position:absolute;top:50%;left:80%;content:"";border-width:5px;border-style:solid;border-color:#888 transparent transparent transparent}

div#top-nav nav ul li ul{display:none; position:absolute;top:40%;left:1%;border:1px solid;padding:10px 10px 0 5px}
div#top-nav nav ul li ul li{width:11em;}
div#top-nav nav ul li ul li a{display:block;}
div#top-nav nav ul li:hover>ul{display:block;border-top:none} 
header{background:#fff;height:130px}
header h1{padding:0 60px;color:red;float:left;width:20%}
header >div{float:right;width:66%;}
header form{border:solid red;width:50%;margin:50px 0 0 ;height:36px;position:relative}
header form input:nth-child(1){width:75%;height:100%;border:0}
header form input:nth-child(2){width:25%;height:100%;font-size:18px;font-weight:700;letter-spacing: 5px;
background:red;position:absolute;top:0;right:0;border:0} 
header nav li{float:left;height:20px;} 
header nav ul {margin-left:-10px;width:60%}

header nav ul li a{margin:0 10px 0;text-decoration:none;}
header nav ul li+li{border-left:1px solid;color:#999}


#main{position:relative;border:1px solid red;height:536px;width:100%}
#main-nav {height:36px;border:1px solid;position:absolute;top:0;right:0;width:100%;background:red;z-index:2;
}
#main-nav a{line-height:36px;color:white;font-size:1.5em;margin:0 15px }
#main-nav div{margin-left:200px;text-align:center;}
#main section >div.item{position:absolute;height:36px;font-size:1.5em;margin-left:60px;
line-height:36px;color:white;z-index:3;}
#main section ul.normal-nav{background-color:rgba(238,238,238,.95);top:36px;position:relative;left:0;
z-index:20;width:180px;height:500px;margin-left:60px;border:1px solid;}

#main section ul li {height:31px;line-height:31px;font-size:14px;color:#111;position:relative}
#main section ul li a{display:inline-block}
#main section ul li:hover{background:#fff}

#ba{position:absolute;z-index:-1;top:36px;left:0;width:100%;height:500px;border:1px solid #523;}
#ba >img{width:100%;height:100%}









footer {margin-bottom:0;border-top:1px solid #666666;background:#fff;position:relative}

#ensure{height:100px;width:90%;margin:20px auto;padding:0}
#ensure p{margin:10px 0;width:24%;height:100px;padding:0 0 0 5px ;margin:0;float:left;text-align:left;font-size:1.52em}


#ensure p span:nth-child(1){font-size:2em;float:left;width:50px;height:50px;border:3px solid red;border-radius:25px;color:red}

#extra{width:90%;border-top:1px solid #bbb;height:200px;padding-top:20px;margin:0 auto;}
#extra ul{height:200px;width:20%;float:left;box-sizing:border-box;}
#extra ul label{font-size:1.5em;}
#extra ul li a{display:block;margin:6px 0 0 0 }

#informations{color:#fff;width：100%;
border-top:1px solid red;background:#000;height:200px;text-align:left;position:absolute;margin:15px 0 0 0}
#informations p{margin-left:60px;padding:10px }

style>

<div id="wrapper">
<div id="top-nav">
<span>喵，欢迎来天猫 <a href="#">请登录a><a href="#">免费注册a>span>
<nav>
<ul>
<li class="sj"><a href="#">我的淘宝a>
<ul><li><a href="#">已买到的宝贝a>li>
<li><a href="#">已卖出的宝贝a>li>ul>
li>
<li><a href="#">我关注的品牌a>li>
<li><a href="#">购物车<span>0span>件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>
nav>
div>

<header>

<h1><a href="#">天猫br>Tmall.coma>h1>

<div>
<form>
<input type="text"/>
<input type="button" value="搜索"/>
form>
<nav>
<ul>
<li><a href="#">t恤男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>
nav>

div>

header>

<div id="main">

<div id="main-nav">
<div>
<a href="#">天猫超市a>
<a href="#">天猫国际a>
<a href="#">天猫会员a>
<a href="#">品牌街a>
<a href="#">电器城a>
<a href="#">喵鲜生a>
<a href="#">医药馆a>
<a href="#">营业厅a>
div>
div>

<section>
<div class="item">商品分类div>
<ul class="normal-nav"> 
<li>
<a href="#">女装a> 
/<a href="#">内衣a> 
li>

<li>
<a href="#">男装a>

/<a href="#">运动户外a> 
li>

<li>
<a href="#">女鞋a>

/<a href="#">男鞋a> / <a href="#">箱包a> 
li>

<li>
<a href="#">化妆品a>

/<a href="#">个人护理a> 
li> 
<li>
<a href="#">腕表a>

/<a href="#">珠宝饰品a> /<a href="#">眼镜a>
li> 
<li>
<a href="#">手机a>

/<a href="#">数码a> /<a href="#">电脑办公a>
li> 

<li>
<a href="#">母婴玩具a> 
li>
<li>
<a href="#">零食a>

/<a href="#">进口食品a> /<a href="#">茶酒a> 
li> 
<li>
<a href="#">生鲜水果a> 
li> 
<li>
<a href="#">大家电a>

/<a href="#">生活电器a> 
li> 
<li>
<a href="#">家具建材a> 
li>
<li>
<a href="#">汽车a>

/<a href="#">配件a> /<a href="#">用品a>
li> 
<li>
<a href="#">家纺a>

/<a href="#">家饰a> /<a href="#">鲜花a>
li> 
<li>
<a href="#">医药保健a> 
li>
<li>
<a href="#">厨具a> 
/<a href="#">收纳a> /<a href="#">宠物a>
li> 
<li>
<a href="#">图书音像a> 
li> 
ul>

section>
<div id="ba"> 
<img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/000.jpg"/>
 

 

 

 

 

 

<footer>

<div id="ensure">
<p><span>优span>品质保证<br><span class="p">品质护航 购物无忧span>p>
<p><span>七span>七天无理由退换<br><span class="p">为您提供售后无忧保障span>p>
<p><span>特span>特色服务体验<br><span class="p">为您呈现不一样的服务span>p>
<p><span>帮span>帮助中心<br><span class="p">您的购物指南span>p>
div>

<div id="extra">

<ul>
<label>购物指南label>
<li><a href="#">免费注册a>li>
<li><a href="#">开通支付宝a>li>
<li><a href="#">支付宝充值a>li>
ul>

<ul>
<label>天猫保障label>
<li><a href="#">发票保障a>li>
<li><a href="#">售后规则a>li>
<li><a href="#">缺货赔付a>li>
ul>

<ul>
<label>支付方式label>
<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>


<ul>
<label>商家服务label>
<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>

<ul>
<label>手机天猫label>
<img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/36.PNG" alt="二维码"/>
ul>
div>

 

<div id="informations">

<p> 
<a href="#">关于天猫a> 
<a href="#" target="_blank" >帮助中心a> 
<a href="#" target="_blank" >开放平台a> 
<a href="#" target="_blank" >诚聘英才a> 
<a href="#" target="_blank" >联系我们a> 
<a href="#" target="_blank" >网站合作a> 
<a href="#" target="_blank" >法律声明及隐私权政策a>
<a href="#" target="_blank" >知识产权a>
<a href="#" target="_blank" >廉正举报a> 
<a href="#">规则意见征集a>
p>

<p class="footer-otherlink"> 
<a href="http://www.alibabagroup.com/cn/global/home" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.34">阿里巴巴集团a>| 
<a href="//www.taobao.com" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.35">淘宝网a> | 
<a href="//www.tmall.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.36">天猫a> | 
<a href="//ju.taobao.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.37">聚划算a> | 
<a href="http://www.aliexpress.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.38">全球速卖通a> | 
<a href="http://www.alibaba.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.39">阿里巴巴国际交易市场a>| 
<a href="//www.1688.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.40">1688a> | 
<a href="//www.alimama.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.41">阿里妈妈a> | 
<a href="//www.fliggy.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.42">飞猪a> | 
<a href="http://www.aliyun.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.43">阿里云计算a> | 
<a href="http://www.yunos.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.44">YunOSa> | 
<a href="http://aliqin.cn/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.45">阿里通信a> | 
<a href="http://www.net.cn/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.46">万网a> | 
<a href="http://www.autonavi.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.47">高德a> | 
<a href="http://www.uc.cn/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.48">UCa> | 
<a href="http://www.umeng.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.49">友盟a> | 
<a href="http://www.xiami.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.50">虾米a> | 
<a href="http://www.alibabaplanet.com" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.51">阿里星球a> | 
<a href="http://www.laiwang.com/" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.52">来往a> | 
<a href="http://www.dingtalk.com/?lwfrom=20150205115110773" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.53">钉钉a> | 
<a href="https://www.alipay.com" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.54">支付宝a>
p>

<p>增值电信业务经营许可证：
<a href="#" >浙B2-20110446a>
网络文化经营许可证：<a href="#">浙网文[2015]0295-065号a>
<a href="#">12318举报a>
<br>
<span >
互联网药品交易服务资格证：<a href="//img.alicdn.com/tps/TB1c4YwOpXXXXcHXXXXXXXXXXXX-3306-2338.jpg" target="_blank" data-spm-anchor-id="875.7931836/B.a2226n1.58">粤c20150002a>
<a href="#">
<img src="https://img.alicdn.com/tps/TB1_qAKKVXXXXXjapXXXXXXXXXX-20-20.png">粤公网安备 44010602001483号
a>
<a href="#">粤ICP备14088652号-2a>
span>
<br>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005a>
<a href="#">浙公网安备 33010002000120号a>
<br> <b>© 2003-2017 TMALL.COM 版权所有b>
p>
div>


footer>

 


div>