京东官网

2021年04月03日 阅读数:171
这篇文章主要向大家介绍京东官网,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

下面为使用htmlcssjavascript写的京东官网首页

京东官网建立的文件夹结构以下:

在这里插入图片描述
一个有三个文件夹和一个index.html文件。css文件家里面存放的是css文件,img文件夹里面存放着网页所须要的图片,js文件夹里面放的是所须要的js文件。最后的index.html是官网的首页。javascript


html的代码以下:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
		<!--引入字体图标-->
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css" rel="stylesheet">
		<!--引入重置样式-->
		<link rel="stylesheet" href="./css/reset.css" type="text/css">
		<!--引入商城主页的css-->
		<link rel="stylesheet" href="./css/style.css" type="text/css">
		<!--引入本页的css-->
		<link rel="stylesheet" href="./css/index.css" type="text/css">
		<!--引入网页图标-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit" />
		<!--引入JavaScript-->
		<script src="./js/index_del.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script src="./js/style.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="./js/index_del.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		<!--顶部广告-->
		<div class="header">
			<!-- <div class="top-img-left">
				<img src="./img/top-left.webp" alt="">
			</div> -->
			<div class="top-img" id="top-img">
				<img src="./img/top1.webp" alt="">
				<div class="del" id="del">
					<img src="./img/del.png" alt="">
				</div>
			</div>
		</div>
		<!--顶部导航栏-->
		<div class="top">
			<div class="top-center">
				<div class="top-left">
					<div class="position">
						<a  href="#"><i class="fas fa-map-marker-alt "></i> <span id="city">甘肃</span></a>
					</div>
					<div class="chengshi">
						<ul>
							<li><a id="bj" href="javascript:;">北京</a></li>
							<li><a id="sh" href="javascript:;">上海</a></li>
							<li><a id="tj" href="javascript:;">天津</a></li>
							<li><a id="cq" href="javascript:;">重庆</a></li>
							<li><a id="hb" href="javascript:;">河北</a></li>
							<li><a id="sx" href="javascript:;">山西</a></li>
							<li><a id="hn" href="javascript:;">河南</a></li>
							<li><a id="ln" href="javascript:;">辽宁</a></li>
							<li><a id="jl" href="javascript:;">吉林</a></li>
							<li><a id="hlj" href="javascript:;">黑龙江</a></li>
							<li><a id="zj" href="javascript:;">浙江</a></li>
							<li><a id="js" href="javascript:;">江苏</a></li>
							<li><a id="sd" href="javascript:;">山东</a></li>
							<li><a id="ah" href="javascript:;">安徽</a></li>
							<li><a id="nmg" href="javascript:;">内蒙古</a></li>
							<li><a id="fj" href="javascript:;">福建</a></li>
							<li><a id="h1" href="javascript:;">湖北</a></li>
							<li><a id="h2" href="javascript:;">湖南</a></li>
							<li><a id="h3" href="javascript:;">贵州</a></li>
							<li><a id="h4" href="javascript:;">云南</a></li>
							<li><a id="h5"  href="javascript:;">西藏</a></li>
							<li><a id="h6" href="javascript:;">陕西</a></li>
							<li><a id="h7" href="javascript:;">甘肃</a></li>
							<li><a id="h8" href="javascript:;">青海</a></li>
							<li><a id="h9" href="javascript:;">钓鱼岛</a></li>
							<li><a id="s1" href="javascript:;">新疆</a></li>
							<li><a id="s2" href="javascript:;">港澳</a></li>
							<li><a id="s3" href="javascript:;">台湾</a></li>
							<li><a id="s4" href="javascript:;">宁夏</a></li>
							<li><a id="s5" href="javascript:;">海外</a></li>

						</ul>
						<div class="top-middle">
							<ul>
								<li class="a">地区专享版本</li>

								<li><a href="javascript:;">中国港澳</a></li>
								<li class="b"><a href="javascript:;">中国台湾</a></li><br>
								<li><a href="javascript:;">京东全球</a></li>
							</ul>
						</div>
						<div class="top-left-foot">
							<ul>
								<li class="c">Available Sites</li>
								<li><a href="javascript:;"><i class="fas fa-globe-americas"></i> Global Site</a></li>
								<li><a href="javascript:;">Cant Poccnn</a></li>
								<li><a href="javascript:;">Situs Indonesia</a></li>
								<li><a href="javascript:;">Sition de Espana</a></li>
								<li></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="top-right">
					<ul>
						<li><a href="#">你好,请登陆 &nbsp;<span class="free">免费注册</span></a></li>
						<span class="middle"></span>
						<li><a href="#">个人订单</a></li>
						<span class="middle"></span>
						<li class="top-right-w">
							<div class="w">
								<a href="#">个人京东&nbsp;<i class="fas fa-sort-down"></i></a>
								<div class="top-right-my">
									<ul class="up">
										<li><a href="javascript:;">待处理订单</a></li>
										<li><a href="javascript:;">消息</a></li>
										<li><a href="javascript:;">返修退换货</a></li>
										<li><a href="javascript:;">个人问答</a></li>
										<li><a href="javascript:;">降价商品</a></li>
										<li class="one"><a href="javascript:;">个人关注</a></li>
									</ul>

									<ul class="un">
										<li><a href="javascript:;">个人京豆</a></li>
										<li class="two"><a href="javascript:;">个人优惠券</a></li>
										<li><a href="javascript:;">个人白条</a></li>
										<li class="two"><a href="javascript:;">个人理财</a></li>
									</ul>
								</div>
							</div>
						</li>
						<span class="middle"></span>
						<li><a href="#">京东会员</a></li>
						<span class="middle"></span>
						<li class="two"><a href="#" class="free">企业采购&nbsp;<i class="fas fa-sort-down"></i></a>
							<div class="two-show">
								<ul>
									<li><a href="javascript:;">企业购</a></li>
									<li><a href="javascript:;">商用场景馆</a></li>
									<li><a href="javascript:;">工业品</a></li>
									<li><a href="javascript:;">丰客多商城</a></li>
									<li><a href="javascript:;">礼品卡</a></li>
									<li><a href="javascript:;">微信企业购</a></li>
								</ul>
							</div>



						</li>
						<span class="middle"></span>
						<li class="three">客户服务&nbsp;<i class="fas fa-sort-down"></i>
							<div class="three-show">
								<ul class="s">
									<p>商品</p>
									<li><a href="javacript:;">帮助中心</a></li>
									<li><a href="javacript:;">售后服务</a></li>
									<li><a href="javacript:;">在线客服</a></li>
									<li><a href="javacript:;">意见建议</a></li>
									<li><a href="javacript:;">电话客服</a></li>
									<li><a href="javacript:;">客服邮箱</a></li>
									<li><a href="javacript:;">金融咨询</a></li>
									<li><a href="javacript:;">全球售客服</a></li>
									<li><a href="javacript:;">企业客服</a></li>
								</ul>

								<ul>
									<p>商品</p>
									<li><a href="javascript:;">合做招商</a></li>
									<li><a href="javascript:;">成长中心</a></li>
									<li><a href="javascript:;">商家后台</a></li>
									<li><a href="javascript:;">京麦工做台</a></li>
									<li><a href="javascript:;">商家帮助</a></li>
									<li><a href="javascript:;">规则平台</a></li>
								</ul>

							</div>
						</li>
						<span class="middle"></span>
						<li class="four">网站导航&nbsp;<i class="fas fa-sort-down"></i>

							<div class="four-show">
								<div class="four-show-one">
									<ul>
										<p>特点主题</p>
										<li><a href="javascript:;">新品首发</a></li>
										<li><a href="javascript:;">京东金融</a></li>
										<li><a href="javascript:;">全球售</a></li>
										<li><a href="javascript:;">国际站</a></li>
										<li><a href="javascript:;">京东会员</a></li>
										<li><a href="javascript:;">京东预售</a></li>
										<li><a href="javascript:;">台湾售货</a></li>
										<li><a href="javascript:;">俄语售</a></li>
										<li><a href="javascript:;">装机大视</a></li>
										<li><a href="javascript:;">0元评测</a></li>
										<li><a href="javascript:;">港澳售</a></li>
										<li><a href="javascript:;">优惠券</a></li>
										<li><a href="javascript:;">秒杀</a></li>
										<li><a href="javascript:;">闪购</a></li>
										<li><a href="javascript:;">印尼站</a></li>
										<li><a href="javascript:;">陪伴计划</a></li>
										<li><a href="javascript:;">山海招商</a></li>
										<li><a href="javascript:;">拍拍二手</a></li>
										<li><a href="javascript:;">买什么</a></li>
									</ul>
								</div>
								<div class="four-show-two">

									<ul>
										<p>行业频道</p>
										<li><a href="javascript:;">手机</a></li>
										<li><a href="javascript:;">智能数码</a></li>
										<li><a href="javascript:;">玩3C</a></li>
										<li><a href="javascript:;">电脑办公</a></li>
										<li><a href="javascript:;">加用电器</a></li>
										<li><a href="javascript:;">图书</a></li>
										<li><a href="javascript:;">京东服饰</a></li>
										<li><a href="javascript:;">京东生鲜</a></li>
										<li><a href="javascript:;">家装城</a></li>
										<li><a href="javascript:;">母婴</a></li>
										<li><a href="javascript:;">食品</a></li>
										<li><a href="javascript:;">农贸频道</a></li>
										<li><a href="javascript:;">整车</a></li>
										<li><a href="javascript:;">京东座智能</a></li>
										<li><a href="javascript:;">劳动防御</a></li>
									</ul>
								</div>
								<div class="four-show-three">
									<ul>
										<p><a href="javascript:;">生活服务</a></p>
										<li><a href="javascript:;">京东众筹</a></li>
										<li><a href="javascript:;">白条</a></li>
										<li><a href="javascript:;">京东金融APP</a></li>
										<li><a href="javascript:;">京东小金库</a></li>
										<li><a href="javascript:;">理财</a></li>
										<li><a href="javscript:;">话费</a></li>
										<li><a href="javscript:;">水电煤</a></li>
										<li><a href="javascript:;">彩票</a></li>
										<li><a href="javascript:;">旅行</a></li>
										<li><a href="javascript:;">机票酒店</a></li>
										<li><a href="">电影票</a></li>
										<li><a href="javascript:;">京东到家</a></li>
										<li><a href="javascript:;">游戏</a></li>
										<li><a href="javascript:;">拍拍回收</a></li>
									</ul>
								</div>

								<div class="four-show-four">
									<ul>
										<p>更多精选</p>
										<li><a href="javascript:;">合做招商</a></li>
										<li><a href="javascript:;">京东通讯</a></li>
										<li><a href="javascript:;">京东E卡</a></li>
										<li><a href="javascript:;">企业采购</a></li>
										<li><a href="javascript:;">服务市场</a></li>
										<li><a href="javascript:;">办公生活馆</a></li>
										<li><a href="javascript:;">校园加盟</a></li>
										<li><a href="javascript:;">京东社区</a></li>
										<li><a href="javascript:;">游戏社区</a></li>
										<li><a href="javascript:;">知识产权维权</a></li>
									</ul>
								</div>

							</div>


						</li>
						<span class="middle"></span>
						<li>手机京东</li>
					</ul>
				</div>
			</div>
		</div>
		<!--搜索框一栏-->
		<div class="find">
			<div class="find-center">
				<div class="logo">
					<img src="./img/logo.gif" alt="">
				</div>
				<div class="find-center-middle">
					<div class="look">
						<input type="text" placeholder="品牌会员低至五折">
						<div class="input-box"><i class="fas fa-search"></i></div>
						<div class="look-buy">
							<i class="fas fa-shopping-cart"></i>&nbsp;&nbsp;个人购物车
						</div>
					</div>
					<div class="look-up">
						<ul>
							<li><a href="javascript:;"><span>定金翻百倍</span></a></li>
							<li><a href="javascript:;">品质居家</a></li>
							<li><a href="javascript:;">二手手机</a></li>
							<li><a href="javascript:;">品质男装</a></li>
							<li><a href="javascript:;">价保1111</a></li>
							<li><a href="javascript:;">京东超市</a></li>
							<li><a href="javascript:;">时尚轻奢</a></li>
							<li><a href="javascript:;">美妆预售</a></li>
							<li><a href="javascript:;">泸州老窖</a></li>
						</ul>
					</div>
					<div class="look-under">
						<ul>
							<li><a href="javascript:;"><span>秒杀</span></a></li>
							<li><a href="javascript:;"><span>优惠券</sapn></a></li>
							<li><a href="javascript:;">PLUS会员</a></li>
							<li><a href="javascript:;">品牌闪购</a></li>
							<li><a href="javascript:;">拍卖</a></li>
							<li><a href="javascript:;">京东家电</a></li>
							<li><a href="javascript:;">京东超市</a></li>
							<li><a href="javascript:;">京东生鲜</a></li>
							<li><a href="javascript:;">京东国际</a></li>
							<li><a href="javascript:;">京东金融</a></li>
						</ul>
					</div>


				</div>
				<div class="find-right">
					<img src="img/find-right.png" alt="">
				</div>
			</div>

		</div>
		<!--网页主体-->
		<div class="body">
			<!--banner容器区域-->
			<div class="body-center">
				<!--最左边的导航栏-->
				<div class="body-center-left">
					<ul>
						<li><a href="javascript:;">家用电器</a></li>
						<li><a href="javascript:;">手机</a>/<a href="javascript:;">运营商</a>/<a href="javascript:;">数码</a></li>
						<li><a href="javascript:;">电脑</a>/<a href="javascript:;">办公</a></li>
						<li><a href="javascript:;">家居</a>/<a href="javascript:;">家具</a>/<a href="javascript:;">家装</a>/<a href="javascript:;">厨具</a></li>
						<li><a href="javascript:;">男装</a>/<a href="javascript:;">女装</a>/<a href="javascript:;">童装</a>/<a href="javascript:;">内衣</a></li>
						<li><a href="javascript:;">美妆</a>/<a href="javascript:;">个护清洁</a>/<a href="javascript:;">宠物</a></li>
						<li><a href="javascript:;">女鞋</a>/<a href="javascript:;">箱包</a>/<a href="javascript:;">钟表</a>/<a href="javascript:;">珠宝</a></li>
						<li><a href="javascript:;">男鞋</a>/<a href="javascript:;">运动</a>/<a href="javascript:;">户外</a></li>
						<li><a href="javascript:;">房产</a>/<a href="javascript:;">汽车</a>/<a href="javascript:;">汽车用品</a></li>
						<li><a href="javascript:;">母婴</a>/<a href="javascript:;">玩具乐器</a></li>
						<li><a href="javascript:;">食品</a>/<a href="javascript:;">酒类</a>/<a href="javascript:;">生鲜</a>/<a href="javascript:;">特产</a></li>
						<li><a href="javascript:;">艺术</a>/<a href="javascript:;">礼品鲜花</a>/<a href="javascript:;">农贸绿植</a></li>
						<li><a href="javascript:;">医药保健</a>/<a href="javascript:;">计生情趣</a></li>
						<li><a href="javascript:;">图文</a>/<a href="javascript:;">文娱</a>/<a href="javascript:;">教育</a>/<a href="javascript:;">电子书</a></li>
						<li><a href="javascript:;">机票</a>/<a href="javascript:;">酒店</a>/<a href="javascript:;">旅游</a>/<a href="javascript:;">生活</a></li>
						<li><a href="javascript:;">理财</a>/<a href="javascript:;">众筹</a>/<a href="javascript:;">白条</a>/<a href="javascript:;">保险</a></li>
						<li><a href="javascript:;">安装</a>/<a href="javascript:;">维修</a>/<a href="javascript:;">清洗</a>/<a href="javascript:;">二手</a></li>
						<li><a href="javascript:;">工业品</a></li>
					</ul>
				</div>
				<!--中间的banner容器  轮播图-->
				<div class="body-center-middle">
					<div class="banner" id="banner">
						<ul>
							<li><a href="javascript:;"><img id="bimg" src="./img/body00.webp" alt=""></a></li>
							<!-- <li><a href="javascript:;"><img src="./img/body02.webp" alt=""></a></li>
							<li><a href="javascript:;"><img src="./img/body03.webp" alt=""></a></li>
							<li><a href="javascript:;"><img src="./img/body04.webp" alt=""></a></li>
							<li><a href="javascript:;"><img src="./img/body05.webp" alt=""></a></li>
							<li><a href="javascript:;"><img src="./img/body000.webp" alt=""></a></li> -->
						</ul>
						<div class="pointer">
							<a class="bannerA" href="javascript:;" class="active"></a>
							<a class="bannerA" class="bannerA" href="javascript:;"></a>
							<a class="bannerA" href="javascript:;"></a>
							<a class="bannerA" href="javascript:;"></a>
							<a  class="bannerA" href="javascript:;"></a>
							<a class="bannerA" href="javascript:;"></a>
						</div>
						<div class="banner-last" id="last">
							<a href="javascript:;"><i class="fas fa-chevron-left"></i>
							</a>
						</div>
						<div class="banner-next" id="next">
							<a href="javascript:;"><i class="fas fa-chevron-right"></i></a>
						</div>
					</div>
				</div>
				<!--商品列表-->
				<div class="body-center-boxs">
					<div class="body-center-box"><img src="./img/body-boxs-01.webp" alt=""></div>
					<div class="body-center-box"><img src="./img/body-box-002.webp" alt=""></div>
					<div class="body-center-box"><img src="./img/body-box-00.webp" alt=""></div>
				</div>
				<!--欢迎界面-->
				<div class="body-center-right">
					<div class="body-center-right-top">
						<div class="user">
							<img src="./img/user.png" alt="">
						</div>
						<div class="user-tip">
							Hi-欢迎逛京东!
						</div>
						<div class="user-login"><a href="#">登陆</a></div>
						<div class="user-span">
							|
						</div>
						<div class="user-reg"><a href="#">注册</a></div>

						<div class="input">
							<div class="left">新人福利</div>
							<div class="right">PLUS会员</div>
						</div>

					</div>
					<span></span>
					<div class="body-center-right-middle">
						<div class="news-title">
							<h5>京东快报</h5>
							<a href="#">
								更多&nbsp;&nbsp;<i class="fas fa-angle-right"></i>
							</a>
						</div>
						<ul class="news-list">
							<li><a href="#">
									<p>热门</p>冲奶粉不作这个动做...
								</a></li>
							<li><a href="#">
									<p>推荐</p>2019年度TWS无坚不...
								</a></li>
							<li><a href="#">
									<p>热门</p>票友圈装优雅不较真...
								</a></li>
							<li><a href="#">
									<p>推荐</p>这是来自将来的手机...
								</a></li>
						</ul>
					</div>
					<span></span>
					<div class="body-center-right-bottom">
						<div class="box"><i class="fas fa-mobile-alt one"></i>
							<p>话费</p>
						</div>
						<div class="box"><i class="fas fa-plane two"></i>
							<p>机票</p>
						</div>
						<div class="box"><i class="fas fa-building three"></i>
							<p>酒店</p>
						</div>
						<div class="box"><i class="fas fa-gamepad two"></i>
							<p>游戏</p>
						</div>
						<div class="box"><i class="fas fa-tint three"></i>
							<p>加油卡</p>
						</div>
						<div class="box"><i class="fas fa-train five"></i>
							<p>火车票</p>
						</div>
						<div class="box"><i class="fas fa-users three"></i>
							<p>众筹</p>
						</div>
						<div class="box"><i class="fas fa-coins one"></i>
							<p>理财</p>
						</div>
						<div class="box"><i class="fas fa-copy five"></i>
							<p>白条</p>
						</div>
						<div class="box"><i class="fas fa-photo-video five"></i>
							<p>电影票</p>
						</div>
						<div class="box"><i class="fas fa-mosque one"></i>
							<p>企业购</p>
						</div>
						<div class="box"><i class="fas fa-credit-card two"></i>
							<p>礼品卡</p>
						</div>
					</div>
				</div>
				<!--京东秒杀-->
				<div class="time">
					<div class="time-one">
						<div class="time-one-title">
							<p>京东秒杀</p>
						</div>
						<div class="time-one-txt">
							<span>20:00</span>&nbsp;点场 倒计时
						</div>
						<div class="time-one-times">
							<div class="time-one-time" >
								10
							</div>
							<span>:</span>
							<div class="time-one-time" id="minute">
								05
							</div>
							<span>:</span>
							<div class="time-one-time" id="miao">
								00
							</div>
						</div>

					</div>
					<div class="time-box">
						<div class="time-box-img">
							<img src="./img/time-box-01.webp" alt="">
						</div>
						<div class="money">
							<p class="title">花花公子[正品保证]潮牌</p>
							<p>¥599.00&nbsp;<span>¥799.00</span></p>
						</div>
					</div>
					<div class="time-box">
						<div class="time-box-img">
							<img src="./img/time-box-02.webp" alt="">
						</div>
						<div class="money">
							<p class="title">顶瓜瓜冬季女士韩版潮流</p>
							<p>¥1099.00&nbsp;<span>¥1299.00</span></p>
						</div>
					</div>
					<div class="time-box">
						<div class="time-box-img">
							<img src="./img/time-box-03.webp" alt="">
						</div>
						<div class="money">
							<p class="title">高级砖石吊坠</p>
							<p>¥399.00&nbsp;<span>¥599.00</span></p>
						</div>
					</div>
					<div class="time-box">
						<div class="time-box-img">
							<img src="./img/time-box-04.webp" alt="">
						</div>
						<div class="money">
							<p class="title">高级懒人椅,还您一个头等舱体验</p>
							<p>¥599.00&nbsp;<span>¥799.00</span></p>
						</div>
					</div>
					<div class="time-box">
						<div class="time-box-img">
							<img src="./img/time-box-05.webp" alt="">
						</div>
						<div class="money">
							<p class="title">移动王卡,5G流量不限速</p>
							<p>¥19.00&nbsp;<span>¥20.00</span></p>
						</div>
					</div>
				</div>
				<!--数码潮电-->
				<div class="body-warp">
					<div class="boxs">
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-01.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>每满200减20</p>
								</div>
								<p class="center">生活服务</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-02.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>定金翻百倍</p>
								</div>
								<p class="center">建筑预售</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-03.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>果冻橙5斤16.8</p>
								</div>
								<p class="center">京心助农</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-04.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>领券满200减20</p>
								</div>
								<p class="center">京东生鲜</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-05.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>满269减50</p>
								</div>
								<p class="center">玩具乐器</p>
							</div>
						</div>

						<div class="box-01">
							<div class="box-box1">
								<img src="./img/box-box-01.webp" alt="">
							</div>
							<div class="box-box2">
								<img src="./img/box-box-02.webp" alt="">
							</div>



						</div>



						<div class="box">
							<div class="img">
								<img src="./img/body-warp-06.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>2件8折3件7折</p>
								</div>
								<p class="center">食品饮料</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-07.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>五折限量抢</p>
								</div>
								<p class="center">家装材料</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-08.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>领券满199减1000</p>
								</div>
								<p class="center">家居百货</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-09.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>每满300减40元</p>
								</div>
								<p class="center">服饰红包</p>
							</div>
						</div>
						<div class="box">
							<div class="img">
								<img src="./img/body-warp-10.webp" alt="">
							</div>
							<div class="bottom">
								<div class="body-warp-title">
									<p>定金10元抵50</p>
								</div>
								<p class="center">生鲜预售</p>
							</div>
						</div>
						<div class="box-01">
							<div class="box-box1">
								<img src="./img/box-box-03.webp" alt="">
							</div>
							<div class="box-box2">
								<img src="./img/box-box-03.webp_" alt="">
							</div>



						</div>

					</div>
				</div>
				<!--每日特价和品牌闪购-->
				<div class="body-center-nav">
					<!--每日特价-->
					<div class="body-center-nav-every">
						<div class="body-center-title">
							<h1>每日特价&nbsp;<i class="fas fa-chevron-circle-right"></i></h1>
							<div class="title-nav">
								<ul>
									<li class="active"><a href="javascript:;" class="active">精选</a></li>
									<li><a href="javascript:;">美食</a></li>
									<li><a href="javascript:;">百货</a></li>
									<li><a href="javascript:;">个护</a></li>
									<li><a href="javascript:;">预告</a></li>
								</ul>
							</div>
						</div>
						<div class="left">
							<div class="t">
								199天最低价
							</div>
							<div class="img">
								<img src="./img/everyday.webp" alt="">
							</div>
							<h2>半球不粘锅电饭煲</h2>
							<h3>¥78 <span>¥119</span></h3>
						</div>
						<div class="right">
							<div class="right-01">
								<div class="img">
									<img src="./img/left-01.webp" alt="">
									<p>198天最低价</p>
								</div>
								<div class="name">
									<p>雷士照明(NVC)LED吸顶部</p>
									<p class="now">¥39</p>
									<p class="log">¥79</p>
								</div>
							</div>
							<div class="right-01">
								<div class="img">
									<img src="./img/left-02.webp" alt="">
									<p>219天最低价</p>
								</div>
								<div class="name">
									<p>电脑音箱多媒体蓝牙音箱低</p>
									<p class="now">¥39.8</p>
									<p class="log">¥66.9</p>
								</div>
							</div>
							<div class="right-01">
								<div class="img">
									<img src="./img/left-03.webp" alt="">
									<p>66天最低价</p>
								</div>
								<div class="name">
									<p>五斤装大果红富士苹果现摘</p>
									<p class="now">¥24.8</p>
									<p class="log">¥39.9</p>
								</div>
							</div>
							<div class="right-01">
								<div class="img">
									<img src="./img/left-04.webp" alt="">
									<p>205天最低价</p>
								</div>
								<div class="name">
									<p>康佳消毒柜家用立式大容量</p>
									<p class="now">¥299</p>
									<p class="log">¥499</p>
								</div>
							</div>
						</div>
					</div>
					<!--品牌闪购-->
					<div class="body-center-nav-brand">
						<div class="body-center-title">
							<h1>品牌闪购&nbsp;<i class="fas fa-chevron-circle-right"></i></h1>
						</div>
						<div class="left">
							<div class="img">
								<img src="./img/right-01.webp" alt="">
							</div>
						</div>
						<div class="right">
							<div class="right-box">
								<div class="img">
									<img src="./img/right-02.webp" alt="">
								</div>
								<p>户外家具专场</p>
							</div>
							<div class="right-box">
								<div class="img">
									<img src="./img/right-03.webp" alt="">
								</div>
								<p>万代潮玩专场</p>
							</div>
							<div class="right-box">
								<div class="img">
									<img src="./img/right-04.webp" alt="">
								</div>
								<p>GLOBBER大牌闪购</p>
							</div>
							<div class="right-box">
								<div class="img">
									<img src="./img/right-05.webp" alt="">
								</div>
								<p>妈妈装大促狂欢</p>
							</div>
							<div class="right-box">
								<div class="img">
									<img src="./img/right-06.webp" alt="">
								</div>
								<p>清洁工具双11疯抢</p>
							</div>
							<div class="right-box">
								<div class="img">
									<img src="./img/right-07.webp" alt="">
								</div>
								<p>潮流女包闪购</p>
							</div>
						</div>
					</div>
				</div>
				<!--发现好货-->
				<div class="look">
					<div class="left">
						<div class="left-text">
							<img src="./img/YCU@MMH~T$(HXSJF0(IS_)6.png" alt="">
						</div>
					</div>
					<div class="right">
						<div class="right-box">
							<div class="img">
								<img src="./img/look-01.webp" alt="">
							</div>
							<p>稻草人 连帽 卫衣</p>
						</div>
						<div class="right-boxx">
							<p>SWICKY 大容量 双肩包</p>
							<div class="img">
								<img src="./img/look-02.webp" alt="">
							</div>
						</div>
						<div class="right-box">
							<div class="img">
								<img src="./img/llook-03.webp" alt="">
							</div>
							<p>天逸 防水 骑行包</p>
						</div>
						<div class="right-boxx">
							<p>出差旅行好物 二合一</p>
							<div class="img">
								<img src="./img/look-04.webp" alt="">
							</div>
						</div>
						<div class="right-box">
							<div class="img">
								<img src="./img/look-05.webp" alt="">
							</div>
							<p>麦格霍斯 尼龙直式</p>
						</div>
					</div>
				</div>
				<!--新品首发、排行榜、逛好店、领券中心-->
				<div class="news">
					<!--新品首发-->
					<div class="news-one">
						<div class="box-hd">
							<p>新品首发 <i class="fas fa-chevron-circle-right"></i></p>
						</div>
						<div class="img">
							<img src="./img/news-01.webp" alt="">
						</div>
						<p class="news-top">华为 HUAWEI P40 麒麟990 5G</p>
						<p class="under">来这里发现更多新品</p>
						<p class="foot"><span>4188.00</span></p>
					</div>
					<!--排行榜-->
					<div class="news-two">
						<div class="box-hd">
							<p>新品首发 <i class="fas fa-chevron-circle-right"></i></p>
						</div>
						<div class="box-nav">
							<ul>
								<li><a href="javascript:;" class="active">手机</a></li>
								<li><a href="javascript:;">你们电</a></li>
								<li><a href="javascript:;">休闲食品</a></li>
								<li><a href="javascript:;">电脑整机</a></li>
							</ul>
						</div>
						<div class="shops">
							<div class="top">
								<div class="left">
									<p>TOP</p>
									<h3>01</h3>
								</div>
								<div class="img">
									<img src="./img/shops-01.webp" alt="">
								</div>
								<div class="title">Apple iPhone 11(2223)128GB 黑色</div>

							</div>
							<div class="middle">
								<div class="left">
									<p>TOP</p>
									<h3>02</h3>
								</div>
								<div class="img">
									<img src="./img/shops-02.webp" alt="">
								</div>
								<div class="title">Apple iPhone 11(2223)128GB 黑色</div>

							</div>
							<div class="foot">
								<div class="left">
									<p>TOP</p>
									<h3>01</h3>
								</div>
								<div class="img">
									<img src="./img/shops-03.webp" alt="">
								</div>
								<div class="title">Apple iPhone 11(2223)128GB 黑色</div>

							</div>
						</div>


					</div>
					<!--逛好店-->
					<div class="news-three">
						<div class="box-hd">
							<p>逛好店 <i class="fas fa-chevron-circle-right"></i></p>
						</div>
						<div class="box-01">
							<div class="left">
								<div class="left-top">
									<p>嘉宝京东自营旗舰店</p>
								</div>
								<div class="left-middle">
									<p class="a">自营</p>
									<p class="b">育儿心经</p>

								</div>
								<div class="left-foot">
									<p>306.5万人关注</p>
								</div>
							</div>
							<div class="img">
								<img src="./img/box-01-01.webp" alt="">
							</div>
						</div>
						<div class="box-02">
							<div class="left">
								<div class="left-top">
									<p>臻火旗舰店</p>
								</div>
								<div class="left-middle">
									<p class="a">潮流3C</p>


								</div>
								<div class="left-foot">
									<p>17.0万人关注</p>
								</div>
							</div>
							<div class="img">
								<img src="./img/box-02-01.webp" alt="">
							</div>
						</div>
					</div>
					<!--领券中心-->
					<div class="news-four">
						<div class="box-hd">
							<p>领券中心 <i class="fas fa-chevron-circle-right"></i></p>
						</div>
						<ul class="gift">
							<li>
								<div class="img">
									<img src="./img/box-four-01.webp" alt="">
								</div>
								<div class="right">
									<p><span>50</span></p>
									<p class="a">
										满500元可用 </p>
									<p class="b">
										仅可购买雅诗兰黛品牌...
									</p>
								</div>
								<div class="more">
									<p>更多好货</p>
								</div>
							</li>
							<li>
								<div class="img">
									<img src="./img/gift-01.webp" alt="">
								</div>
								<div class="right">
									<p><span>150</span></p>
									<p class="a">
										满699元可用 </p>
									<p class="b">
										仅可购买OLAY品牌部分...
									</p>
								</div>
								<div class="more">
									<p>更多好货</p>
								</div>
							</li>
							<li>
								<div class="img">
									<img src="./img/gift-02.webp" alt="">
								</div>
								<div class="right">
									<p><span>50</span></p>
									<p class="a">
										满51元可用 </p>
									<p class="b">
										仅可购买自营水洗部分...
									</p>
								</div>
								<div class="more">
									<p>更多好货</p>
								</div>
							</li>
						</ul>
					</div>
					<!-- </div> -->
					<!--频道广场-->
					<div class="square">
						<div class="square-title">
							<p>频道广场</p>
						</div>
						<div class="center">
							<div class="square-nav">
								<img src="./img/square-01.webp" alt="">
							</div>
							<div class="square-nav">
								<img src="./img/square-02.webp" alt="">
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>电脑办公</p>
									<span>科技潮物 惠享不停</span>
								</div>
								<div class="img">
									<img src="./img/square-03.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-04.webp" alt="">
								</div>
							</div>
							<div class="square-box1">
								<div class="square-box-title">
									<p>生鲜馆</p>
									<span>尝遍天下鲜</span>
								</div>
								<div class="img">
									<img src="./img/square-05.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-06.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>京东国际</p>
									<span>一站尽享进口好物</span>
								</div>
								<div class="img">
									<img src="./img/square-07.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-08.webp" alt="">
								</div>
							</div>
							<div class="square-box1">
								<div class="square-box-title">
									<p>智能数码</p>
									<span>尽享好物</span>
								</div>
								<div class="img">
									<img src="./img/square-09.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-10.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>企业购</p>
									<span>一站式企业采购平台</span>
								</div>
								<div class="img">
									<img src="./img/square-11.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-12.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>京东超市</p>
									<span>一站式国际囤好物</span>
								</div>
								<div class="img">
									<img src="./img/square-13.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-14.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>家装城</p>
									<span>用心装好家一站式购齐</span>
								</div>
								<div class="img">
									<img src="./img/square-15.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-16.webp" alt="">
								</div>
							</div>
							<div class="square-box1">
								<div class="square-box-title">
									<p>汽车生活</p>
									<span>放心养车 爱车无忧</span>
								</div>
								<div class="img">
									<img src="./img/square-17.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-18.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>JOY寻宝</p>
									<span>懂你的JOY</span>
								</div>
								<div class="img">
									<img src="./img/square-19.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-20.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>食品饮料</p>
									<span>吃货嘉年华</span>
								</div>
								<div class="img">
									<img src="./img/square-21.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-22.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>玩3C</p>
									<span>潮流电子 炫酷来袭</span>
								</div>
								<div class="img">
									<img src="./img/square-23.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-24.webp" alt="">
								</div>
							</div>
							<div class="square-box1">
								<div class="square-box-title">
									<p>京东京造</p>
									<span>京东自有品牌</span>
								</div>
								<div class="img">
									<img src="./img/square-25.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-26.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>新机首发</p>
									<span>有新机更有范</span>
								</div>
								<div class="img">
									<img src="./img/square-27.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-28.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>京东金融</p>
									<span>会理财 懂生活</span>
								</div>
								<div class="img">
									<img src="./img/square-29.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-30.webp" alt="">
								</div>
							</div>
							<div class="square-box">
								<div class="square-box-title">
									<p>京东工业品</p>
									<span>一站式工业品采购</span>
								</div>
								<div class="img">
									<img src="./img/square-31.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-32.webp" alt="">
								</div>
							</div>
							<div class="square-box1">
								<div class="square-box-title">
									<p>企业好店</p>
									<span>企业用户都在逛</span>
								</div>
								<div class="img">
									<img src="./img/square-33.webp" alt="">
								</div>
								<div class="img">
									<img src="./img/square-34.webp" alt="">
								</div>
							</div>
						</div>
					</div>
					<!--为你推荐-->
					<div class="recommend">
						<div class="recommend-title">
							<p>为你推荐</p>
						</div>
						<div class="recommend-nav">
							<ul>
								<li><a href="#" class="active">精选</a></li>
								<span></span>
								<li><a href="#">智能先锋</a></li>
								<span></span>
								<li><a href="#">居家优品</a></li>
								<span></span>
								<li><a href="#">超市百货</a></li>
								<span></span>
								<li><a href="#">时尚达人</a></li>
								<span></span>
								<li><a href="#">进口好物</a></li>
							</ul>
						</div>

						<div class="recommend-center">
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-01.webp" alt="">
								</div>
								<div class="title">
									<p>【品牌直营】厨房地垫脚垫防滑防油家用进门防水垫子吸...</p>
								</div>
								<div class="rmb">
									<p><span>98</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-02.webp" alt="">
								</div>
								<div class="title">
									<p>立久佳X7跑步机家用智能生态款 职位华为运动健康手表...</p>
								</div>
								<div class="rmb">
									<p><span>1899</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-03.webp" alt="">
								</div>
								<div class="title">
									<p>【品牌直营】餐边柜 碗柜现代简约靠墙家用厨房储物柜...</p>
								</div>
								<div class="rmb">
									<p><span>538</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-04.webp" alt="">
								</div>
								<div class="title">
									<p>Tata/他她冬专柜同款牛皮革马丁靴拉链厚底女短靴WGK01...</p>
								</div>
								<div class="rmb">
									<p><span>599</span>.00</p>
								</div>
							</div>
							<div class="recommend-box1">
								<div class="img">
									<img src="./img/recommend-05.webp" alt="">
								</div>
								<div class="title">
									<p>车载洗车器 12v水泵高压洗车清洁简易便携式自吸电动...</p>
								</div>
								<div class="rmb">
									<p><span>129</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-06.webp" alt="">
								</div>
								<div class="title">
									<p>皓顿HAUT TON男靴马丁靴男中高帮时尚休闲皮靴</p>
								</div>
								<div class="rmb">
									<p><span>338</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-07.webp" alt="">
								</div>
								<div class="title">
									<p>厨房不锈钢支架盆水槽双槽带水斗池盆架洗菜洗脸洗碗...</p>
								</div>
								<div class="rmb">
									<p><span>288</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-08.webp" alt="">
								</div>
								<div class="title">
									<p>香奈儿(Chanel)口红炫亮魅力丝绒58#哑光女士情人生日...</p>
								</div>
								<div class="rmb">
									<p><span>258</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-09.webp" alt="">
								</div>
								<div class="title">
									<p>INS北欧风超大原点饼干地垫儿童游戏垫账篷地垫儿童房...</p>
								</div>
								<div class="rmb">
									<p><span>389</span>.00</p>
								</div>
							</div>
							<div class="recommend-box1">
								<div class="img">
									<img src="./img/recommend-10.webp" alt="">
								</div>
								<div class="title">
									<p>Columbia哥伦比亚户外20秋冬新品男子650篷热能热压...</p>
								</div>
								<div class="rmb">
									<p><span>799</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-11.webp" alt="">
								</div>
								<div class="title">
									<p>可加热泡面碗带盖日式大容量易清洗微波炉可用网红玻璃...</p>
								</div>
								<div class="rmb">
									<p><span>80</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-12.webp" alt="">
								</div>
								<div class="title">
									<p>九牧(JOMOO)挂件毛巾架浴巾架套太空铝五金挂件...</p>
								</div>
								<div class="rmb">
									<p><span>459</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-13.webp" alt="">
								</div>
								<div class="title">
									<p>惜惜缘软门帘夏季防蚊空调透明PVC塑料防风挡风隔断帘...</p>
								</div>
								<div class="rmb">
									<p><span>89</span>.00</p>
								</div>
							</div>
							<div class="recommend-box">
								<div class="img">
									<img src="./img/recommend-14.webp" alt="">
								</div>
								<div class="title">
									<p>vvs【包安装】网红款现代简约灯具套餐led客厅灯吸顶灯...</p>
								</div>
								<div class="rmb">
									<p><span>4288</span>.00</p>
								</div>
							</div>
							<div class="recommend-box1">
								<div class="img">
									<img src="./img/recommend-15.webp" alt="">
								</div>
								<div class="title">
									<p>石茶盘 石头茶盘 自然黑金石功夫石茶台茶具托茶海排...</p>
								</div>
								<div class="rmb">
									<p><span>729</span>.00</p>
								</div>
							</div>
						</div>
					</div>
					<!--多快好省-->
					<div class="good">
						<ul>
							<li>
								<div class="div"></div>
								<span>品类齐全,轻松购物</span>
							</li>
							<li>
								<div class="div"></div>
								<span>多仓直发,急速配送</span>
							</li>
							<li>
								<div class="div"></div>
								<span>正品行货,精致服务</span>
							</li>
							<li class="a">
								<div class="div"></div>
								<span>每天低价,畅选无忧</span>
							</li>
						</ul>
					</div>
					<!--body-center的另外一半-->
				</div>
			</div>
			<!--结尾部分-->
			<div class="footer"></div>
			<!--body的另外一半-->
		</div>
		<!--网页结尾-->
		<div class="footer">
			<div class="footer-center">
				<div class="left">
					<ul>
						<li class="a"><p>购物信息</p>
		<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>
		</ul>				
						</li>
						<li class="a"><p>配送方式</p>
						<ul>
							<li><a href="#">上门自提</a></li>
							<li><a href="#">211限时达</a></li>
							<li><a href="#">配送服务查询</a></li>
							<li><a href="#">配送费收取标准</a></li>
							<li><a href="#">海外配送</a></li>
						</ul>
						</li>
						<li class="a"><p>支付方式</p>
						<ul>
							<li><a href="#">货到付款</a></li>
							<li><a href="#">在线支付</a></li>
							<li><a href="#">分期付款</a></li>
							<li><a href="#">公司转帐</a></li>
						</ul>
						</li>
						<li class="a"><p>售后服务</p>
						<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>
						</ul>
						</li>
						<li class="a"><p>特点服务</p>
						<ul>
							<li><a href="#">夺宝岛</a></li>
							<li><a href="#">DIY装机</a></li>
							<li><a href="#">延保服务</a></li>
							<li><a href="#">京东E卡</a></li>
							<li><a href="#">京东通讯</a></li>
							<li><a href="#">京鱼座智能</a></li>
						</ul>
						</li>
					</ul>
				</div>
				<div class="right">
					<p>京东自营覆盖区县</p>
					<p class="txt">
					京东已向全国2661个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。
					</p>
					<p class="details">
						<a href="#">查看详情 ></a>
					</p>
				</div>
			</div>
		</div>
		<!--版权信息-->
		<div class="footing">
			<div class="footing-center">
				<ul class="nav">
					<li><a href="">关于咱们</a></li>
					<span></span>
					<li><a href="">联系咱们</a></li>
					<span></span>
					<li><a href="">联系客服</a></li>
					<span></span>
					<li><a href="">合做招商</a></li>
					<span></span>
					<li><a href="">商家帮助</a></li>
					<span></span>
					<li><a href="">营销中心</a></li>
					<span></span>
					<li><a href="">手机京东</a></li>
					<span></span>
					<li><a href="">友情连接</a></li>
					<span></span>
					<li><a href="">销售联盟</a></li>
					<span></span>
					<li><a href="">京东社区</a></li>
					<span></span>
					<li><a href="">风险监测</a></li>
					<span></span>
					<li><a href="">隐私政策</a></li>
					<span></span>
					<li><a href="">京东公益</a></li>
					<span></span>
					<li><a href="">English Site</a></li>
					<span></span>
					<li><a href="">Media & IR</a></li>
				</ul>
			<div class="copyright">
			<a href="#">京公网安备 1100000000200088号</a> &nbsp;
			<a href="#">京ICP证070359号</a> &nbsp;
			<a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a> &nbsp;
			<a href="#">新出发京零 字第大120007号</a>
			<br>
			<a href="#">互联网出版许可证编号新出网证(京)字150号</a>
			<a href="#">出版物经营许可证</a>
			<a href="#">网络文化经营许可证京网文[2014]2148-348号</a>
			<a href="#">违法和不良信息举报电话:4006561155</a>
			<br>
			<a href="#">Copyright © 2004 - </a>
			&nbsp;
			<a href="#">消费者维权热线:4006067733</a>
			&nbsp;
			<a href="#">(京)网械平台备字(2018)第00003号</a>
			&nbsp;
			<a href="#">营业执照</a><br>
			<a href="#">京东旗下网站:京东钱包</a>
			&nbsp;
			<a href="#">京东智联云</a>
			</div>
			</div>
		</div>
	</body>
