成品效果图
网页源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!--京东的头部导航开始-->
<div>
<div>
<div>
<div> 送至：北京
<i><s>◇</s></i>
</div>
</div>
<div>
<ul>
<li>
<a href="#">你好，请登录</a>
<a href="#">免费注册</a>
</li>
<li></li>
<li>我的订单</li>
<li></li>
<li>我的京东
<i><s>◇</s></i>
</li>
<li></li>
<li>京东会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="fore tel-jd">
<em></em>
手机京东
<i><s>◇</s></i>
</li>
<li></li>
<li>
关注京东
<i><s>◇</s></i>
</li>
<li></li>
<li>
客户服务
<i><s>◇</s></i>
</li>
<li></li>
<li>
网站导航
<i><s>◇</s></i>
</li>
</ul>
</div>
</div>
</div>
<!--京东头部导航结束-->
<!--京东的topbanner部分-->
<div id="banner">
<div class="w tp" id="jd_close">
<img src="images/topbanner.jpg" alt=""/>
<a href="javascript:;"></a>
</div>
</div>
<script>
// 事件源: topbanner
// 事件: 点击
// 事件处理函数: topbanner关闭
var banner = document.getElementById("banner");
var jd_close = document.getElementById("jd_close");
banner.onclick = function(){
jd_close.style.display = "none";
}
</script>
<!--京东的topbanner部分 end-->
<div class="w clearfix">
<div>
<a href="http://www.jd.com" target="_blank" title="叮咚">京东</a>
<div>
<a href="#"><img src="images/dong.gif" alt=""/></a>
</div>
</div>
<div>
<input type="text" name="" id="" value="图书开抢"/>
<button>搜索</button>
</div>
<div>
<a href="#">俺的购物车</a>
<span></span>
<span>></span>
<span>8</span>
</div>
<div>
<a href="#">11月11天</a>
<a href="#">11.11秒杀</a>
<a href="#">买2免1</a>
<a href="#">Note5 黑</a>
<a href="#">12期免息</a>
<a href="#">智能科技</a>
<a href="#">清仓</a>
<a href="#">国际服饰</a>
<a href="#">优惠券</a>
</div>
</div>
<!--nav 部分开始-->
<div>
<div>
<div>
<div>
<a href="#">全部商品分类</a>
</div>
<div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>家用电器</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
<div>
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>
</div>
</div>
<div>
<ul>
<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>
<li><a href="#">金融</a></li>
<li><a href="#">智能</a></li>
</ul>
</div>
<div>
<a href="#"></a>
</div>
</div>
</div>
<!--
大banner
-->
<div>
<a href="#">
</a>
</div>
<div class="w main clearfix">
<div id="slide">
<a href="#"><img src="images/slider1.jpg" alt=""/></a>
<ul> <!-- 小圆点-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div id="arr"> <!--左右两个三角-->
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
</div>
</div>
<script>
var slide = document.getElementById("slide");
var arr = document.getElementById("arr");
slide.onmouseover = function(){
arr.style.display = "block";
}
slide.onmouseout = function(){
arr.style.display = "none";
}
</script>
<div>
<div>
<div>
<h3>京东快报</h3>
<a href="#">更多></a>
</div>
<div>
<ul>
<li><a href="#"><span>[特惠]</span>1元秒杀</a></li>
<li><a href="#"><span>[公告]</span>母婴类APP【京东宝宝】上线</a></li>
<li><a href="#"><span>[特惠]</span>美的品牌日 APP嗨购大放“价”</a></li>
<li><a href="#"><span>[公告]</span>京东深入蒙牛生产基地进行质检</a></li>
<li><a href="#"><span>[特惠]</span>白条购家电 24期免息！</a></li>
</ul>
</div>
</div>
<div>
<div>
<h3>生活服务</h3>
</div>
<div>
<ul>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--双11 的某个活动-->
<div class="w todays clearfix">
<div>
<div class="night-l fl">
<img src="images/night.jpg" alt=""/>
</div>
<div>
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</div>
<!--页面底部开始-->
<div>
<div> <!--服务模块-->
<div>
<span class="item slogen1">
<img src="images/slogen1.png" alt=""/>
</span>
<span class="item slogen2">
<img src="images/slogen2.png" alt=""/>
</span>
<span class="item slogen3">
<img src="images/slogen3.png" alt=""/>
</span>
<span class="item slogen4">
<img src="images/slogen4.png" alt=""/>
</span>
</div>
<div class="w shopping clearfix">
<dl>
<dt><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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>京东自营覆盖区县</div>
<div>
<p> 京东已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<p><a href="#">查看详情 ></a></p>
</div>
</div>
</div>
</div>
<div class="w againw">
<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>|
<a href="#">京东公益</a>|
<a href="#">English Site</a>|
<a href="#">Contact Us</a>
</div>
<div>
北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br />
音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br />
网络文化经营许可证京网文[2014]2148-348号 违法和不良信息举报电话：4006561155 Copyright © 2004-2015 京东JD.com 版权所有<br />
京东旗下网站：360TOP 拍拍网 网银在线
</div>
<div>
<a href="#"><img src="images/mess.png" alt=""/></a>
<a href="#"><img src="images/mess2.png" alt=""/></a>
<a href="#"><img src="images/mess3.png" alt=""/></a>
<a href="#"><img src="images/mess4.png" alt=""/></a>
<a href="#"><img src="images/mess5.png" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计
»
仿写京东首页前端
