#新人福利# HTML+CSS 京东商城静态页面
仅供学习，禁止商用！概不负责
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link href="C:\Users\123\Desktop\jd\css\font-awesome-4.7.0\css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="C:\Users\123\Desktop\jd\css/style.css">
<title>京东商城</title>
<script src="C:\Users\123\Desktop\jd\js/jquery-3.6.3.min.js"></script>
<script type="text/javascript" src="C:\Users\123\Desktop\jd\js/owl.carousel.js"></script> <!-- 轮播图切换 -->
<link rel="stylesheet" href="C:\Users\123\Desktop\jd\css/owl.css">
<script src="C:\Users\123\Desktop\jd\js/jQuery.js"></script>
</head>
<body>
<!-- 头部开始 -->
<header>
<div class="intermediate_public">
<div class="close2">
<a href="#" class="close1">
<img src="images/advertisement.png">
</a>
<a id="close" href="#">×</a>
</div>
</div>
</header>
<div class="shortcut">
<div class="intermediate_public">
<ul class="nav_left">
<li>
<i class="fa fa-map-marker">
</i>云南
</li>
</ul>
<ul class="nav_right">
<li>
<a href="#">你好，请登录 </a>
</li>
<li>
<a href="#" class="f10">免费注册</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的京东</a>
</li>
<li class="space"></li>
<li>
<a href="#" class="f10">企业采购</a>
</li>
<li class="space"></li>
<li>
<a href="#">商家服务</a>
</li>
<li class="space"></li>
<li>
<a href="#">网站导航</a>
</li>
<li class="space"></li>
<li>
<a href="#" class="mobile">手机京东
<img src="images/jingdong.png" />
</a>
</li>
<li class="space"></li>
<li>
<a href="#">网站无障碍</a>
</li>
</ul>
</div>
</div>
<div class="middle">
<div class="intermediate_public">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<!-- 搜索 -->
<div class="form">
<input type="text" placeholder="钢笔">
<i class="fa fa-camera"></i>
<button><i class="fa fa-search"></i></button>
</input>
</div>
<!-- 购物车 -->
<div class="shopcar">
<a href="#" class="f10">
<i class="fa fa-shopping-cart">
</i>我的购物车
</a>
<span>0
</span>
</div>
<!-- 关键词 -->
<div class="hotwords">
<a href="#" class="f10">电脑万店购</a>
<a href="#">京东京造</a>
<a href="#">9.9包邮</a>
<a href="#">拍拍酒水</a>
<a href="#">宠物健康</a>
<a href="#">数码配件</a>
<a href="#">数码配件</a>
<a href="#">全球买手</a>
</div>
<!-- 小导航栏 -->
<div class="intermediate_public">
<div class="nav_bar">
<a href="#">京东超市</a>
<a href="#">优惠卷</a>
<a href="#">秒杀</a>
<a href="#">京东家电</a>
<a href="#">PLUS会员</a>
<a href="#">拍卖</a>
<a href="#">进口好物</a>
<a href="#">品牌闪购</a>
<a href="#">京东五金城</a>
</div>
</div>
</div>
</div>
<!-- 头部结束 -->
<!-- 中间dinner开始 -->
<!-- dinner左边 -->
<div class="intermediate_public">
<div class="grid">
<div class="grid_col1">
<ul>
<li #="gridli1"><a href="#">家用电器</a></li>
<li class="gridli2"><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li>
<li class="gridli3"><a href="#">电脑</a>/<a href="#">办公</a></li>
<li class="gridli4"><a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
<li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#"></a>内衣</li>
<li><a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a></li>
<li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
<li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
<li><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
<li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
<li><a href="#">食品</a>/<a href="#">酒类</a><a href="#">生鲜</a>/<a href="#">特产</a></li>
<li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
<li><a href="#">医药保健</a>/<a href="#">计生情趣</a></li>
<li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></li>
<li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
<li><a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a>/<a href="#">企业金融</a></li>
<li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
<li><a href="#">工业品</a></li>
</ul>
</div>
<!-- 二级菜单 -->
<div class="gridli_box">
<div class="gridli_box1">33</div>
<div class="gridli_box2">44</div>
<div class="gridli_box3">55</div>
<div class="gridli_box4">66</div>
</div>
<!-- 轮播图 --><div class="grid_col2">
<div class="grid_col2_t">
<ul class="uli">
<div id="owl-demo" class="owl-carousel">
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu1.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu2.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu3.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu4.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu5.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu6.png" alt=""></a>
<a class="item" href="#" >
<img src="C:\Users\123\Desktop\jd\images/lunbotu7.png" alt=""></a>
</div>
</ul>
<a href="javascript:;" class="arrow_left"><</a>
<a href="javascript:;" class="arrow_right">></a>
<ul class="cricle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="grid_col3">
<a href="#"><img src="images/advertisement2.png"></a>
<a href="#"><img src="images/advertisement3.png"></a>
<a href="#"><img src="images/advertisement4.png"></a>
</div>
<div class="grid_col4">
<div class="grid_login">
<img src="images/loginlogo.png">
<div class="login_words">
Hi~欢迎逛京东！<br>
<a href="#">登录 </a>|
<a href="#">注册</a>
</div>
<div class="login_extend1">
<a href="#">新人福利</a>
</div>
<div class="login_extend2">
<a href="#">PLUS会员</a>
</div>
</div>
<div class="grid_news">
<div class="news_words1">
京东快报
</div>
<div class="news_words2">
<a href="#">更多</a>
</div>
<ul class="news_hot">
<li><a href="#"><img src="images/hot.png"></a></li>
<li><a href="#"><img src="images/repin.png"></a></li>
<li><a href="#"><img src="images/hot.png"></a></li>
<li><a href="#"><img src="images/repin.png"></a></li>
</ul>
<ul class="news_words3">
<li><a href="#">舒适的北风客厅，</a></li>
<li><a href="#"></a>过年情侣向穿搭</a></li>
<li><a href="#"></a>初春清爽少年感</a></li>
<li><a href="#">reebok X DC UNI</a></li>
</ul>
</div>
<div class="grid_expand">
<a href="#"><img src="images/logo2.png"></a>
</div>
</div>
</div>
</div>
<!-- 内容开始 -->
<div class="intermediate_public">
<div class="seckill">
<a class="seckill_countdown" href="#">
<img src="images/seckill.png">
<div class="seckill_left">京东秒杀
</div>
<div class="seckill_bottom">点场 剧结束</div>
</a>
<div class="seckill_active">
<div class="seckill_active1">
<a href="#">
<img src="images/seckill2.png"><p>华为智选 Hi nova 10 Pro</p>
</a>
<div class="seckill_money1">¥3599.00</div>
</div>
<div class="seckill_active2">
<a href="#">
<img src="images/seckill2.png"><p>华为智选 Hi nova 10 Pro</p></a>
<div class="seckill_money1">¥3599.00</div>
</div>
<div class="seckill_active3">
<a href="#">
<img src="images/seckill2.png"><p>华为智选 Hi nova 10 Pro</p></a>
<div class="seckill_money1">¥3599.00</div>
</div>
<div class="seckill_active4">
<a href="#">
<img src="images/seckill2.png"><p>华为智选 Hi nova 10 Pro</p></a>
<div class="seckill_money1">¥3599.00</div>
</div>
<div class="seckill_active5">
<a href="#">
<img src="images/seckill5.png"></a>
</div>
</div>
</div>
<div class="elevator">
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
<div class="elevator_lk_text">
<span class="elevator_lk_box">
<span>京东秒杀
</span>
</span>
</div>
</div>
</body>
<!-- 底部开始 -->
<footer>
<!-- 服务 -->
<div class="intermediate_public">
<div class="service">
<div class="service_words">
<ul>
<li>
<h5>
<img src="./images/duo.png">
</h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5>
<img src="./images/kuai.png">
</h5>
<p>多仓直发，极速配送</p>
</li>
<li>
<h5>
<img src="./images/hao.png">
</h5>
<p>正品行货，精致服务</p>
</li>
<li>
<h5>
<img src="./images/sheng.png">
</h5>
<p>天天低价，畅选无忧</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部功能 -->
<div class="footer_fun">
<!-- 底部左边 -->
<div class="intermediate_public">
<div class="footer_left">
<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="#">211限时达</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>
</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>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="#">夺宝岛</a></dd>
<dd><a href="#">DIY装机</a></dd>
<dd><a href="#">延保服务</a></dd>
<dd><a href="#">京东E卡</a></dd>
<dd><a href="#">京东通信</a></dd>
<dd><a href="#">京鱼座智能</a></dd>
</dl>
</div>
<!-- 底部右边 -->
<div class="footer_right">
<h5>京东自营覆盖区县</h5>
<p>京东已向全国2661个区县提供自<br>营配送服务，支持货到付款、<br>POS机刷卡和售后上门服务。</p>
<a href="#">查看详情 ></a>
</div>
</div>
</div>
<!-- 版权 -->
<div class="footer_copyright">
<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="#">Media&IR</a>
<div>
<a href="#">京公网安备 11000002000088号</a>
<span>|</span>
<a href="#">京ICP备11041704号</a>
<span>|</span>
<a href="#">ICP</a>
<span>|</span>
<a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
<span>|</span>
<a href="#">新出发京零 字第大120007号</a>
<br>
<a href="#">互联网出版许可证编号新出网证(京)字150号</a>
<span>|</span>
<a href="#">出版物经营许可证</a>
<span>|</span>
<a href="#">网络文化经营许可证京网文[2020]6112-1201号</a>
<span>|</span>
<a href="#">违法和不良信息举报电话：4006561155</a>
<br>
<a href="#">Copyright © 2004 - 2023 京东JD.com 版权所有</a>
<span>|</span>
<a href="#">消费者维权热线：4006067733</a>
<span>|</span>
<a href="#">营业执照</a>
<span>|</span>
<a href="#">经营证照 | (京)网械平台备字(2018)第00003号</a>
<span>|</span>
<a href="#">营业执照</a>
<span>|</span>
<a href="#">增值电信业务经营许可证</a>
<br>
<a href="#"><img src="images/guoqi1.png">Сайт России</a>
<span>|</span>
<a href="#"><img src="images/guoqi2.png">Situs Indonesia</a>
<span>|</span>
<a href="#"><img src="images/guoqi3.png">Sitio de España</a>
<span>|</span>
<a href="#"><img src="images/guoqi4.png">เว็บไซต์ประเทศไทย</a>
<br>
<a>京东旗下网站：</a>
<a href="#">京东钱包</a>
<span>|</span>
<a href="#">京东云</a>
<span>|</span>
<a>网络内容从业人员违法违规行为举报电话：4006561155-3</a>
</div>
<a href="#"><img src="images/tupianlianjie.png"></a>
</div>
</footer>
<font>
</font>
</html>
