纯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>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>

纯css模仿天猫首页的更多相关文章

css模仿百度首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
模仿天猫实战【SSM】——总结
第一篇文章链接:模仿天猫实战[SSM版]--项目起步第二篇文章链接:模仿天猫实战[SSM版]--后台开发总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了, ...
纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
纯CSS实现各类气球泡泡对话框效果
原文纯CSS实现各类气球泡泡对话框效果一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
纯CSS二级纵向菜单
纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...
模仿天猫实战【SSM版】——项目起步
前言:现在自己的学习似乎遇到了瓶颈,感觉学习了 SSM 之后有一些迷茫,不知道接下来该往哪里去努力了,我觉得这是个很不好的状态,为了度过这段时期,我准备把天猫模仿下来(给自己找点事做)之后开始去巩固 ...

随机推荐

mysql基本用法
mysql的基本用法一.创建数据库 create database day02 default character set utf8; -- 创建表 create table user( i ...
bzoj 4032(A的一个最短的子串，它不是B的子串 || A的一个最短的子串，它不是B的子序列 || A的一个最短的子序列，它不是B的子串||A的一个最短的子序列，它不是B的子序列)
在虐各种最长公共子串.子序列的题虐的不耐烦了之后,你决定反其道而行之. 一个串的“子串”指的是它的连续的一段,例如bcd是abcdef的子串,但bde不是. 一个串的“子序列”指的是它的可以不连续的一 ...
20190430-PPK大佬的三个Viewport
写在前面的乱七八糟:在知识的海洋里狗刨,越刨会越自我膨胀,膨胀过后的自己,又会发现自己的渺小~ 目录 1.viewport 2.css的1px 3.三个viewport 参考文献: https://b ...
oracle12c之二控制PDB中SGA 与 PGA 内存使用
oracle12c之控制pdb中sga 与 pga 内存使用 Memory Management using Resource Manager Oracle数据库资源管理器(资源管理器)现在可以在多 ...
SpringCloud---服务容错保护---Spring Cloud Hystrix
1.概述 1.1 在分布式架构中,存在着许多的服务单元,若一个单元出现故障,很容易因依赖关系引发故障的蔓延,最终导致整个系统的瘫痪: 为了解决这样的问题,产生了断路器等服务保护机制: 1.2 分布式架 ...
Android Watchdog
http://androidxref.com/6.0.1_r10/xref/frameworks/base/services/core/java/com/android/server/Watchdog ...
关于mouseleave事件触发的bug问题
在做下拉树搜索功能的时候,下方内容框需要一个鼠标移出时就隐藏的功能,于是使用mouseleave的方法, 但是出现了一个问题就是在点击树展开个隐藏的时候,也触发了leave事件,将下方的树进行隐藏,出 ...
git学习笔记5
查看保存的进度 git stash list 恢复进度 git stash pop 测试运行哪些文件会被删除 git clean -nd 强制删除 git clean -fd 保存当前的工作进度,会保 ...
Linux下实现MySQL数据库自动备份
1.给mysql创建用户备份的角色,并且授予角色SELECT, RELOAD, SHOW DATABASES, LOCK TABLES等权限. mysql> create user 'backu ...
Java Hashtable 源码(JDK8)
记录了HashMap也来看看Hashtable吧,最近打算换份实习,所以想看看书回顾一下,不然就快记不得了.....囧啊囧啊,记性太差怎么破??? Hashtable里面的一些变量: Entry< ...

纯css模仿天猫首页

纯css模仿天猫首页的更多相关文章

随机推荐

热门专题