仿京东静态页面
HTML部分：
<!DOCTYPE html>
<html >
<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="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="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="images/ad-l.png" alt="" height="480" width="250">
<img src="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="images/banner.jpg" alt=""height="340" width="790"></li>
<li><img src="images/紫砂.png" alt=""height="340" width="790"></li>
</ul>
<div class="arrow-l"><
</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="images/l.jpg" alt=""height="130"
width="390"></div>
<div><img src="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="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="images/gg35.jpg" alt="">
</div>
<a href="#">京东超市：福临门，东北大米</a>
</li>
<li>
<div class="zhanshi-t">
<img src="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;
- 上一篇 »仿QQ聊天软件及源码java版
- 下一篇 »京东官网
