完整项目
https://download.csdn.net/download/weixin_45525272/12596801
界面展示
GIF
界面代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> <!-- 网页图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- normalize 里面css 初始化 针对浏览器 --> <link rel="stylesheet" href="css/normalize.css" /> <!-- base 里面只写公共样式 是对京东网页 头部和底部样式 --> <link rel="stylesheet" href="css/base.css" /> <!-- 京东首页的css 只写首页的 独有的--> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 京东头部广告开始 --> <div class="J_event"> <a href="#" class="w"> <!-- 小错号 --> <i></i> </a> </div> <!-- 头部广告结束 --> <!-- 快捷导航栏开始 --> <div class="shortcut"> <div class="w"> <ul class="fl"> <li> <i class="pos"></i> 沧州 </li> </ul> <ul class="fr"> <li> <a href="#"> 你好，请登录 </a> <a href="#" class="style-red"> 免费注册 </a> </li> <li class="spacer"></li> <li> <a href="#"> 我的订单 </a> </li> <li class="spacer"></li> <li class="dropdown"> <a href="#"> 我的京东 <i></i> </a> </li> <li class="spacer"></li> <li> <a href="#"> 京东会员 </a> </li> <li class="spacer"></li> <li> <a href="#"> 企业采购 </a> </li> <li class="spacer"></li> <li class="dropdown"> <a href="#"> 客户服务 <i></i> </a> </li> <li class="spacer"></li> <li class="dropdown"> <a href="#"> 网站导航 <i></i> </a> </li> <li class="spacer"></li> <li style="position: relative; z-index: 1;"> <a href="#"> 手机京东 </a> <div class="erweima"> <img src="images/erweima.png" alt=""> </div> </li> </ul> </div> </div> <!-- 快捷导航栏结束 --> <!-- header 部分 开始 --> <div class="header"> <div class="w inner"> <!-- logo部分 --> <div class="logo"> <h1> <a href="#" title="京东网">京东</a> </h1> </div> <!-- 搜索部分 --> <div class="search"> <input type="text" value="单反相机"> <button> <i></i> </button> <em></em> </div> <!-- 热词部分 --> <div class="hotwords"> <a href="#" class="style-red">学生专享</a> <a href="#">300减160</a> <a href="#">七折返场</a> <a href="#">骑行运动</a> <a href="#">家电榜单</a> <a href="#">无损播放器</a> <a href="#">汽车脚垫</a> <a href="#">巧克力</a> <a href="#">铝合金门窗</a> </div> <!-- 购物车 --> <div class="myCar"> <i></i> <a href="#">我的购物车</a> <s>0</s> </div> <!-- 电脑 --> <div class="computer"> <a href="#"> <img src="images/computer.jpg" height="40" width="190" alt=""> </a> </div> <!-- 导航栏信息 --> <div class="navitems"> <ul> <li><a href="#">秒杀</a></li> <li><a href="#">秒杀</a></li> <li><a href="#">秒杀</a></li> <li><a href="#">秒杀</a></li> </ul> <div class="spacer"></div> <ul> <li><a href="#">京东服饰</a></li> <li><a href="#">京东服饰</a></li> <li><a href="#">京东服饰</a></li> <li><a href="#">京东服饰</a></li> </ul> <div class="spacer"></div> <ul> <li><a href="#">京东金融</a></li> </ul> </div> </div> </div> <!-- header 部分 end--> <!-- 页面主要部分开始 --> <div class="jd"> <div class="w jd-inner"> <div class="jd-clo1"> <ul> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> <li> <a href="#">手机</a> <span>/</span> <a href="#">运营商</a> <span>/</span> <a href="#">数码</a> </li> </ul> </div> <div class="jd-clo2"> <div class="jd-clo2-hd"> <a href="#" class="arr-l"></a> <a href="#" class="arr-r"></a> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <ul> <li><a href="#"><img src="images/banner.jpg" alt=""></a></li> </ul> </div> <div class="jd-clo2-bd"> <div class="firstPic"> <img src="images/pic1.jpg" > </div> <div> <img src="images/pic2.jpg" > </div> </div> </div> <div class="jd-clo3"> <!-- 用户部分 --> <div class="user"> <div class="user-info"> Hi, 欢迎来到京东! <br /> <a href="#">登录</a> <a href="#">注册</a> <a href="#" class="info-img"> <img src="images/no_login.jpg"> </a> </div> <div class="user-profit"> <a href="#">新人福利</a> <a href="#">PLUS会员</a> </div> </div> <!-- 新闻部分 --> <div class="news"> <div class="tab-hd"> <a href="javascript:;" class="cuxiao">促销</a> <a href="javascript:;">公告</a> <a href="#" class="more1">更多</a> <div class="line"></div> </div> <div class="tab-bd"> <ul> <li><a href="#">蓄电池专场下单立减100元</a></li> <li><a href="#">蓄电池专场下单立减100元</a></li> <li><a href="#">蓄电池专场下单立减100元</a></li> <li><a href="#">蓄电池专场下单立减100元</a></li> </ul> </div> </div> <!-- 服务部分 --> <div class="jd-service"> <ul> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> <li> <a href="#"> <i></i> <p>机票</p> </a> </li> </ul> </div> </div> </div> <!-- 广告结束 --> <div class="ad"> <a href="#"></a> </div> </div> <!-- 页面主要部分结束 --> <!-- 页面底部分开始 --> <div class="w footer"> <!-- 多快好省模块 --> <div class="footer-service"> <div class="footer-service-inner"> <ul> <li> <div class="service_unit"> <h5>多</h5> <p>品类齐全，轻松购物</p> </div> </li> <li> <div class="service_unit"> <h5 class="kuai">块</h5> <p>多仓直发，极速配送</p> </div> </li> <li> <div class="service_unit"> <h5 class="hao">好</h5> <p>正品行货，精致服务</p> </div> </li> <li> <div class="service_unit"> <h5 class="sheng">省</h5> <p>天天低价，畅选无忧</p> </div> </li> </ul> </div> </div> <!-- 帮助模块 --> <div class="help"> <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> <dl class="cover"> <dt>京东自营覆盖区县</dt> <dd class="info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。 </dd> <dd class="more"> <a href="#">查看详情 > </a> </dd> </dl> </div> <!-- 版权模块 --> <div class="copyright"> <div class="links"> <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</a> <span>|</span> <a href="#">Site</a> <span>|</span> <a href="#">Media & IR</a> <span>|</span> </div> <div class="c-info"> <p>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</p> <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</p> <p>Copyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线：4006067733经营证照</p> <p>京东旗下网站：京东支付|京东云</p> </div> <div class="tupian"> <a href="#"></a> <a href="#" class="kexin"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> </div> <!-- 页面底部分结束 --> </body> </html>
