此项目主要使用HTML5+CSS来编写,对京东商城主业进行了整体的仿制,由于缺少素材,局部无法完全仿制。
HTML5部分:
<!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="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&g