</html>
	

css文件夹的结构以下所示:

在这里插入图片描述
index.css代码以下:css

.top-img{
   
   
	position: relative;
}
.top-img .del{
   
   
	position: absolute;
	top: 10px;
	right: -130px;/* 随分辨率改变 */
	width: 20px;
	height: 20px;
}
.top-img .del img{
   
   
	width: 20px;
	height: 20px;
	cursor: pointer;
}

style.css代码以下:html

body {
   
   
	font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}

.header {
   
   
	background-color: #b3003d;
	cursor: pointer;
}

/* .top-img-left img{
	width: 190px;
	height: 80px;
	float: left;
} */
.top-img {
   
   
	/* float: left; */
	width: 1190px;
	height: 80px;
	margin: 0 auto;
}

.top {
   
   
	width: 100%;
	height: 31px;
	background-color: #e3e4e5;
	color: #999999;
}
.top-left{
   
   
	position: relative;
}
.top-left .position {
   
   
	float: left;
	position: relative;
	width: 58px;
	height: 30px;
	z-index: 9999;
	border-bottom: none;
	text-align: center;
	border: 1px solid transparent;
	/* background-color: white; */
}

.top-right {
   
   
	float: right;
}

.top i {
   
   
	font-size: 14px;
	color: #F10215;
}

