仿京东商城主页（静态代码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><title>京东欢迎你</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body><!--header开始--><header><div class="w"><a href="#"><img src="data:images/header.jpg" alt=""></a></div></header><!-- heder结束 --><!-- 快速导航栏开始 --><div class="shortcut"><div class="w"><ul class="fl city"><li>! 北京</li></ul><ul class="fr"><li><a href="login.html" target="_blank">你好,请登录</a><a href="signin.html" class="colorred">免费注册</a></li><li class="l"></li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="">我的订单</a></li><li  class="la">l</li><li><a href="#" class="mobile">手机京东<img src="data:images/mobile.png" alt=""></a></li></ul></div></div><!-- 快速导航栏结束 --><!-- 中间部分开始 --><div class="w middle"><div class="logo"><h1> <!-- <h1>提高权重 --><a href="#"></a></h1></div><div class="form"><input type="text" placeholder="扫描仪"><button>搜索</button></div><div class="shopcar"><a href="#">我的购物车</a><i>8</i> </div><div class="hotword"><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a><a href="">199减100</a></div><div class="navtimes"><ul><li><a href="">秒杀</a><a href="">秒杀</a><a href="">秒杀</a><a href="">秒杀</a><a href="">秒杀</a><a href="">秒杀</a><a href="">秒杀</a> <a href="">秒杀</a></li></ul></div></div><!-- 中间部分结束 --><!-- 中间分类模块 --><div class="w grid"><div class="grid-col1 fl"><div class="ad"><img src="data:images/ad-l.png" alt="" height="480" width="250"><img src="data:images/ad-r.jpg" alt="" class="ad-r"></div><ul><li><a href="">家用电器</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li></li><li><a href="">家用电器</a>/<a href="">手机</a></li></li><li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li></ul></div><div class="grid-col2 fl"><!-- 中间模块 --><div class="grid-col2-t"><div class="banner"><ul><li><img src="data:images/banner.jpg" alt=""height="340" width="790"></li><li><img src="data:images/紫砂.png" alt=""height="340" width="790"></li></ul><div class="arrow-l">&lt</div><div class="arrow-r">  </div><ol><li></li><li></li><li></li><li></li></ol></div></div><div class="grid-col2-b"><div><img src="data:images/l.jpg" alt=""height="130"width="390"></div><div><img src="data:images/r.jpg" alt="" height="130" width="390"></div></div></div><!-- 右边模块 --><div class="gird-col3 fl"><!-- 登陆模块 --><div class="login"><div class="login-t">Hi,欢迎来到京东！<br/><a href="">登录</a><a href="">注册</a></div><div class="login-b"><li><a href="">新人福利</a></li><li><a href="">PLUS会员</a></li></div></div><!-- 新闻模块 --><div class="news"><div class="news-t"><a href="" class="cuxiao">促销</a><a href="" class="gonggao">公告</a><a href="" class="more">更多</a></div><div class="news-b"><ul><li><a href="">挑战三天不洗头</a></li><li><a href="">挑战三天不洗头</a></li><li><a href="">挑战三天不洗头</a></li><li><a href="">挑战三天不洗头</a></li></ul></div></div><!-- 服务模块 --><div class="expand"><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 class="clear.both"></div></div><!-- 展示模块 --><div class="zhanshi w"><ul><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li><li><div class="zhanshi-t"><img src="data:images/gg35.jpg" alt=""></div><a href="#">京东超市：福临门，东北大米</a></li></ul></div></div>
<!-- 帮助模块 --><footer> <!-- 帮助模块 --><div class="w help"><div class="fl"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl></div><div class="fr coverage"><h5>京东自营覆盖区县</h5><p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p><a href="#">查看详情></a></div></div><div class="w copyright"><p><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">联系客服</a><span>|</span><a href="#">合作招商</a><span>|</span><a href="#">商家帮助</a><span>|</span><a href="#">营销中心</a><span>|</span><a href="#">手机京东</a><span>|</span><a href="#">友情链接</a><span>|</span><a href="#">销售联盟</a><span>|</span><a href="#">京东社区</a><span>|</span><a href="#">风险监测</a><span>|</span><a href="#">隐私政策</a><span>|</span><a href="#">京东公益</a><span>|</span><a href="#">English Site</a><span>|</span><a href="#">Media & IR</a></p><div><p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p><p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p><p>Copyright © 2004 - 2019  京东JD.com 版权所有<span>|</span>消费者维权热线：4006067733经营证照<span>|</span>(京)网械平台备字(2018)第00003号<span>|</span>营业执照</p></div><p class="footerIcon"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></p></div></footer></body>
</html>

