• 纯css模仿天猫首页


    <style>
    *{margin:0;padding:0}
    li{list-style:none}
    a{text-decoration:none}
    #wrapper{font: 12px/1.5 tahoma,arial,"5b8b4f53";}
    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>0</span></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.com</a></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">1688</a> | 
    <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">YunOS</a> | 
    <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">UC</a> | 
    <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-20110446</a>
    网络文化经营许可证:<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">粤c20150002</a>
    <a href="#">
    <img src="https://img.alicdn.com/tps/TB1_qAKKVXXXXXjapXXXXXXXXXX-20-20.png">粤公网安备 44010602001483号
    </a>
    <a href="#">粤ICP备14088652号-2</a>
    </span>
    <br>互联网药品信息服务资质证书编号:<a href="#">浙-(经营性)-2017-0005</a>
    <a href="#">浙公网安备 33010002000120号</a>
    <br> <b>© 2003-2017 TMALL.COM 版权所有</b>
    </p>
    </div>
    
    
    </footer>
    
     
    
    
    </div>
  • 相关阅读:
    zookeeper使用场景
    zookeeper安装配置
    hadoop 远程调试
    deep learning笔记
    Sentiment Analysis(1)-Dependency Tree-based Sentiment Classification using CRFs with Hidden Variables
    PRML阅读笔记 introduction
    Python 学习笔记(2)
    python nltk 学习笔记(5) Learning to Classify Text
    python nltk 学习笔记(4) Writing Structured Programs
    python nltk 学习笔记(3) processing raw text
  • 原文地址:https://www.cnblogs.com/rain-null/p/7120380.html
Copyright © 2020-2023  润新知