.top .top-center {
   
   
	width: 1190px;
	height: 100%;
	line-height: 30px;
	margin: 0 auto;
}

.top-right li {
   
   
	float: left;
}

.top-right i.fa-sort-down {
   
   
	color: #999999;
	font-size: 12px;
}

.top-right .middle {
   
   
	width: 1px;
	height: 10px;
	background-color: #cfd0d0;
	float: left;
	margin-top: 12px;
	margin: 10px 15px;
}

.top-right .free {
   
   
	color: #F10215;
}

.top-right a {
   
   
	text-decoration: none;
	color: #999999;
}

.top-right a:hover {
   
   
	color: #F10215;
}

.top-left a {
   
   
	text-decoration: none;
	color: #F10215;
}

.top-left .chengshi {
   
   
	width: 260px;
	height: 470px;
	position: absolute;
	border: #999999 1px solid;
	background-color: white;
	box-shadow: 1px 1px 3px #999999;
	margin-left: -8px;
	/*随着电脑分辨率而改变*/
	z-index: 999;
	top: 30px;/**/
	left: 8px;
	padding: 10px;
	padding-top: 15px;
	padding-left: 13px;
	display: none;
}

.top-left .chengshi li {
   
   
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
}

.top-left .chengshi a {
   
   
	color: #999999;
	display: block;
	padding: 0px 5px;
}