CSS通用部分

/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}
/* 京东版心 */
.w{width: 1190px;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle;}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框我们需要手动去掉 */border: 0; outline: none;
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

CSS主页部分

.w{width: 1190px;margin: 0 auto;
}
.fl{float: left;
}
.fr{float: right;
}
body{background-color: #f6f6f6;
}
/* header部分 */
header{height: 80px;background-color: #020000;
}
/* 快速导航栏开始 */
.shortcut{height: 30px;background-color: #e3e4e5;border-bottom: 1px solid #ddd;font-size: 12px;line-height: 30px;}
.city{margin-left: 200px;
}
.shortcut li{float: left;line-height: 30px;margin-right: 10px;
}
.mobile{position: relative;}
.mobile img{position: absolute;left: -3px;top:24px;border:1px solid #ccc;padding: 3px;}
/* 快速导航栏结束 */
/* 中间部分开始 */
.middle{height: 140px;position: relative;
}
.logo{position: absolute;top:-30px;left:0;box-shadow: 0px -10px 10px rgba(0, 0, 0, .3);}
.logo a{display: block;width: 190px;height: 170px;background:#fff url(../images/logo.png) no-repeat;
}
.form{width: 550x;height: 35px;position: absolute;top:25px;left:320px;background-color: pink;
}
.form input{width: 500px;height: 35px;border: 1px solid #f10215;float: left;padding: 5px;}
.form button{float: left;width: 50px;height: 35px;background-color: #f10215;color: #f6f6f6;font-size: 16px;
}
.shopcar{width: 188px;height: 33px;border:1px solid #ccc;position: absolute;top:25px;right: 95px;background-color: #fff;line-height: 33px;text-align: center;
}
.shopcar i{display: block;height: 20px;width: 20px;border-radius: 50% 50% 50% 0;color: #fff;
line-height: 20px;
text-align: 20px;background-color: #f10215;position: absolute;top:-5px;right: 10px;}
/* 关键词模块 */
.hotword {position: absolute;top: 68px;left: 320px;
}
.hotword a{float: left;margin-right: 10px;}
/* 小导航模块 */
.navtimes{width: 770px;height: 40px;
position: absolute;
bottom:0;
left:200px;
line-height: 40px;
}
.navtimes li{float: left;}
.navtimes li a{font-size: 16px;font-weight: 700;columns: #555555;margin-left: 50px;
}
/* 中间部分结束 */
/* 中间分类模块开始 */
.grid{height: 480px;z-index: 999;}.grid-col1{width: 190px;height: 100%;background-color: #6e6e6e;color: #fff;font-size: 14px;position: relative;
}
.grid-col1 ul{padding: 10px 0;
}
.grid-col1 ul li{padding-left: 12px;height: 30px;line-height:30px;
}
.grid-col1 ul li:hover{background-color: #9c9c9c;
}
.grid-col1 ul li a{color: #fff;font-size: 14px;margin:0 3px;
}
/* 广告模块 */
.ad{width: 250px;height: 480px;position: absolute;top:0;left:-250px;
}
.ad-r{position: absolute;top:0;left:250px;z-index: 999;width: 0;height: 480px;transition: all 0.8s;}
.ad:hover .ad-r{width: 990px;
}
.grid-col2{width: 790px;height: 100%;margin-left:10px ;position: relative;
}
/* banner部分 */.grid-col2-t{height: 340px;width: 790px;position: relative;
}.banner{height: 100%;width: 100%;overflow: hidden;position: relative;}
.banner ul{height: 100%;width: 200%;}
.banner li{float: left;
}
.banner .arrow-l{height: 20px;width: 20px;position: absolute;left: 10px;top:170px;font-family: 'icomoon';}.banner .arrow-r{height: 20px;width: 20px;position: absolute;right:10px;top:170px;font-family: 'icomoon';}.banner ol{position: absolute;bottom: 20px;left: 200px;}.banner ol li{height: 10px;width: 10px;border-radius: 50%;background-color: #f10215;margin-left: 20px;}
.grid-col2-b div{float: left;margin-top: 10px;
}
.grid-col2-b div:last-child{float: right;margin-left: 10px;
}
/* 右边模块 */
.gird-col3{width: 190px;height: 100%;margin-left: 10px;}.login{height: 115px;border-bottom: 1px solid #ccc;position: relative;}
.login-t{position: absolute;top:30px;left: 50px;
}
.login-b{position: absolute;bottom: 20px;left: 30px;
}
.login-b li{height: 25px;width: 70px;border: 2px solid #f10215;float: left;margin-right: 10px;line-height: 25px;text-align: center;}
.login-b li a{color: #f10215;font-weight: 600;}
.news{height: 155px;border-bottom: 1px solid #ccc;background-color: #fff;padding: 7px 13px 0;box-sizing: border-box;
}
.news-t{height: 19px;border-bottom: 1px solid #ccc;
}
.news-t a{float: left;
}
.cuxiao{width: 38px;height: 17px;line-height: 17px;border-right: 1px solid #ccc;
}
.gonggao{height: 17px;margin-left: 15px;
}
.news-t .more{float: right;}
.news-b li {margin-top: 10px;
}
.expand{height: 210px;overflow: hidden;}
.expand ul{margin-left: 5px;width: 190px;}
.expand li{width: 47px;height: 69px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;float: left;background-image: url(../images/sprite_fs@1x.png);background-position: 0px 0px;background-repeat: no-repeat;}
/* 展示模块 */
.zhanshi{height: 740px;margin-top: 20px;}
.zhanshi li{height: 300px;width: 220px;float: left;border: 1px solid #666;overflow: hidden;
}.zhanshi li a {height: 80px;display: block;width: 100%;line-height: 80px;font-size: 16px;text-align: right;
}.footer {height: 500px;margin-top: 35px;
}.footer a {color: #666;
}/*帮助模块*/
/*左侧*/
.help {border-bottom: 1px solid #DEDEDE;height: 200px;padding-top: 25px;box-sizing: border-box;
}.help dl {width: 192px;float: left;
}.help dt {height: 30px;font-size: 14px;font-weight: bold;color: #666;
}.help dd {height: 22px;
}
/*右侧*/
.coverage {width: 200px;height: 150px;background: url(../images/sprite.footer.png) no-repeat;
}.coverage h5 {font-size: 14px;font-weight: bold;color: #666;margin-left: 35px;margin-bottom: 15px;
}.coverage p {line-height: 18px;color: #666;width: 180px;
}.coverage a {display: block;text-align: right;margin-top: 5px;color: #666;
}/*版权*/
.copyright {padding-top: 20px;color: #666;font-size: 12px;text-align: center;
}.copyright span {margin: 0 10px;
}.copyright div {margin-top: 15px;
}.copyright div p {line-height: 22px;
}.footerIcon a {width: 103px;height: 32px;display: inline-block;background: url(../images/sprite.footer.png) no-repeat -206px 0;margin: 20px 4px 0;
}
.footerIcon a:nth-child(2) {background-position: -206px -37px;
}
.footerIcon a:nth-child(3) {background-position: -206px -74px;
}
.footerIcon a:nth-child(4) {background-position: -206px -110px;
}
.footerIcon a:nth-child(5) {background-position: -206px -148px;
}

仿京东商城主页（静态代码）相关推荐

h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录注册首页购物商品详情 ,等多个页面~特别适合web期末 ...
【android】高仿京东商城App，集成react-native热更功能
简介高仿京东商城项目具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,功能还在持续更新中-如果对你有帮助,给个star 使用kotlin语言开发,项目使用模块化开发,降低 ...
高仿京东商城app、集成react-native热更新功能
简介这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
仿手机端京东商城html源码_web前端入门到实战：制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能一.html代码已选条件: 品牌: 全部惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕戴尔三星索尼东芝 ...
京东商城的商品分类代码
京东商城的商品分类–代码效果图: 该效果CSS可以拼接出来,但是出于CSS样式方法运用"hover"属性过多:产生浏览器不兼容问题.所以,该方法不值得提倡! JS方法实现,原理: ...
基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)
网上购物商城系统以弥补传统购物方式的弊端.在目前的商城里,如果采用网上商城方式,用户购物时就不需要到店里面排队,这样不仅能实时地了解商品的特色,而且方便了顾客,同时也减轻了商城的服务压力.随着WLAN ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
高仿京东商城App，集成react-native 热更新功能
前言这是一个高仿京东商城的android 混合项目,具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,使用最新MVI架构开发 kotlin . retrofit2 + o ...

仿京东商城主页（静态代码）

仿京东商城主页（静态代码）相关推荐

最新文章

热门文章