.top-left .chengshi {
   
   
	color: #999999;
}

.top-left .chengshi .top-middle {
   
   
	width: 240px;
	/* height: 100px; */
	margin: 0 auto;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	float: left;
}

.top-left .top-middle li.a {
   
   
	margin-right: 100px;
	color: #999999;
	margin-top: 3px;
	margin-left: 6px;
	/*地区专享位置*/
}

.top-left .top-middle a:hover {
   
   
	color: #F10215;
	background-color: white;
}

.top-left .top-middle li.b {
   
   
	margin-right: 60px;
}

.top-left .chengshi a:hover {
   
   
	background-color: #CFD0D0;
	color: #F10215;
}

.top-left:hover .position {
   
   
	background-color: white;
	border: #999999 1px solid;
	border-bottom: none;
}

.top-left:hover .chengshi {
   
   
	display: block;
}

.top-left .top-left-foot .c {
   
   
	margin-left: 3px;
	margin-right: 100px;
}

.top-right .top-right-w {
   
   
	position: relative;
	border: 1px solid transparent;
	border-bottom: none;
	height: 31px;
	z-index: 9999;

}

.top-right .top-right-w:hover {
   
   
	background-color: white;
	border: 1px solid #999999;
	border-bottom: none;
}

.top-right .top-right-w:hover .top-right-my {
   
   
	display: block;
	border: 1px solid #999999;
	box-shadow: 1px 3px 3px #999999;
	border-top: none;

}

.top-right .top-right-my {
   
   
	width: 270px;
	position: absolute;
	height: 160px;
	padding: 10px;
	left: -1px;
	background-color: white;
	display: none;
	z-index: 999;
}

.top-right .top-right-my li {
   
   
	margin-right: 30px;
	margin-left: 30px;
}

.top-right .top-right-my .up {
   
   
	width: 100%;
	height: 100px;
	border-bottom: 1px #DEDEDE solid;

}

.top-right .top-right-my ul li.one {
   
   
	float: left;
	margin-left: 41px;
}

.top-right .top-right-my ul li.two {
   
   
	float: left;
	margin-left: 41px;
}

.top-right .two {
   
   
	position: relative;
	border: 1px solid transparent;
	z-index: 9999;

}

.top-right .two:hover {
   
   
	background-color: white;
	border: 1px solid #999999;
	border-bottom: none;
}

.top-right .two .two-show {
   
   
	width: 120px;
	height: 90px;
	position: absolute;
	background-color: white;
	padding: 10px;
	border: 1px solid #999999;
	box-shadow: 1px 3px 3px #999999;
	left: -1px;
	display: none;
	border-top: none;
	z-index: 999;
}

.top-right .two:hover .two-show {
   
   
	display: block;
	box-shadow: 1px 3px 3px #999999;


}

.top-right .two .two-show li {
   
   
	float: left;
	margin-right: 10px;

}

.top-right .three {
   
   
	position: relative;
	border: 1px solid transparent;
	height: 31px;
	z-index: 9999;
	border-bottom: none;
}

.top-right .three:hover {
   
   
	background-color: white;
	border: 1px solid #999999;
	border-bottom: none;
}

.top-right .three:hover .three-show {
   
   
	box-shadow: 1px 3px 3px #999999;
	display: block;

	border: 1px solid #999999;
	border-top: none;
}

.top-right .three-show {
   
   
	padding-top: 10px;
	z-index: 999;
	display: none;
	position: absolute;
	width: 160px;
	height: 310px;
	left: -102px;
	background-color: white;
	border: 1px solid transparent;
	border-top: none;
}

.top-right .three-show p {
   
   
	color: black;
	font-size: 13px;
	margin-left: 10px;
}

.top-right .three-show .s {
   
   
	border-bottom: 1px solid #CFD0D0;
	height: 190px;
}

.top-right .three-show li {
   
   
	margin-left: 10px;
	margin-right: 10px;
}

.top-right .four{
   
   
	position: relative;
}
.top-right .four .four-show {
   
   
	z-index: 9999;
	width: 1190px;
	height: 180px;
	margin: 0 auto;
	position: absolute;
	top: 30px;  /**/
	left: -1050px;  /*174*/
	/*由于分辨率不一样进行调整改变*/
	border: 1px solid #999999;
	border-top: none;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 1px 3px 3px #999999;
	background-color: white;
}

.top-right .four-show-one {
   
   
	padding-left: 30px;
	width: 330px;
	height: 170px;
	border-right: 1px #CFD0D0 solid;
	float: left;
}

.top-right .four-show li {
   
   
	margin-right: 30px;
}

.top-right .four-show p {
   
   
	font-size: 13px;
	color: #000000;
}

.top-right .four-show-two {
   
   
	padding-left: 20px;
	width: 230px;
	height: 170px;
	float: left;
	border-right: 1px #CFD0D0 solid;
}

.top-right .four-show-three {
   
   
	padding-left: 20px;
	width: 230px;
	height: 170px;
	float: left;
	border-right: 1px #CFD0D0 solid;
	background-color: white;
}

.top-right .four-show-four {
   
   
	padding-left: 20px;
	width: 300px;
	height: 170px;
	float: left;

}

.top-right .four {
   
   
	height: 31px;
}

.top-right .four:hover {
   
   
	background-color: white;
}

.top-right .four:hover .four-show {
   
   
	background-color: white;
	display: block;
}

.top-right .four-show {
   
   
	display: none;
}

.find {
   
   
	/* margin-top: 1px; */
	width: 100%;
	height: 141px;
	/* background-color: #999999; */
	box-shadow: 0px 3px 3px #CFD0D0;
	border-bottom: 1px solid #e7e7e7;
}

.find .find-center {
   
   
	width: 1190px;
	height: 141px;
	margin: 0 auto;
	/* background-color: #F10215; */
}

.find .find-center .logo {
   
   
	clear: both;
	position: relative;
	/* margin-left: -60px; */
	width: 190px;
	height: 131px;
	float: left;
	/* background-color: greenyellow; */

	padding-top: 10px;
}

.find .find-center .logo img {
   
   
	width: 100%
}

.find .find-center .find-center-middle {
   
   
	width: 790px;
	height: 141px;
	/* background-color: #ffff00; */
	float: left;
	margin-left: -20px;
}

.find .find-center-middle .look {
   
   
	width: 740px;
	height: 40px;

	margin: 20px auto;
	margin-left: 30px;
	/**/
}

.find-center-middle input {
   
   
	/* margin-top: 25px; */

	/* margin-left: 70px; */
	width: 500px;
	height: 36px;
	float: left;
	text-indent: 1em;
	margin-left: 25px;
}

.input-box {
   
   
	width: 50px;
	height: 40px;
	border: 1px solid #000000;
	float: left;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	color: white;
	background-color: #E12518;
	cursor: pointer;
	/* margin-left: 25px; */
}

.input-box:hover {
   
   
	background-color: #b91b13;
}

.find-center-middle .look-up {
   
   
	width: 560px;
	height: 30px;
	/*随电脑分辨率而改变*/

	margin: 0 auto;
	margin-left: 60px;
	margin-top: -20px;
	line-height: 30px;
	font-size: 12px;
}

.find-center-middle .look-up li {
   
   
	float: left;
	margin-right: 10px;
}

.find-center-middle .look-up span {
   
   
	color: #B91B13;
}

.find-center-middle .look-up a {
   
   
	text-decoration: none;
	color: #999999;
}

.find-center-middle .look-up a:hover {
   
   
	color: #B91B13;
}

.find-center-middle .look-under {
   
   
	width: 700px;
	height: 40px;


	position: relative;
	margin: 0 auto;
	margin-top: 10px;
	/*因电脑分辨率而改变*/
	line-height: 40px;
}

.find .look-under li {
   
   
	float: left;
	margin-right: 15px;
}

.find .look-under a {
   
   
	text-decoration: none;
	color: #333333;
	font-size: 15px;
}

.find .look-under a:hover {
   
   
	color: #B91B13;
}

.find .look-under span {
   
   
	color: #E1252B;
	font-weight: bolder;
}

.find .find-center-middle .look-buy {
   
   
	width: 150px;
	height: 40px;
	border: 1px #DEDEDE solid;
	float: right;
	margin-right: -15px;
	text-align: center;
	line-height: 40px;
}

.find .find-center-middle .look-buy i {
   
   
	color: orangered;
}

.find .find-center-middle .look-buy:hover {
   
   
	border: 1px solid red;
}

.find .find-center .find-right {
   
   
	width: 210px;
	height: 30px;
	float: left;
	margin-left: 0px;
	cursor: pointer;
}

.find .find-center .find-right img {
   
   
	width: 100%;
}

.body {
   
   
	background: url(../img/body1.webp) 50% 0px no-repeat;
	width: 100%;
	height: 4750px;
	/*内容高度,可改变,随分辨率变化*/
	background-color: #f4f4f4;
	padding-top: 10px;
}

.body .body-center {
   
   
	width: 1190px;
	height: 100%;
	/* background-color: #E1252B; */
	margin: 0 auto;
}

.body .body-center .body-center-left {
   
   
	width: 190px;
	height: 450px;
	background-color: white;
	float: left;
	padding: 10px 0;
	color: #636363;
	overflow: hidden;
}

.body .body-center .body-center-left li {
   
   
	width: 100%;
	transition: all 0.2s;
	text-indent: 2em;
	padding: 2.1px 0;
}

.body .body-center .body-center-left li:hover {
   
   
	background-color: #d9d9d9;
}

.body .body-center .body-center-left a {
   
   
	font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
	font-size: 14px;
	color: #333333;
	text-decoration: none;
}

.body .body-center .body-center-left a:hover {
   
   
	color: #B91B13;
}

.body .body-center .body-center-middle {
   
   
	float: left;
	width: 590px;
	height: 470px;
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
}

/*设置轮播图的样式*/
.body .body-center .body-center-middle ul {
   
   
	width: 590px;
	height: 470px;
}

.body .body-center .body-center-middle img {
   
   
	width: 590px;
	height: 470px;

}

.body .body-center .body-center-middle li {
   
   
	position: absolute;
}

/*设置导航点的样式*/
.body .body-center .body-center-middle .pointer {
   
   
	z-index: 9999;
	position: absolute;
	bottom: 20px;
	left: 10px;
}

.body .body-center .body-center-middle .pointer a {
   
   
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255, .5);
	margin-left: 4px;
	border-radius: 50%;
	float: left;
	/*将背景颜色值设置到内容区*/
	background-clip: content-box;
	border: transparent 2px solid;
}

.body .body-center .body-center-middle .pointer .active,
.body .body-center .body-center-middle .pointer a:hover {
   
   
	background-color: white;
	border: 2px solid rgba(255, 255, 255, .5);
}

.body .body-center .body-center-middle .banner-last {
   
   
	left: 0px;
	background-color: #c5c5c5;
	opacity: 0.6;
	width: 25px;
	height: 45px;
	line-height: 45px;
	top: 200px;
	bottom: 0px;
	color: whitesmoke;
	text-align: center;
	font-size: 20px;
	position: absolute;
	cursor: pointer;
}

.body .body-center .body-center-middle .banner-last:hover {
   
   
	background-color: #999999;
}

.body .body-center .body-center-middle .banner-next:hover {
   
   
	background-color: #999999;
}

.body .body-center .body-center-middle .banner-next {
   
   
	right: 0px;
	background-color: #c5c5c5;
	opacity: 0.6;
	width: 25px;
	height: 45px;
	line-height: 45px;
	top: 200px;
	bottom: 0px;
	color: whitesmoke;
	text-align: center;
	font-size: 20px;
	position: absolute;
	cursor: pointer;
}

.banner-last i,
.banner-next i {
   
   
	color: whitesmoke;
}

.body .body-center .body-center-boxs {
   
   
	float: left;
	margin-right: 10px;
	width: 190px;
	height: 470px;
	/* background-color: white; */
}

.body .body-center .body-center-boxs .body-center-box {
   
   
	display: block;
	cursor: pointer;
	width: 190px;
	height: 150px;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	transition: all 0.6s;
}

.body .body-center .body-center-boxs .body-center-box:hover {
   
   
	transform: scale(1.1);
}

.body .body-center .body-center-boxs .body-center-box img {
   
   
	/* transition: all 1s; */
	width: 190px;
	height: 150px;
}

.body .body-center .body-center-right {
   
   
	float: left;
	width: 190px;
	height: 470px;
	background-color: white;
}

.body .body-center .body-center-right .body-center-right-top {
   
   
	width: 190px;
	height: 100px;

	float: left;
}

.body-center-right .body-center-right-top .user {
   
   
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 10px;
	margin-left: 20px;
	float: left;
	cursor: pointer;
}

.body-center-right .body-center-right-top .user-tip {
   
   
	color: #666666;
	font-size: 12px;
	line-height: 50px;
	float: left;
	margin-left: 16px;
}

.body-center-right .body-center-right-top .user-login a {
   
   
	text-decoration: none;
	color: #333333;
	font-size: 12px;
	float: left;
	margin-top: -10px;
	/*因电脑分辨率不一样进行改变*/
	margin-left: 16px;
}

.body-center-right .body-center-right-top .user-login a:hover,
.body-center-right .body-center-right-top .user-reg a:hover {
   
   
	color: #c81623;
}

.body-center-right .body-center-right-top .user-reg a {
   
   
	text-decoration: none;
	color: #333333;
	font-size: 12px;
	float: left;
	margin-top: -10px;
}

.body-center-right .body-center-right-top .user-span {
   
   
	float: left;
	margin: 0 5px;
	margin-top: -10px;

}

.body-center-right .body-center-right-top .user img {
   
   
	width: 44px;
	height: 44px;
}

.body-center-right .body-center-right-top .input {
   
   
	width: 190px;
	height: 30px;
	float: left;
	padding: 10px 0;
}

.body-center-right .body-center-right-top .input .left {
   
   
	width: 70px;
	height: 25px;
	background-color: #e1251b;
	float: left;
	margin-left: 20px;
	border-radius: 20px;
	color: white;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
}

.body-center-right .body-center-right-top .input .left:hover {
   
   
	background-color: #c81623;
	color: white;
}

.body-center-right .body-center-right-top .input .right {
   
   
	width: 70px;
	height: 25px;
	background-color: #363634;
	margin-left: 10px;
	color: #e5d790;
	float: left;
	border-radius: 20px;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
}

.body-center-right .body-center-right-top .input .right:hover {
   
   
	background-color: #c81623;
	color: white;
}

.body .body-center .body-center-right .body-center-right-middle {
   
   
	padding: 0 10px;
	width: 170px;
	height: 130px;
	float: left;
	margin: 4px 0;
}

.body-center-right .body-center-right-middle .news-title {
   
   
	width: 190px;
	height: 30px;

}

.body-center-right .body-center-right-middle .news-title h5 {
   
   
	font-size: 14px;
	color: #333333;
	float: left;
	font-weight: bolder;
}

.body-center-right .body-center-right-middle .news-title a {
   
   
	text-decoration: none;
	color: #999999;
	float: left;
	margin-top: 3px;
	margin-left: 70px;
	/*因分辨率不用而改变*/
}

.body-center-right .body-center-right-middle .news-title a:hover {
   
   
	color: #c81623;
}

.body-center-right .body-center-right-middle .news-list {
   
   
	width: 170px;
	height: 88px;
	/* background-color: lightblue; */
}

.body-center-right .body-center-right-middle .news-list li {
   
   
	margin-bottom: 5px;
	/* float: left; */

}

.body-center-right .body-center-right-middle .news-list p {
   
   
	width: 35px;
	height: 16px;
	background-color: rgba(225, 37, 27, .08);
	text-align: center;
	float: left;
	margin-right: 12px;
	color: #e1251b;
}

.body-center-right .body-center-right-middle .news-list a {
   
   
	text-decoration: none;
	color: #666666;
}

.body-center-right .body-center-right-middle .news-list a:hover {
   
   
	color: #E1251B;
}

.body .body-center .body-center-right .body-center-right-bottom {
   
   
	width: 190px;
	height: 230px;
	/* background-color: #00ff7f; */
	float: left;

}

.body-center-right .body-center-right-bottom .box {
   
   
	width: 62px;
	height: 49px;
	float: left;
	padding-top: 7px;

	margin-right: 1px;
	margin-bottom: 1px;
	text-align: center;
	font-size: 12px;
	color: #333333;
	cursor: pointer;
}

.body-center-right .body-center-right-bottom .box i.one {
   
   
	font-size: 27px;
	color: cornflowerblue;
	margin-bottom: 5px;
}

.body-center-right .body-center-right-bottom .box i.two {
   
   
	font-size: 27px;
	color: #f2a234;
	margin-bottom: 5px;
}

.body-center-right .body-center-right-bottom .box i.three {
   
   
	font-size: 27px;
	color: #46d8c8;
	margin-bottom: 5px;
}

.body-center-right .body-center-right-bottom .box i.five {
   
   
	font-size: 27px;
	color: #ea665d;
	margin-bottom: 5px;
}

.body-center-right .body-center-right-bottom .box i:hover,
.body-center-right .body-center-right-bottom .box {
   
   
	color: #B91B13;
}

.body .body-center .body-center-right span {
   
   
	width: 130px;
	height: 1px;
	background-color: #999999;
	margin: auto;
	margin-left: 25px;
	float: left;
	display: block;
}

.body .time {
   
   
	width: 100%;
	height: 260px;
	background-color: azure;
	float: left;
	margin-top: 20px;
	position: relative;
}

.time .time-one {
   
   
	width: 190px;
	height: 260px;
	background-color: red;
	float: left;
	background-image: url(../img/time.png);
	background-size: cover;
	text-align: center;
}

.time .time-one-title {
   
   
	font-size: 30px;
	color: #fff;
	margin-top: 30px;
	font-weight: bolder;
}

.time .time-one-txt span {
   
   
	color: white;
	font-weight: bolder;
	font-size: 18px;
}

.time .time-one-times {
   
   
	width: 130px;
	height: 30px;
	/* background-color: #00FFFF; */
	margin: 10px auto;
}

.time .time-one-time {
   
   
	width: 30px;
	height: 30px;
	background-color: black;
	float: left;
	color: white;
	text-align: center;
	line-height: 30px;
	font-size: 20px;
	font-weight: bolder;
}

.time .time-one-times span {
   
   
	float: left;
	font-size: 30px;
	line-height: 25px;
	color: #fff;
	margin: 0 6px;
}

.time .time-one-txt {
   
   
	font-size: 16px;
	color: #fff;
	margin-top: 90px;
}

.time .time-box {
   
   
	width: 199px;
	height: 230px;
	float: left;
	padding-top: 30px;
	text-align: center;
	background-color: white;
	border-right: 1px dashed #999999;
}

.time .time-box .time-box-img {
   
   
	width: 140px;
	height: 140px;
	margin-left: 30px;
	margin-bottom: 30px;
}

.time .time-box .time-box-img img {
   
   
	width: 140px;
	height: 140px;
}

.time .time-box .money {
   
   
	font-size: 16px;
	color: red;
}

.time .time-box .money span {
   
   
	color: #999999;
}

.time .time-box .money .title {
   
   
	font-size: 12px;
	color: #333333;
	margin-top: -3px;
	margin-bottom: 5px;
}

.body .body-warp {
   
   
	float: left;
	margin: 0 auto;
	width: 1270px;
	margin-left: -35px;
	/*随分辨率而改变*/
	height: 590px;
	margin-top: 30px;
	background-image: url(../img/center.webp);
	background-size: cover;
	/* cursor: pointer; */
}

.body .body-center .body-warp .boxs {
   
   
	padding-top: 150px;
	margin-left: 40px;
}

.body .body-center .body-warp .box {
   
   
	width: 190px;
	height: 210px;
	background-color: white;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.body .body-center .body-warp .box-01 {
   
   
	width: 190px;
	height: 210px;
	background-color: #cd0053;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.body .body-center .body-warp .box .img {
   
   
	width: 130px;
	height: 130px;
	margin: 0 auto;
}

.body .body-center .body-warp .box .img img {
   
   
	width: 130px;
	height: 130px;
}

.body .body-center .body-warp .box .body-warp-title {
   
   
	width: 174px;
	height: 30px;
	margin: 0 auto;
	margin-top: 10px;
	background: url(../img/body-warp-title.webp);
	background-size: cover;
	line-height: 30px;
	text-align: center;
	font-size: 17px;
	color: #FFFFFF;
	font-weight: 600;
}

.body .body-center .body-warp .bottom {
   
   
	width: 190px;
	height: 70px;
	background-color: #ffe485;
}

.body .body-center .body-warp .box .body-warp-title img {
   
   
	width: 174px;
	height: 30px;
}

.body .body-center .body-warp .box p.center {
   
   
	line-height: 20px;
	font-size: 16px;
	color: #DE452b;
	text-align: center;
	margin-top: 6px;
}

.body .body-center .body-warp .box-01 .box-box1 {
   
   
	width: 190px;
	height: 100px;
	margin-bottom: 10px;
}

.body .body-center .body-warp .box-01 .box-box1 img {
   
   
	width: 190px;
	height: 100px;
}

.body .body-center .body-warp .box-01 .box-box2 {
   
   
	width: 190px;
	height: 100px;
}

.body .body-center .body-warp .box-01 .box-box2 img {
   
   
	width: 190px;
	height: 100px;
}

.body .body-center .body-center-nav {
   
   
	width: 100%;
	height: 360px;
	/* background-color: #46D8C8; */
	float: left;
	margin-top: 30px;
}

.body-center .body-center-nav .body-center-nav-every {
   
   
	width: 590px;
	height: 360px;
	background-color: white;
	float: left;
	margin-right: 10px;
	text-align: center;
}

.body-center .body-center-nav .body-center-nav-brand {
   
   
	width: 590px;
	height: 360px;
	background-color: white;
	float: left;
}

.body-center .body-center-nav .body-center-title {
   
   
	width: 550px;
	height: 60px;
	/* background-color: aquamarine; */
	padding: 0 20px;
	line-height: 60px;
	font-size: 24px;
	font-weight: bolder;
	color: #333333;
}

.body-center .body-center-nav .body-center-title h1 {
   
   
	width: 150px;
	float: left;

}

.body-center .body-center-nav .body-center-title h1 i {
   
   
	font-size: 13px;
	color: #E12518;
}

.body-center .body-center-nav .title-nav {
   
   
	float: right;
	color: #000000;
	font-size: 14px;
}

.body-center .body-center-nav .title-nav li {
   
   
	float: left;
	margin-left: 20px;
}

.body-center .body-center-nav .title-nav li.active {
   
   
	border-bottom: red;
}

.body-center .body-center-nav .title-nav a {
   
   
	text-decoration: none;
	color: #999999;
}

.body-center .body-center-nav .title-nav a:hover,
.body-center .body-center-nav .title-nav a.active {
   
   
	color: #E12518;
}

.body-center .body-center-nav .body-center-nav-every .left {
   
   
	width: 170px;
	height: 250px;
	float: left;
	background-color: #f8f8f9;
	margin-top: 20px;
	margin-left: 20px;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-every .right {
   
   
	width: 380px;
	/*可改变*/
	height: 250px;
	float: right;
	margin-top: 20px;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 {
   
   
	width: 180px;
	height: 84px;
	/* background-color: red; */
	float: left;
	margin-right: 10px;
	margin-bottom: 60px;
	margin-top: 10px;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .img {
   
   
	width: 84px;
	height: 84px;
	float: left;
	z-index: 99;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .img p {
   
   
	width: 84px;
	height: 16px;
	z-index: 999;
	color: #FFFFFF;
	background-color: #000000;
	font-size: 12px;
	text-align: center;
	line-height: 16px;
	margin-top: -20px;
	/*因分辨率不一样而改变*/
	position: absolute;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p {
   
   
	width: 75px;
	height: 32px;
	float: left;
	color: #333333;
	font-size: 12px;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p.now {
   
   
	font-size: 14px;
	color: #E12518;
	margin-top: 17px;
	margin-bottom: -16px;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p.log {
   
   
	color: #999999;
	font-size: 12px;
	text-decoration: line-through;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p:hover {
   
   
	color: #B91B13;
}

.body-center .body-center-nav .body-center-nav-every .right .right-01 .img img {
   
   
	width: 84px;
	height: 84px;
}


.t {
   
   
	width: 90px;
	height: 24px;
	font-size: 12px;
	color: white;
	font-weight: bold;
	background-color: #f7a400;
	text-align: center;
	line-height: 24px;
}

.body-center .body-center-nav .body-center-nav-every .left .img {
   
   
	width: 120px;
	height: 120px;
	margin: 20px auto;
}

.body-center .body-center-nav .body-center-nav-every .left .img img {
   
   
	width: 120px;
	height: 120px;
}

.body-center .body-center-nav .body-center-nav-every h2 {
   
   
	font-size: 14px;
	color: #333333;
}

.body-center .body-center-nav .body-center-nav-every h3 {
   
   
	font-size: 18px;
	color: #e1251b;
}

.body-center .body-center-nav .body-center-nav-every h2:hover {
   
   
	color: #E12518;
}

.body-center .body-center-nav .body-center-nav-every h3 span {
   
   
	font-size: 12px;
	color: #999999;
	text-decoration: line-through;
}

.body-center .body-center-nav .body-center-nav-brand .left .img {
   
   
	width: 270px;
	height: 265px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}

.body-center .body-center-nav .body-center-nav-brand .left .img img {
   
   
	width: 270px;
	height: 265px;
	float: left;
}

.body-center .body-center-nav .body-center-nav-brand .right {
   
   
	width: 272px;
	height: 312px;
	float: right;
	margin-top: -20px;
	/*随电脑分辨率而改变*/
	margin-right: 10px;
	/*随电脑分辨率而改变*/
}

.body-center .body-center-nav .body-center-nav-brand .right .right-box {
   
   
	width: 135px;
	height: 100px;
	background-color: white;
	float: left;
	margin-right: 1px;
	margin-bottom: 5px;
	text-align: center;
}

.body-center .body-center-nav .body-center-nav-brand .right .right-box .img {
   
   
	width: 100px;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-brand .right .right-box p {
   
   
	color: #666666;
	font-size: 12px;
	margin-top: 3px;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-brand .right .right-box p:hover {
   
   
	color: #b5b5b5;
	font-size: 12px;
	margin-top: 3px;
	cursor: pointer;
}

.body-center .body-center-nav .body-center-nav-brand .right .right-box .img img {
   
   
	width: 100px;
	height: 50px;
}

.body .body-center .look {
   
   
	width: 100%;
	height: 260px;
	float: left;
	margin-top: 20px;
}

.body .body-center .look .left {
   
   
	width: 190px;
	height: 260px;
	background: url(../img/look.png) no-repeat;
	background-size: cover;
	overflow: hidden;
	cursor: pointer;
	float: left;
}

.body .body-center .look .left .left-text {
   
   
	width: 160px;
	height: 90px;
	background-color: black;
	margin: 20px auto;
}

.body .body-center .look .left .left-text img {
   
   
	width: 160px;
	height: 90px;

}

.body .body-center .look .right {
   
   
	width: 990px;
	height: 100%;
	float: right;
	background-color: white;
}

.body .body-center .look .right .right-box {
   
   
	width: 190px;
	height: 100%;
	background-color: white;
	float: left;
	margin-left: 8px;
	cursor: pointer;
	text-align: center;
}

.body .body-center .look .right .right-box p {
   
   
	font-size: 14px;
	color: #333333;
}

.body .body-center .look .right .right-box .img {
   
   
	width: 150px;
	height: 150px;
	margin: 20px auto;
}

.body .body-center .look .right .right-box .img img {
   
   
	width: 150px;
	height: 150px;
}

.body .body-center .look .right .right-boxx {
   
   
	width: 190px;
	height: 100%;
	background-color: white;
	float: left;
	margin-left: 8px;
	cursor: pointer;
	text-align: center;
}

.body .body-center .look .right .right-boxx p {
   
   
	margin-top: 40px;
	font-size: 14px;
	color: #333333;
}

.body .body-center .look .right .right-boxx .img {
   
   
	width: 150px;
	height: 150px;
	margin: 30px auto;
}

.body .body-center .look .right .right-boxx .img img {
   
   
	width: 150px;
	height: 150px;

}

.body .body-center .news {
   
   
	width: 1190px;
	height: 340px;
	float: left;
	margin-top: 20px;
}

.body .body-center .news .news-one {
   
   
	float: left;
	width: 290px;
	height: 340px;
	margin-right: 10px;
	background-color: white;
	text-align: center;
}

.body .body-center .news .news-one .news-top {
   
   
	margin: 10px 0;
	margin-top: 20px;
	color: #333333;
	font-size: 14px;
}

.body .body-center .news .news-one .under {
   
   
	font-size: 12px;
	color: #999999;
}

.body .body-center .news .news-one .foot {
   
   
	margin-top: 20px;
	font-size: 14px;
	color: #E12518;
}

.body .body-center .news .news-one .foot span {
   
   
	font-size: 20px;
}

.body .body-center .news .news-two {
   
   
	float: left;
	width: 290px;
	height: 340px;
	margin-right: 10px;
	background-color: white;
}

.body .body-center .news .news-three {
   
   
	float: left;
	width: 290px;
	height: 340px;
	margin-right: 10px;
	background-color: white;
}

.body .body-center .news .news-four {
   
   
	background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/ab4b10750f3da259165a76e30074f504.png) no-repeat bottom;
	float: left;
	width: 290px;
	height: 340px;
	/* margin-right: 10px; */
	background-color: white;
}

.body .body-center .news .news-one .box-hd {
   
   
	width: 270px;
	padding-left: 20px;
	margin-left: -70px;
	font-size: 24px;
	color: #333333;
	line-height: 60px;
	height: 60px;
	font-weight: bolder;
}

.body .body-center .news .news-one .box-hd i {
   
   
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #F10215;
}

.body .body-center .news .news-one .img {
   
   
	width: 130px;
	height: 130px;
	margin: 0 auto;
	/* margin-top: 20px; */
}

.body .body-center .news .news-one .img img {
   
   
	width: 130px;
	height: 130px;
}

.body .body-center .news .news-two .box-hd {
   
   
	width: 270px;
	padding-left: 20px;
	font-size: 24px;
	color: #333333;
	line-height: 60px;
	height: 60px;
	font-weight: bolder;
}

.body .body-center .news .news-two .box-hd i {
   
   
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #F10215;
}

.body .body-center .news .news-two .box-nav a {
   
   
	float: left;
	width: 62px;
	height: 20px;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	color: #999999;
	background-color: #F6F6F6;
}

.body .body-center .news .news-two .box-nav a.active,
.body .body-center .news .news-two .box-nav a:hover {
   
   
	color: white;
	background-color: #E1251B;
}

.body .body-center .news .news-two .box-nav li {
   
   
	float: left;
	margin-left: 8px;
}

.body .body-center .news .news-two .shops {
   
   
	width: 275px;
	height: 230px;
	/* background-color: aqua; */
	float: left;
	margin-top: 20px;
}

.body .body-center .news .news-two .shops .top {
   
   
	background-color: white;
	width: 275px;
	height: 70px;
	overflow: hidden;
	float: left;
	/* line-height: 70px; */
}

.body .body-center .news .news-two .shops .top .left {
   
   
	width: 28.8px;
	height: 40.8px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAaVBMVEVHcEzytDjztTj1uDz0uTr1uDn0tz350H7ztjf0uDbztTn4ujfytDn/sjPytDT1u0L50X761Yj5yGn61Inztjn60X760X30tjr71orysy/71YXysSzytDP704H4yWf1u0T2wFD6znT3xFzUfyWDAAAAFHRSTlMA+NdQMJwZ8vJxrSmMCue95vLm8RaVWo4AAAC4SURBVHjabdHpEoMgDATgeBfPHoiIUtu+/0NWxrFbIPv3m0k2E7pWXG53GpkooyaqGLBmu7CgPwsHSr/XlQFl7DZLAKJfi2RA6ecsAV5TFqwbxIEbBPCbMqCs2ZsCvJMlIGgKQNNxigBNAeEgAE5ePcBzMAiApgCcHACeEwCeEwCaRuCaMoCTI8AgD9A0gPM5SZHnRfIHx8mpKGlPKdITHm5BndEvWX3AKPu2IS9N20tJg+goSieGL1haOxWou0aaAAAAAElFTkSuQmCC);
	background-size: cover;
	margin-top: 15px;
	/*随着分辨率进行改变*/
	margin-left: 10px;
	text-align: center;
	float: left;
	cursor: pointer;
}

.body-center .news .shops .top .left p {
   
   
	color: #E6aC36;
}

.body-center .news .shops .top .left h3 {
   
   
	margin-top: -5px;
	font-size: 18px;
	color: white;
	font-weight: bolder;
}

.body-center .news .shops .top .img {
   
   
	width: 70px;
	height: 70px;
	float: left;
	margin-left: 20px;
	cursor: pointer;
}

.body-center .news .shops .top .img img {
   
   
	width: 70px;
	height: 70px;
}

.body-center .news .shops .top .title {
   
   
	width: 140px;
	height: 36.4px;
	float: left;
	color: #333333;
	font-size: 14px;
	margin-top: 10px;
	margin-left: 1px;
	cursor: pointer;
}

.body-center .news .shops .top .title:hover {
   
   
	color: #e1251b;
}

.body .body-center .news .news-two .shops .middle {
   
   
	background-color: white;
	width: 275px;
	height: 70px;
	overflow: hidden;
	float: left;
	/* line-height: 70px; */
}

.body .body-center .news .news-two .shops .middle .left {
   
   
	width: 28.8px;
	height: 40.8px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAY1BMVEVHcEy/ubC/urHAvbS+uq6/urHHx7zV0cq+uq7CvLK/ua7Tz8bBv7TZ1c7EwLa9uK2/qqrBu7W6tqm/uq/W0sra1s+/uq68t6y+uK27tqrZ1c3X08vIw7nV0MjMx77DvrPRzcQ1PpfRAAAAE3RSTlMAcdVS9Z0X8vIwseaJ8r7kBmvygFfM5AAAAMBJREFUeNpt0esKgzAMBeB6m6t3F9vGZk7f/ynnCFpGcqC/PginHNPWWvrWLFri5k29yFDcXyq4z/rUwB2IGhBBAA3cewUN3BFQA1oAQQGK5yEG0RQ1iBsiKEC0ryCBm0rgpgrwlxUgPiQh8qEEaRwEBShy0wTpyyCBxxGQmkrgphL4yxJ4HAk8jgQeR8I1jvf8buBx0JeVtVXp8QZummcPc+aR5Rf0RwjYFOZO0Xj8AcHYWfMX242IZpgnIzLNwxdqBDiOHID/LwAAAABJRU5ErkJggg==);
	background-size: cover;
	margin-top: 15px;
	/*随着分辨率进行改变*/
	margin-left: 10px;
	text-align: center;
	float: left;
	cursor: pointer;
}

.body-center .news .shops .middle .left p {
   
   
	color: #B3aea4;
}

.body-center .news .shops .middle .left h3 {
   
   
	margin-top: -5px;
	font-size: 18px;
	color: white;
	font-weight: bolder;
}

.body-center .news .shops .middle .img {
   
   
	width: 70px;
	height: 70px;
	float: left;
	margin-left: 20px;

	cursor: pointer;
}

.body-center .news .shops .middle .img img {
   
   
	width: 70px;
	height: 70px;
}

.body-center .news .shops .middle .title {
   
   
	width: 140px;
	height: 36.4px;
	float: left;
	color: #333333;
	font-size: 14px;
	margin-top: 10px;
	margin-left: 1px;
	cursor: pointer;
}

.body-center .news .shops .middle .title:hover {
   
   
	color: #e1251b;
}

.body .body-center .news .news-two .shops .foot {
   
   
	background-color: white;
	width: 275px;
	height: 70px;
	overflow: hidden;
	float: left;
	/* line-height: 70px; */
}

.body .body-center .news .news-two .shops .foot .left {
   
   
	width: 28.8px;
	height: 40.8px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAdVBMVEVHcEzbg0bgg0nhgkrggEbhhEngg0nwqoHggUfefEHoiU7egUjigknfgkjzsYvfgEXakUjmh0vyrofvqoHwqoDsnm/lhUznkFrggknwq4Lwq4HefULfgEbeez/zsYr0s43yr4fihk7olWPupHjrnm/ljlnxrYUIIWs0AAAAGHRSTlMAHXbV7zSf8vL/Tq8tifLlB2ry5vLmu7tMl0GPAAAAvklEQVR42m3R2wqDMBAE0Kio9a70tsbEqLX+/yfWsDS0zO7rYWGGUddcuFt7V6NwetZG5QIc8/sigtusBHp+TUYAvRxrQdLHvFkSQLu9MALoZVwnQvBJLUngdksIPqkxEhzLagmAK5MA2p2VEUJS/HA+KQBXBuBxJkLgygicFIHHEYDHQeBxEDgpQKiMwEkReBwEHkeAME6WptkvcOUkjtR5UZx8ofWVq1KFKyuGkbqmVn9XN50x6jn0Cq4fHh9pGEWRDn2aWAAAAABJRU5ErkJggg==);
	background-size: cover;
	margin-top: 15px;
	/*随着分辨率进行改变*/
	margin-left: 10px;
	text-align: center;
	float: left;
	cursor: pointer;

}

.body-center .news .shops .foot .left p {
   
   
	color: #D47b45;
}

.body-center .news .shops .foot .left h3 {
   
   
	margin-top: -5px;
	font-size: 18px;
	color: white;
	font-weight: bolder;
}

.body-center .news .shops .foot .img {
   
   
	width: 70px;
	height: 70px;
	float: left;
	margin-left: 20px;
	cursor: pointer;
	cursor: pointer;
}

.body-center .news .shops .foot .img img {
   
   
	width: 70px;
	height: 70px;
}

.body-center .news .shops .foot .title {
   
   
	width: 140px;
	height: 36.4px;
	float: left;
	color: #333333;
	font-size: 14px;
	margin-top: 10px;
	margin-left: 1px;
	cursor: pointer;
}

.body-center .news .shops .foot .title:hover {
   
   
	color: #e1541b;
}

.body .body-center .news .news-three .box-hd {
   
   
	width: 270px;
	padding-left: 20px;
	font-size: 24px;
	color: #333333;
	line-height: 60px;
	height: 60px;
	font-weight: bolder;
}

.body .body-center .news .news-three .box-hd i {
   
   
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #F10215;
}

.body .body-center .news .news-four .box-hd {
   
   
	width: 270px;
	padding-left: 20px;
	font-size: 24px;
	color: #333333;
	line-height: 60px;
	height: 60px;
	font-weight: bolder;
}

.body .body-center .news .news-four .box-hd i {
   
   
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #F10215;
}

.body .body-center .news .news-three .box-01 {
   
   
	cursor: pointer;
	margin-left: 15px;
	width: 260px;
	height: 128px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #ebf2ea;
}

.body .body-center .news .news-three .box-02 {
   
   
	cursor: pointer;
	margin-left: 15px;
	width: 260px;
	height: 128px;
	float: left;
	margin-top: 5px;
	background-color: #f1f5f9;
}

.body-center .news .news-three .box-01 .left {
   
   
	width: 100px;
	height: 108px;
	float: left;
	padding: 10px;
}

.body .body-center .news .news-three .box-01:hover .left-top p {
   
   
	transition: all 0.3s;
	color: #E2231a;
}

.body .body-center .news .news-three .box-02:hover .left-top p {
   
   
	transition: all 0.3s;
	color: #E2231a;
}

.body-center .news .news-three .box-01 .left .left-top p {
   
   
	color: #333333;
	font-size: 14px;
}

.body-center .news .news-three .box-01 .left .left-middle p {
   
   
	float: left;
	margin-right: 5px;
	margin-top: 4px;
}

.body-center .news .news-three .box-01 .left .left-middle p.a {
   
   
	padding: 3px;
	border: #E2231a 1px solid;
	color: #E2231a;
}

.body-center .news .news-three .box-01 .left .left-middle p.b {
   
   
	padding: 3px;
	border: #596fab 1px solid;
	color: #596fab;
}

.body-center .news .news-three .box-01 .left .left-foot {
   
   
	color: #999999;
	font-size: 12px;
	float: left;
	margin-top: 20px;
}

.body-center .news .news-three .box-01 .img {
   
   
	float: right;
	width: 90px;
	height: 90px;
	margin-right: 15px;
	margin-top: 15px;

}

.body-center .news .news-three .box-01 .img img {
   
   
	width: 90px;
	height: 90px;
}



.body-center .news .news-three .box-02 .left {
   
   
	width: 100px;
	height: 108px;
	float: left;
	padding: 10px;
}

.body-center .news .news-three .box-02 .left .left-top p {
   
   
	color: #333333;
	font-size: 14px;
}

.body-center .news .news-three .box-02 .left .left-middle p {
   
   
	float: left;
	margin-right: 5px;
	margin-top: 4px;
}

.body-center .news .news-three .box-02 .left .left-middle p.a {
   
   
	padding: 3px;
	border: #E2231a 1px solid;
	color: #E2231a;
}

.body-center .news .news-three .box-02 .left .left-foot {
   
   
	color: #999999;
	font-size: 12px;
	float: left;
	margin-top: 20px;
}

.body-center .news .news-three .box-02 .img {
   
   
	float: right;
	width: 90px;
	height: 90px;
	margin-right: 15px;
	margin-top: 15px;

}

.body-center .news .news-three .box-02 .img img {
   
   
	width: 90px;
	height: 90px;
}

.body-center .news .news-four .gift li {
   
   
	cursor: pointer;
	margin-left: 30px;
	width: 244px;
	height: 82px;
	margin-bottom: 4px;
	/* background-color: #D9D9D9; */
	overflow: hidden;
}

.body-center .news .news-four .gift li:hover .more {
   
   
	color: #E12518;
}

.body-center .news .news-four .gift .img {
   
   
	margin-right: 5px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 5px;
	float: left;
}

.body-center .news .news-four .gift .img img {
   
   
	width: 70px;
	height: 70px;

}

.body-center .news .news-four .gift .right {
   
   
	/* width: 200px; */
	/* height: 30px; */
	color: #e33333;
	font-size: 14px;
	margin-top: 10px;
	/* float: left; */
}

.body-center .news .news-four .gift .right span {
   
   
	font-size: 28px;
	font-weight: bolder;
}

.body-center .news .news-four .gift .right .a {
   
   
	float: left;
	margin-top: -5px;
	font-size: 12px;
	color: #999999;
}

.body-center .news .news-four .gift .right .b {
   
   
	margin-top: 0px;
	float: left;
	color: #333333;
	font-size: 12px;
}

.body-center .news .news-four .gift .more {
   
   
	float: left;
	width: 1px;
	height: 30px;
	margin-top: -55px;
	margin-left: 15px;
}

.body .body-center .square {
   
   
	width: 100%;
	/* height: 45px; */
	/* background-color: #46D8C8; */
	float: left;
	margin: 30px 0;
	text-align: center;
	line-height: 45px;
	font-size: 28px;
	color: #333333;
	font-weight: bold;

}

.body .body-center .square-title::after {
   
   
	content: "";
	position: absolute;
	background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
	width: 25px;
	height: 25px;
	margin-left: -100px;
	/*随分辨率改变*/
	margin-top: -30px;
}

.body .body-center .square-title::before {
   
   
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	margin: 70px;
	margin-top: 15px;
	background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
}

.body .body-center .square .center {
   
   
	width: 1190px;
	height: 950px;
	/* background-color: #46D8C8; */
	float: left;
	margin-top: 20px;
}

.body .body-center .square .square-nav {
   
   
	width: 290px;
	height: 370px;
	margin-bottom: 10px;
	margin-right: 10px;
	float: left;
	cursor: pointer;
}

.body .body-center .square .square-nav:hover {
   
   
	transition: all 0.3s;
	opacity: 0.9;
}

.body .body-center .square .square-nav img {
   
   
	width: 290px;
	height: 370px;
}

.body .body-center .square .center .square-box {
   
   
	width: 290px;
	height: 180px;
	background-color: white;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.body .body-center .square .center .square-box1 {
   
   
	width: 290px;
	height: 180px;
	background-color: white;
	float: left;
	margin-bottom: 10px;
}

.body .body-center .square .center .square-box .square-box-title {
   
   
	text-align: left;
	padding-left: 30px;
	width: 260px;
	height: 60px;
	float: left;

	line-height: 60px;
}

.body .body-center .square .center .square-box .square-box-title p {
   
   
	color: #333333;
	font-size: 22px;
	float: left;
}

.body .body-center .square .center .square-box .square-box-title span {
   
   
	float: left;
	font-size: 14px;
	color: #999999;
	margin-top: 5px;
	/*随分辨率改变*/
	font-weight: 400;
	margin-left: 8px;
}

.body .body-center .square .center .square-box .img {
   
   
	width: 100px;
	height: 100px;
	float: left;
	margin-left: 30px;
}

.body .body-center .square .center .square-box .img img {
   
   
	width: 100px;
	height: 100px;
}



.body .body-center .square .center .square-box1 .square-box-title {
   
   
	text-align: left;
	padding-left: 30px;
	width: 260px;
	height: 60px;
	float: left;

	line-height: 60px;
}

.body .body-center .square .center .square-box1 .square-box-title p {
   
   
	color: #333333;
	font-size: 22px;
	float: left;
}

.body .body-center .square .center .square-box1 .square-box-title span {
   
   
	font-weight: 400;
	float: left;
	font-size: 14px;
	color: #999999;
	margin-top: 5px;
	/*随分辨率改变*/
	margin-left: 8px;
}

.body .body-center .square .center .square-box1 .img {
   
   
	width: 100px;
	height: 100px;
	float: left;
	margin-left: 30px;
}

.body .body-center .square .center .square-box1 .img img {
   
   
	width: 100px;
	height: 100px;
}


.body .body-center .recommend {
   
   
	width: 100%;
	/* height: 45px; */

	float: left;
	/* margin-top: 300px; */
	margin: 0 0;
	text-align: center;
	line-height: 45px;
	font-size: 28px;
	color: #333333;
	font-weight: bold;

}

.body .body-center .recommend-title::after {
   
   
	content: "";
	position: absolute;
	background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
	width: 25px;
	height: 25px;
	margin-left: -100px;
	/*随分辨率改变*/
	margin-top: -30px;
}

.body .body-center .recommend-title::before {
   
   
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	margin: 70px;
	margin-top: 15px;
	background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
}

.body-center .recommend .recommend-nav {
   
   
	margin-top: 30px;
	float: left;
	width: 1160px;
	height: 60px;
	background-color: white;
	line-height: 60px;
	padding-left: 30px;
}

.body-center .recommend .recommend-nav li {
   
   
	float: left;
}

.body-center .recommend .recommend-nav a {
   
   
	color: #333333;
	font-size: 16px;
	width: 180px;
	float: left;
	text-decoration: none;

}

.body-center .recommend .recommend-nav a.active,
.body-center .recommend .recommend-nav a:hover {
   
   
	background-color: #E12518;
	color: aliceblue;
}

.body-center .recommend .recommend-nav a::after {
   
   
	content: "";
}

.body-center .recommend .recommend-nav a::before {
   
   
	content: "";
}

.body-center .recommend .recommend-nav span {
   
   
	width: 1px;
	height: 30px;
	background-color: #D9D9D9;
	float: left;
	margin-top: 13px;
}

.body-center .recommend .recommend-center {
   
   
	margin-top: 10px;
	width: 1190px;
	height: 1000px;
	/* background-color: #46D8C8; */
	float: left;
}

.body .body-center .recommend .recommend-center .recommend-box {
   
   
	width: 230px;
	height: 322px;
	float: left;
	background-color: white;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.body .body-center .recommend .recommend-center .recommend-box:hover .title p {
   
   
	color: #B91B13;
}

.body .body-center .recommend .recommend-center .recommend-box1:hover .title p {
   
   
	color: #B91B13;
}

.body .body-center .recommend .recommend-center .recommend-box1 {
   
   
	cursor: pointer;
	width: 230px;
	height: 322px;
	float: left;
	background-color: white;
	margin-bottom: 10px;
}

.body .body-center .recommend .recommend-center .recommend-box .img {
   
   
	width: 150px;
	height: 150px;
	background-color: aqua;
	margin: 30px auto;
	margin-bottom: 40px;
}

.body .body-center .recommend .recommend-center .recommend-box .img img {
   
   
	width: 150px;
	height: 150px;
}

.body .body-center .recommend .recommend-center .recommend-box .title {
   
   
	margin: 10px auto;
	width: 190px;
	height: 48px;
	font-size: 14px;
	color: #666666;
	line-height: 1.7em;
	font-weight: 500;
	font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}

.body .body-center .recommend .recommend-center .recommend-box .rmb {
   
   
	margin-top: -5px;
	font-size: 13px;
	color: #E12518;
	text-align: left;
	margin-left: 25px;
}

.body .body-center .recommend .recommend-center .recommend-box .rmb span {
   
   
	font-size: 18px;
}



.body .body-center .recommend .recommend-center .recommend-box1 .img {
   
   
	width: 150px;
	height: 150px;
	background-color: aqua;
	margin: 30px auto;
	margin-bottom: 40px;
}

.body .body-center .recommend .recommend-center .recommend-box1 .img img {
   
   
	width: 150px;
	height: 150px;
}

.body .body-center .recommend .recommend-center .recommend-box1 .title {
   
   
	margin: 10px auto;
	width: 190px;
	height: 48px;
	font-size: 14px;
	color: #666666;
	line-height: 1.7em;
	font-weight: 500;
	font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}

.body .body-center .recommend .recommend-center .recommend-box1 .rmb {
   
   
	margin-top: -5px;
	font-size: 13px;
	color: #E12518;
	text-align: left;
	margin-left: 25px;
}

.body .body-center .recommend .recommend-center .recommend-box1 .rmb span {
   
   
	font-size: 18px;
}

.body .body-center .good {
   
   
	margin-top: 50px;
	height: 42px;
	float: left;
	width: 1190px;
	margin-left: 30px;/*随着分辨率而改变*/

}
.body-center .good li .div{
   
   
	float: left;
}
.body-center .good li{
   
   
	width: 290px;
	cursor: pointer;
	float: left;
	margin-right: 10px;
	line-height: 42px;
}
.body-center .good li span{
   
   
	float: left;
	margin-left: 20px;
	font-size: 18px;
	color: #444444;
	font-weight: bold;
	
}
.body-center .good li.a{
   
   
	float: left;
	margin-right: 0px;
}

.body .body-center .good .div {
   
   
	position: relative;
	width: 23.8px;
	height: 42px;
	/* margin: 50px auto; */
	background-color: red;
	text-align: center;
	line-height: 42px;
	font-size: 24px;
	color: white;
	font-weight: bold;
}

.div:before {
   
   
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	right: 24px;
	border-width: 20.3px 13px;
	border-style: solid;
	border-color: transparent red transparent transparent;
}

.div:after {
   
   
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 24px;
	border-width: 20.3px 13px;
	border-style: solid;
	border-color: transparent transparent transparent red;
	top: 0;
}
.footer{
   
   
	
	width: 100%;
	height: 200px;
	background-color: #f4f4f4;
	border-top: 1px solid #cecece;
}
.footer .footer-center{
   
   
	width: 1190px;
	height: 100%;
	margin: 0 auto;
	/* background-color: #6495ED; */
	border-bottom: 1px solid #cecece;
	
}
.footer .footer-center .left{
   
   
	float: left;
}
.footer .footer-center .right{
   
   
	float: right;
	width: 200px;
	height: 150px;
	margin-top: 30px;
	text-align: center;
}
.footer .footer-center .left li.a{
   
   
	margin-top:30px;
	width: 198px;
	height: 160px;
	float: left;
	/* background-color: red; */
}
.footer .footer-center .left li.a p{
   
   
	color: #666666;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 6px;
}
.footer .footer-center .left li.a li{
   
   
	margin-bottom: 3px;
}
.footer .footer-center .left li.a li a{
   
   
	text-decoration: none;
	color: #666666;
	font-size: 12px;
}
.footer .footer-center .left li.a li a:hover{
   
   
	color: #c81623;
}
.footer .footer-center .right p{
   
   
	color: #666666;
	font-size: 14px;
	font-weight: bold;
}
.footer .footer-center .right  .txt{
   
   
	text-align: left;
	margin: 0 auto;
	margin-top: 10px;
	width: 180px;
	height: 52.8px;
	font-size: 12px;
	font-weight: 400;
	color: #666666;
}
.footer .footer-center .right .details{
   
   
	text-align: right;
	margin-right: 20px;
}
.footer .footer-center .right .details a{
   
   
	font-weight: 400;
	color: #666666;
	font-size: 12px;
	text-decoration: none;
}
.footer .footer-center .right .details a:hover{
   
   
	color: #c81623;
}


.footing{
   
   
	
	background-color: #f4f4f4;
	width: 100%;
	height: 300px;
	float: left;
}

.footing .footing-center{
   
   
	width: 1190px;
	height: 100%;
	margin: 0 auto;
	border-top: 1px solid #CECECE;
	/* text-align: center; */
}
.footing .footing-center span{
   
   
	width: 1px;
	height: 13px;
	background-color: #969696;
	float: left;
	margin: 23px 10px;
}
.footing .footing-center li{
   
   
	float: left;
	margin-top: 20px;
}
.footing .footing-center .nav{
   
   
	margin-left: 50px;
	float: left;
}
.footing .footing-center a{
   
   
	text-decoration: none;
	color: #666666;
	font-size: 12px;
}
.footing .footing-center a:hover{
   
   
	color: #C81623;
}
.footing .footing-center .copyright{
   
   
	float: left;
	text-align: center;
	width: 1190px;
	height: 200px;

}
.footing .footing-center .copyright a{
   
   
	clear: both;
}



reset.css代码以下:java

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   
   
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   
   
	display: block;
}
body {
   
   
	line-height: 1;
}
ol, ul {
   
   
	list-style: none;
}
blockquote, q {
   
   
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   
   
	content: '';
	content: none;
}
table {
   
   
	border-collapse: collapse;
	border-spacing: 0;
}

style.js代码以下:web

window.onload = function(){
   
   
	//获取函数,并绑定单击响应函数
	var city = document.getElementById("city");
	var bj = document.getElementById("bj");
	bj.onclick = function(){
   
   
		city.innerHTML = "北京";
	}
	
	var sh = document.getElementById("sh");
	sh.onclick = function(){
   
   
		city.innerHTML = "上海";
	}
	
	var tj = document.getElementById("tj");
	tj.onclick = function(){
   
   
		city.innerHTML = "天津";
	}
	
	var ln = document.getElementById("ln");
	ln.onclick = function(){
   
   
		city.innerHTML = "辽宁";
	}
	
	var cq = document.getElementById("cq");
	cq.onclick = function(){
   
   
		city.innerHTML = "重庆";
	}
	
	var hb = document.getElementById("hb");
	hb.onclick = function(){
   
   
		city.innerHTML = "河北";
	}
	
	var sx = document.getElementById("sx");
	sx.onclick = function(){
   
   
		city.innerHTML = "山西";
	}
	
	var hn = document.getElementById("hn");
	hn.onclick = function(){
   
   
		city.innerHTML = "河南";
	}
	
	var jl = document.getElementById("jl");
	jl.onclick = function(){
   
   
		city.innerHTML = "吉林";
	}
	
	var hlj = document.getElementById("hlj");
	hlj.onclick = function(){
   
   
		city.innerHTML = "黑龙江";
	}
	
	var zj = document.getElementById("zj");
	zj.onclick = function(){
   
   
		city.innerHTML = "浙江";
	}
	
	var js = document.getElementById("js");
	js.onclick = function(){
   
   
		city.innerHTML = "江苏";
	}
	
	var sd = document.getElementById("sd");
	sd.onclick = function(){
   
   
		city.innerHTML = "山东";
	}
	
	var nmg = document.getElementById("nmg");
	nmg.onclick = function(){
   
   
		city.innerHTML = "内蒙古";
	}
	
	var fj = document.getElementById("fj");
	fj.onclick = function(){
   
   
		city.innerHTML = "福建";
	}
	
	var h1 = document.getElementById("h1");
	h1.onclick = function(){
   
   
		city.innerHTML = "湖北";
	}
	
	var h2 = document.getElementById("h2");
	h2.onclick = function(){
   
   
		city.innerHTML = "湖南";
	}
	
	var h3 = document.getElementById("h3");
	h3.onclick = function(){
   
   
		city.innerHTML = "贵州";
	}
	
	var h4 = document.getElementById("h4");
	h4.onclick = function(){
   
   
		city.innerHTML = "云南";
	}


	var h5 = document.getElementById("h5");
	h5.onclick = function(){
   
   
		city.innerHTML = "西藏";
	}


	var h6 = document.getElementById("h6");
	h6.onclick = function(){
   
   
		city.innerHTML = "陕西";
	}


	var h7 = document.getElementById("h7");
	h7.onclick = function(){
   
   
		city.innerHTML = "甘肃";
	}


	var h8 = document.getElementById("h8");
	h8.onclick = function(){
   
   
		city.innerHTML = "青海";
	}


	var h9 = document.getElementById("h9");
	h9.onclick = function(){
   
   
		city.innerHTML = "钓鱼岛";
	}


	var s1 = document.getElementById("s1");
	s1.onclick = function(){
   
   
		city.innerHTML = "新疆";
	}


	var s2 = document.getElementById("s2");
	s2.onclick = function(){
   
   
		city.innerHTML = "港澳";
	}


	var s3 = document.getElementById("s3");
	s3.onclick = function(){
   
   
		city.innerHTML = "台湾";
	}


	var s4 = document.getElementById("s4");
	s4.onclick = function(){
   
   
		city.innerHTML = "宁夏";
	}
	
	var s5 = document.getElementById("s5");
	s5.onclick = function(){
   
   
		city.innerHTML = "海外";
	}
	
	var img = document.getElementById("top-img");
	var del = document.getElementById("del");
	del.onclick = function(){
   
   
		img.style.display = "none";
	};
	
	
	
	
	let imgArr = ["./img/body00.webp","./img/body01.webp","./img/body02.webp","./img/body03.webp","./img/body04.webp","./img/body05.webp"];
	const bimg = document.getElementById("bimg");
	const last = document.getElementById("last");
	const next = document.getElementById("next");
	let index = 0;
	last.onclick = function(){
   
   
		index--;
		if(index<0)
		{
   
   
			index = imgArr.length-1;
		}
		bimg.src = imgArr[index];
	};
	
	next.onclick = function(){
   
   
		index++;
		if(index>imgArr.length-1)
		{
   
   
			index = 0;
		}
		bimg.src = imgArr[index];
	};
	
	const bannerA = document.getElementsByClassName("bannerA");
	
	for(let i = 0;i < bannerA.length ; i++)
	{
   
   
		bannerA[i].index = i;
		bannerA[i].onmouseover = function(){
   
   
		imgArr[i].index = i;
		bimg.src = imgArr[this.index];
			
		};
	}
	
	const minute = document.getElementById("minute");
	const miao = document.getElementById("miao");
	
	let s = 0;
	setInterval(function(){
   
   
		s++;
		if(s<10)
		{
   
   
			miao.innerHTML = "0" + s; 
		}
		else if(s<60)
		{
   
   
			miao.innerHTML = s;
		}
		else if(s == 60)
		{
   
   
			s=0;
		}
	},1000);
	
	let fen = 0;
	setInterval(function(){
   
   
		fen++;
		if(fen<10)
		{
   
   
			minute.innerHTML = "0" + fen;
		}
		else if(fen<60)
		{
   
   
			minute.innerHTML = fen;
		}
		else if(fen == 60)
		{
   
   
			fen = 0;
		}
	},60000)
};

须要全部代码以及图片文件夹的小伙伴能够私信我ajax