仿品优购案例

最新推荐文章于 2022-07-14 14:35:35 发布

VIP文章诸葛龍

最新推荐文章于 2022-07-14 14:35:35 发布

阅读量240

点赞数

分类专栏：前端文章标签： javascript jquery css html html5

本文链接：https://blog.csdn.net/weixin_42701809/article/details/115434908

版权

index.html

<!DOCTYPE html><!-- index.html -->
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
		<title>
			<meta name="Description" content="京东JD.COM-专业的综合网上购物商城、销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷" />
			<meta name="Keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3,CD,VCD,DV,相机，数码，配件，手表，存储卡，京东" />
		</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="shortcut icon" href=" bitbug_favicon.ico" />
		<script src="js/jquery.mini.js"></script>
		<script src="js/animate.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<!-- 快捷导航模块 -->
		<section class="shortcut">
			<div class="daohang w">
				<ul class="lu">
					<li class="deng1">七贤欢迎您！</li>
					<li class="deng2">请登录</li>
					<li class="deng3"><a href="zhuce.html">免费注册</a></li>
				</ul>
				<ul class="fenlei">
					<li>我的订单</li>
					<li></li>
					<li class="li2">我的七贤</li>
					<li></li>
					<li>七贤会员</li>
					<li></li>
					<li>企业采购</li>
					<li></li>
					<li class="li5">关注七贤</li>
					<li></li>
					<li class="li6">客户服务</li>
					<li></li>
					<li class="li7">网站导航</li>
				</ul>
			</div>
		</section>
		<!-- 快捷导航模块 end-->
		<!-- 侧边导航栏 start-->
		<div class="navigation">
			<ul>
				<li>家用电器</li>
				<li>家用电器</li>
				<li>家用电器</li>
			</ul>
		</div>
		<!-- 侧边导航栏 end-->
		<!-- header头部模块制作 -->
		<header class="header w">
			<h1 class="logo"><a title="七贤商城" href="index.html">七贤商城</a></h1>
			<div class="sousuo">
				<input type="text" placeholder="语言开发">
				<input value="搜索" type="button">
			</div>
			<div class="kuaijie">
				<a href="#">优惠购首发</a>
				<a href="#">亿元优惠</a>
				<a href="#">9.9元团购</a>
				<a href="#">美满99减30</a>
				<a href="#">办公用品</a>
				<a href="#">电脑</a>
				<a href="#">通信</a>
			</div>
			<div class="gouwuche">
				我的购物车
				<span class="tishi">8</span>
			</div>
		</header>
		<!-- header头部模块制作end -->
		<!-- nav模块制作 start -->
		<div class="xiahuaxian">
			<!-- nav模块制作 end -->

			<div class="nav w">
				<div class="dropdown">
					<div class="dt">全部商品分类</div>
					<div class="dd">
						<ul>
							<li><a href="#">家用电器</a></li>
							<li><a href="#">手机、数码、通信</a></li>
							<li><a href="#">电脑、办公</a></li>
							<li><a href="#">家居、家具、家装、厨具</a></li>
							<li><a href="#">男装、女装、童装、内衣</a></li>
							<li><a href="#">个户化妆、清洁用品、宠物</a></li>
							<li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
							<li><a href="#">运动户外、钟表</a></li>
							<li><a href="#">汽车、汽车用品</a></li>
							<li><a href="#">母婴、玩具乐器</a></li>
							<li><a href="#">食品、酒类、生鲜、特产</a></li>
							<li><a href="#">医药保健</a></li>
							<li><a href="#">图书、音像、电子书</a></li>
							<li><a href="#">彩票、旅行、充值、票务</a></li>
							<li><a href="#">理财、众筹、白条、保险</a></li>
						</ul>
					</div>
				</div>
				<ul class="navitems">
					<li><a href="#">服装城</a></li>
					<li><a href="#">美妆馆</a></li>
					<li><a href="#">传智超市</a></li>
					<li><a href="#">全球购</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">拍卖</a></li>
					<li><a href="#">有趣</a></li>
				</ul>
			</div>
		</div>
		<!-- nav模块制作 end -->
		<div class="w">
			<div class="mian">
				<div class="focus">
					<a class="arrow-f" href="javascript:;"><</a>
					<a class="arrow-r" href="javascript:;">></a>
					<ol class="circle">
					</ol>
					<ul class="lunbotu">
						<li><a href=""><img src="img/图层%20179.png" alt=""></a></li>
						<li><a href=""><img src="img/图层%20179.png" alt=""></a></li>
						<li><a href=""><img src="img/图层%20179.png" alt=""></a></li>
						<li><a href=""><img src="img/图层%20179.png" alt=""></a></li>
						<li><a href=""><img src="img/图层%20179.png" alt=""></a></li>
					</ul>		
				</div>
				<div class="newsflash">
					<div>
						<span>七贤快报</span>
						<a href="#">更多</a>
					</div>
					<div class="news">
						<ul>
							<li>[特惠]备战开学季 全民半价数码</li>
							<li>[特惠]备战开学季 全民半价数码</li>
							<li>[特惠]备战开学季 全民半价数码</li>
							<li>[特惠]备战开学季 全民半价数码</li>
							<li>[特惠]备战开学季 全民半价数码</li>
						</ul>
					</div>
					<div>
						<ul>
							<li><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
							<li class="gezi"><img src="img/01-电商-主页-gai_011.png" alt="">火车票</li>
						</ul>
					</div>
					<div class="guangao">
						<img src="img/01-电商-主页-gai_03.gif" alt="">
					</div>
				</div>
			</div>
		</div>
		<!-- box模块制作 start -->
		<div class="boxx">
			<ul>
				<li>
					<p><img src="img/图层%20106.png" alt=""></p>
					<a href="#">今日推荐</a>
				</li>
				<li class="biax1">
					<h5>优质好货</h5>
					<p class="p1">
						满300减100
						<p>
							<p class="p2">满500减200</p>
							<img src="img/图层%20150.png" alt="">
				</li>
				<li class="bian2">
					<div class="bao">
						<h5>优质好货</h5>
						<p class="p3">满300减100<p>
								<p class="p4">满500减200</p>
								<p class="p5">团购</p>
					</div>
					<img src="img/图层%20149.png" alt="">
				</li>
				<li class="bian2">
					<div class="bao">
						<h5>优质好货</h5>
						<p class="p3">满300减100<p>
								<p class="p4">满500减200</p>
								<p class="p5">团购</p>
					</div>
					<img src="img/图层%20149.png" alt="">
				</li>
				<li class="bian2">
					<div class="bao">
						<h5>优质好货</h5>
						<p class="p3">满300减100<p>
								<p class="p4">满500减200</p>
								<p class="p5">团购</p>
					</div>
					<img src="img/图层%20149.png" alt="">
				</li>
			</ul>
		</div>
		<div class="cainixihuan">
			<p class="p6">猜你喜欢</p>
			<a class="p7">换一批</a>
			<div class="xihuan">
				<ul>
					<li>
						<div class="image3">
							<img src="img/图层%20152.png" alt=""> </div>
						<div class="text">
							<p>阳光美包新款单肩包女<br />包时尚子母包四件套女</p>
							<h2>￥116.00</h2>
						</div>
					</li>
					<li>
						<div class="image3">
							<img src="img/图层%20153.png" alt=""> </div>
						<div class="text">
							<p>爱仕达 30CM炒锅不粘<br />
								锅NWG8330E电磁炉炒</p>
							<h2>￥99.00</h2>
						</div>
					</li>
					<li>
						<div class="image3">
							<img src="img/图层%20154.png" alt="">
						</div>
						<div class="text">
							<p>捷波朗<br />
								（jabra）BOOSI劲步</p>
							<h2>￥245.00</h2>
						</div>
					</li>
					<li>
						<div class="image3">
							<img src="./img/图层%20156.png" alt=""> </div>
						<div class="text">
							<p>欧普<br />
								JYLZ08面板灯平板灯铝</p>
							<h2>￥238.00</h2>
						</div>
					</li>
					<li>
						<div class="image3">
							<img src="img/图层%20158.png" alt=""> </div>
						<div class="text">
							<p>三星<br />
								（G5500）移动联</p>
							<h2>￥649.00</h2>
						</div>
					</li>
					<li>
						<div class="image3">
							<img src="./img/图层%20159.png" alt=""> </div>
						<div class="text">
							<p>韩国所望<br />
								紧致湿润精华露400ml</p>
							<h2>￥694.00</h2>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- box模块end -->

		<div class="floor">
			<!-- 一楼家用电器 -->
			<div class="w jiadian">
				<div class="box_hd">
					<h3>家用电器</h3>
					<div class="tab_list">
						<ul>
							<li><a href="#">热门</a>|</li>
							<li><a href="#">大家电</a>|</li>
							<li><a href="#">生活电器</a>|</li>
							<li><a href="#">厨房电器</a>|</li>
							<li><a href="#">个护健康</a>|</li>
							<li><a href="#">应季电器</a>|</li>
							<li><a href="#">空气/净水</a>|</li>
							<li><a href="#">新奇特</a>|</li>
							<li><a href="#">高端电器</a></li>
						</ul>
					</div>
				</div>
				<div class="box_bd">
					<div class="tab_content">
						<div class="tab_list_item">
							<div class="col_210">
								<ul>
									<li><a href="">节能补贴</a></li>
									<li><a href="">4K电视</a></li>
									<li><a href="">空气净化器</a></li>
									<li><a href="">IH电饭煲</a></li>
									<li><a href="">滚筒洗衣机</a></li>
									<li><a href="">电热水器</a></li>
								</ul>
								<div class="qumiandianshi">
									<p class="p8">三星曲面电视</p>
									<p class="p9">抽奖送豪礼</p>
								</div>
								<img src="./img/图层%20110.png" alt="">
							</div>
							<div class="col_329">
								<div class="shuihu">
									<p class="p10">烧水壶智能光控泡茶壶茶具套装<br />
										满299.00减40.00</p>
								</div>
								<img src="img/图层%20118.png" alt="">
							</div>
							<div class="col_221_1">
								<div class="hongpei">
									<div>
										<p class="p11">没满200减20元</p>
										<p class="p12">烘培节1元抢购</p>
									</div>
									<img src="img/图层%20114.png" alt="">
								</div>
								<div class="dianshi">
									<div>
										<p class="p13">买乐视电视享钜惠
										</p>
										<p class="p14">送60个月会员</p>
									</div>
									<img src="img/图层%20116.png" alt="">
								</div>
							</div>
							<div class="col_221_2">
								<div>
									<p class="p15">8.20彩电宅购节
									</p>
									<p class="p16">65寸4K智能电视3799</p>
								</div>
								<img src="img/图层%20113.png" alt="">
							</div>
							<div class="col_219">
								<div class="kongtiao">
									<div>
										<p class="p17">消暑神器全场领券
										</p>
										<p class="p18">1元赢空调</p>
									</div>
									<img src="img/图层%20115.png" alt="">
								</div>
								<div class="fengshan">
									<div>
										<p class="p19">买乐视电视享钜惠
										</p>
										<p class="p20">送60个月会员</p>
									</div>
									<img src="img/图层%20117.png" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="daiyan">
				<img src="img/图层%20119.png" alt="">
			</div>
		</div>

		<div class="w jiadian">
			<div class="box_hd">
				<h3>家用电器</h3>
				<div class="tab_list">
					<ul>
						<li><a href="#">热门</a>|</li>
						<li><a href="#">大家电</a>|</li>
						<li><a href="#">生活电器</a>|</li>
						<li><a href="#">厨房电器</a>|</li>
						<li><a href="#">个护健康</a>|</li>
						<li><a href="#">应季电器</a>|</li>
						<li><a href="#">空气/净水</a>|</li>
						<li><a href="#">新奇特</a>|</li>
						<li><a href="#">高端电器</a></li>
					</ul>
				</div>
			</div>
			<div class="box_bd">
				<div class="tab_content">
					<div class="tab_list_item">
						<div class="col_210">
							<ul>
								<li><a href="">节能补贴</a></li>
								<li><a href="">4K电视</a></li>
								<li><a href="">空气净化器</a></li>
								<li><a href="">IH电饭煲</a></li>
								<li><a href="">滚筒洗衣机</a></li>
								<li><a href="">电热水器</a></li>
							</ul>
							<div class="qumiandianshi">
								<p class="p8">三星曲面电视</p>
								<p class="p9">抽奖送豪礼</p>
							</div>
							<img src="./img/图层%20110.png" alt="">
						</div>
						<div class="col_329">
							<div class="shuihu">
								<p class="p10">烧水壶智能光控泡茶壶茶具套装<br />
									满299.00减40.00</p>
							</div>
							<img src="img/图层%20118.png" alt="">
						</div>
						<div class="col_221_1">
							<div class="hongpei">
								<div>
									<p class="p11">没满200减20元</p>
									<p class="p12">烘培节1元抢购</p>
								</div>
								<img src="img/图层%20114.png" alt="">
							</div>
							<div class="dianshi">
								<div>
									<p class="p13">买乐视电视享钜惠
									</p>
									<p class="p14">送60个月会员</p>
								</div>
								<img src="img/图层%20116.png" alt="">
							</div>
						</div>
						<div class="col_221_2">
							<div>
								<p class="p15">8.20彩电宅购节
								</p>
								<p class="p16">65寸4K智能电视3799</p>
							</div>
							<img src="img/图层%20113.png" alt="">
						</div>
						<div class="col_219">
							<div class="kongtiao">
								<div>
									<p class="p17">消暑神器全场领券
									</p>
									<p class="p18">1元赢空调</p>
								</div>
								<img src="img/图层%20115.png" alt="">
							</div>
							<div class="fengshan">
								<div>
									<p class="p19">买乐视电视享钜惠
									</p>
									<p class="p20">送60个月会员</p>
								</div>
								<img src="img/图层%20117.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="daiyan">
			<img src="img/图层%20119.png" alt="">
		</div>
		</div>
		<div class="w jiadian">
			<div class="box_hd">
				<h3>家用电器</h3>
				<div class="tab_list">
					<ul>
						<li><a href="#">热门</a>|</li>
						<li><a href="#">大家电</a>|</li>
						<li><a href="#">生活电器</a>|</li>
						<li><a href="#">厨房电器</a>|</li>
						<li><a href="#">个护健康</a>|</li>
						<li><a href="#">应季电器</a>|</li>
						<li><a href="#">空气/净水</a>|</li>
						<li><a href="#">新奇特</a>|</li>
						<li><a href="#">高端电器</a></li>
					</ul>
				</div>
			</div>
			<div class="box_bd">
				<div class="tab_content">
					<div class="tab_list_item">
						<div class="col_210">
							<ul>
								<li><a href="">节能补贴</a></li>
								<li><a href="">4K电视</a></li>
								<li><a href="">空气净化器</a></li>
								<li><a href="">IH电饭煲</a></li>
								<li><a href="">滚筒洗衣机</a></li>
								<li><a href="">电热水器</a></li>
							</ul>
							<div class="qumiandianshi">
								<p class="p8">三星曲面电视</p>
								<p class="p9">抽奖送豪礼</p>
							</div>
							<img src="./img/图层%20110.png" alt="">
						</div>
						<div class="col_329">
							<div class="shuihu">
								<p class="p10">烧水壶智能光控泡茶壶茶具套装<br />
									满299.00减40.00</p>
							</div>
							<img src="img/图层%20118.png" alt="">
						</div>
						<div class="col_221_1">
							<div class="hongpei">
								<div>
									<p class="p11">没满200减20元</p>
									<p class="p12">烘培节1元抢购</p>
								</div>
								<img src="img/图层%20114.png" alt="">
							</div>
							<div class="dianshi">
								<div>
									<p class="p13">买乐视电视享钜惠
									</p>
									<p class="p14">送60个月会员</p>
								</div>
								<img src="img/图层%20116.png" alt="">
							</div>
						</div>
						<div class="col_221_2">
							<div>
								<p class="p15">8.20彩电宅购节
								</p>
								<p class="p16">65寸4K智能电视3799</p>
							</div>
							<img src="img/图层%20113.png" alt="">
						</div>
						<div class="col_219">
							<div class="kongtiao">
								<div>
									<p class="p17">消暑神器全场领券
									</p>
									<p class="p18">1元赢空调</p>
								</div>
								<img src="img/图层%20115.png" alt="">
							</div>
							<div class="fengshan">
								<div>
									<p class="p19">买乐视电视享钜惠
									</p>
									<p class="p20">送60个月会员</p>
								</div>
								<img src="img/图层%20117.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="daiyan">
			<img src="img/图层%20119.png" alt="">
		</div>
		</div>
		<!-- footer模块制作 -->

		<footer class="footer">
			<div class="mod_service w">
				<ul>
					<li>
						<img src="img/图层%20138.png" alt="">
						<div class="tubiao1">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>
					</li>
					<li>
						<img src="img/图层%20139.png" alt="">
						<div class="tubiao2">
							<h4>急速物流</h4>
							<p>急速物流，急速送达</p>
						</div>
					</li>
					<li>
						<img src="img/图层%20140.png" alt="">
						<div class="tubiao3">
							<h4>无忧售后</h4>
							<p>7天无理由退换货</p>
						</div>
					</li>
					<li>
						<img src="img/图层%20141.png" alt="">
						<div class="tubiao4">
							<h4>特色服务</h4>
							<p>私人定制家电套餐</p>
						</div>
					</li>
					<li>
						<img src="img/图层%20142.png" alt="">
						<div class="tubiao5">
							<h4>帮助中心</h4>
							<p>您的购物指南</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="mod_mysql w">
				<ul>
					<li class="weiqian1">
						<ul class="bangzhu1">
							<li>购物指南</li>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</li>
					<li class="weiqian2">
						<ul class="bangzhu2">
							<li>支付方式</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="weiqian3">
						<ul class="bangzhu3">
							<li>配送方式</li>
							<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="weiqian4">
						<ul class="bangzhu4">
							<li>售后服务</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="weiqian5">
						<ul class="bangzhu5">
							<li>特色服务</li>
							<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>
						</ul>
					</li>
					<li class="weiqian6">
						<ul class="bangzhu6">
							<li>帮助中心</li>
							<li><img src="img/多边形%201%20拷贝.png" alt=""></li>
							<li>七贤客户端</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="mod_footer w">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li></li>
					<li><a href="#">联系我们</a></li>
					<li></li>
					<li><a href="#">联系客服</a></li>
					<li></li>
					<li><a href="#">商家入驻</a></li>
					<li></li>
					<li><a href="#">营销中心</a></li>
					<li></li>
					<li><a href="#">手机七贤</a></li>
					<li></li>
					<li><a href="#">友情链接</a></li>
					<li></li>
					<li><a href="#">销售联盟</a></li>
					<li></li>
					<li><a href="#">七贤社区</a></li>
					<li></li>
					<li><a href="#">七贤公益</a></li>
					<li></li>
					<li><a href="#">EnglishSite</a></li>
					<li></li>
					<li><a href="#">ContactU</a></li>
				</ul>
			</div>
			<div class="mod_footer1 w">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />京ICP备08001421号京公网安备110108007702</div>
		</footer>

		<!-- footer模块制作 end-->
	</body>
</html>

index.css

@font-face {
    
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?h4q1u8');
	src: url('../fonts/icomoon.eot?h4q1u8#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?h4q1u8') format('truetype'),
		url('../fonts/icomoon.woff?h4q1u8') format('woff'),
		url('../fonts/icomoon.svg?h4q1u8#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.navigation{
   
	display: none;
	position: fixed;
	top: 300px;
	cursor: pointer;
}

.navigation ul li{
   
	display: block;
	border-bottom: #999999 1px solid;
	width: 65px;
	padding: 5px 0px;
}

/* .navigation ul li:hover{
	background-color: #df3033;
	color: white;
} */

.curret{
   
	background-color: #df3033;
	color: white;
}

.mian {
   
	width: 980px;
	height: 454px;
	margin-left: 220px;
	margin-top: 10px;
}

.focus {
   
	position: relative;
	float: left;
	height: 454px;
	width: 721px;
	overflow: hidden;
}

.focus .arrow-f {
   
	display: none;
	color: white;
	font-size: 50px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: black;
	opacity: .3;
}

.focus .arrow-r {
   
	display: none;
	color: white;
	font-size: 50px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	background-color: black;
	opacity: .3;		
}

.arrow-r:hover {
   
	color: red;
}

.arrow-f:hover{
   
	color: red;
}

.focus .circle{
   
	position: absolute;
	bottom: 5px;
	left: 40px;
}

.focus .circle li{
   
	float: left;
	width: 15px;
	height: 15px;
	border: 1px white solid;
	border-radius: 50%;
	margin-left: 10px;
}

.focus .circle li:nth-child(1){
   
	background-color: orange;
}

.focus .lunbotu{
   
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 500%;
}

.focus .lunbotu li{
   
	float: left;
}

.newsflash {
   
	float: left;
	width: 250px;
	height: 454px;
	margin-left: 9px;
}

.newsflash div:first-child {
   
	width: 250px;
	height: 33px;
	border: 1px solid #e4e4e4;
	border-bottom: 1px dashed #e4e4e4;
	font-size: 14px;

}

.newsflash div:first-child span {
   
	line-height: 33px;
	padding-left: 15px;
	float: left;
	color: #333333;

}

.newsflash div:first-child a {
   
	float: right;
	padding: 8px 15px;
}

.newsflash div:first-child a::after {
   
	font-family: 'icomoon';
	content: '\e901';
}

.news {
   
	height: 130px;
	width: 250px;
	border: 1px solid #e4e4e4;
	border-top: 1px solid transparent;

}

.newsflash div:nth-child(2) ul li {
   
	margin-top: 10px;
	margin-left: 15px;
	font-size: 12px;
	display: block;
}

.newsflash div:nth-child(3) {
   
	width: 250px;
}

.newsflash div:nth-child(3) ul li {
   
	float: left;
	width: 63.25px;
	height: 73.22px;
	border: 1px #e4e4e4 solid;
	margin-top: -1px;
	text-align: center;
	font-size: 12px;
}

.newsflash div:nth-child(3) ul li img {
   
	display: block;
	margin: 15px 5px 5px 17px;
}

li[class*="gezi"] {
   
	margin-left: -1px;
}

.boxx {
   
	width: 1200px;
	margin: 10px auto;
	height: 163px;
	background-color: #ebebeb;
}

.boxx ul li {
   
	position: relative;
	display: inline-block;
}

.boxx ul li:first-child {
   
	float: left;
	width: 206px;
	height: 163px;
	background-color: #5c5251;
	text-align: center;
	color: white;
	line-height: 30px;
}

.boxx ul li:first-child a {
   
	color: white;
}

.boxx ul li:first-child img {
   
	width: 60px;
	height: 60px;
	margin-top: 30px;
}

.boxx ul li:nth-child(n+2) {
   
	float: left;
	width: 244px;
	height: 143px;
	margin-top: 10px;
}

li[class*="bian"] {
   
	border-left: #DDDDDD 1px solid;
}

.biax1 {
   
	margin-left: 18px;
}

.biax1 h5 {
   
	margin-top: 10px;
	font-size: 16px;
}

.p1 {
   
	display: inline-block;
	width: 72px;
	height: 18px;
	background-color: #00a0e8;
	font-size: 14px;
	color: white;
	margin-top: 8px;
}

.p2 {
   
	margin-top: 4px;
	font-size: 12px;
	color: #666666;
}

.biax1 img {
   
	position: absolute;
	right: 32px;
	top: 25px;
}

/* .bian2{
	margin-left: 18px;
} */

.bian2 h5 {
   
	margin-top: 10px;
	font-size: 16px;
}

.p3 {
   
	display: inline-block;
	width: 72px;
	height: 18px;
	background-color: #00a0e8;
	font-size: 14px;
	color: white;
	margin-top: 8px;
}

.p4 {
   
	margin-top: 4px;
	font-size: 12px;
	color: #666666;
}

.p5 {
   
	margin-left: 8px;
	margin-top: 20px;
	display: inline-block;
	font-size: 14px;
	width: 45px;
	height: 14px;
	color: white;
	background-color: #5fb200;
	border-radius: 8px;
	text-align: center;
}

.bian2 img {
   
	position: absolute;
	right: 32px;
	top: 25px;
}

.bao {
   
	margin-left: 18px;
}

.cainixihuan {
   
	height: 265px;
	width: 1200px;
	margin: 0 auto;
	/* background-color: #00A0E8; */
	margin-top: 20px;
}

.cainixihuan .p6 {
   
	float: left;
	font-size: 18px;
}

.cainixihuan .p7 {
   
	float: right;
	font-size: 12px;
}

.p7::after {
   
	font-family: 'icomoon';
	content: '\e905';
}

.cainixihuan .xihuan {
   
	float: left;
	height: 233px;
	width: 1200px;
	border: #ededed 1px solid;
	margin-top: 11px;
}

.xihuan ul li {
   
	float: left;
	height: 233px;
	width: 199.5px;
	text-align: center;
	/* background-color: #5FB200; */
}

div[class*="image"] {
   
	position: relative;
	height: 130px;
	margin-top: 20px;
	/* background-color: #00A0E8; */
	text-align: center;
}

div[class*="image"] img {
   
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	margin: auto;
	left: 0px;
	right: 0px;
}

.xihuan p {
   
	font-size: 12px;
	line-height: 1.5em;
}

.xihuan h2 {
   
	color: #df3033;
	font-size: 18px;
}

div[class*="text"]:nth-child(n+2) {
   
	width: 186px;
	height: 64px;
	border-left: 1px solid #ededed;
}

/*家用电器模块*/

.floor {
   
	margin-top: 30px;
}

.box_hd {
   
	height: 30px;
	border-bottom: 2px #C81623 solid;
	line-height: 30px;
}

.box_hd h3 {
   
	float: left;
	font-size: 18px;
	font-weight: 400;
	color: #C81623;
}

.tab_list {
   
	float: right;
	line-height: 30px;
}

.tab_list ul li {
   
	float: left;
}

.tab_list ul li a {
   
	font-size: 12px;
	margin: 0 15px;
}

.box_bd {
   
	height: 361px;
}

.tab_list_item div {
   
	float: left;
}

.col_210 {
   
	height: 361px;
	width: 210px;
	background-color: #f9f9f9;
	text-align: center;
}

.col_210 ul li {
   
	width: 90px;
	height: 35px;
	border-bottom: #ededed 1px solid;
	text-align: center;
	line-height: 35px;
}

.col_210 ul li a {
   
	font-size: 12px;
}

.col_210 ul li:nth-child(2n) {
   
	float: right;
	margin-right: 14px;
}

.col_210 ul li:nth-child(2n-1) {
   
	float: left;
	margin-left: 14px;
}

.qumiandianshi {
   
	width: 210px;
	text-align: center;
	margin-top: 27px;
}

.p8 {
   
	font-size: 20px;
}

.p9 {
   
	font-size: 14px;
}

.col_210 img {
   
	margin-top: 20px;
}

.col_329 {
   
	height: 360px;
	width: 329px;
	background-color: #aed6d8;
	color: #55949f;
	text-align: center;
}

.shuihu {
   
	margin-top: 39px;
	margin-left: 30px;
}

.p10 {
   
	font-size: 20px;
}

.col_329 img {
   
	margin-top: 34px;
}

.col_221_1 {
   
	height: 360px;
	width: 221px;
	/* background-color: #00A0E8; */
}

.hongpei {
   
	position: relative;
	width: 221px;
	height: 180px;
	border-bottom: #ededed 1px solid;
	border-right: #ededed 1px solid;
	/* background-color: #5FB200; */
}

.hongpei div {
   
	margin-top: 24px;
	margin-left: 28px;
}

.p11 {
   
	font-size: 18px;
	color: black;
}

.p12 {
   
	font-size: 14px;
	color: #e9424b;
}

.hongpei img {
   
	position: absolute;
	bottom: 0px;
	right: 6px;
}

.dianshi {
   
	position: relative;
	width: 221px;
	height: 180px;
	border-bottom: #ededed 1px solid;
	border-right: #ededed 1px solid;
	/* background-color: #C81623; */
}

.dianshi div {
   
	margin-top: 24px;
	margin-left: 28px;
}

.p13 {
   
	font-size: 18px;
	color: black;
}

.p14 {
   
	font-size: 14px;
	color: #e9424b;
}

.dianshi img {
   
	position: absolute;
	bottom: 0px;
	right: 6px;
}

.col_221_2 {
   
	height: 360px;
	width: 221px;
	text-align: center;
	border-bottom: #ededed 1px solid;
	border-right: #ededed 1px solid;
}

.col_221_2 div {
   
	width: 221px;
	text-align: center;
	margin-top: 72px;
}

.p15 {
   
	font-size: 20px;
}

.p16 {
   
	font-size: 16px;
	color: #b0b0b0;
}

.col_221_2 img {
   
	margin-top: 82px;
}

.col_219 {
   
	width: 219px;
	height: 360px;
}

.kongtiao {
   
	position: relative;
	width: 219px;
	height: 180px;
	border-bottom: #ededed 1px solid;
	border-right: #ededed 1px solid;
}

.kongtiao div {
   
	margin-top: 24px;
	margin-left: 28px;
}

.p17 {
   
	font-size: 18px;
	color: black;
}

.p18 {
   
	font-size: 14px;
	color: #e9424b;
}

.kongtiao img {
   
	position: absolute;
	bottom: 0px;
	right: 6px;
}

.fengshan {
   
	position: relative;
	width: 219px;
	height: 180px;
	border-bottom: #ededed 1px solid;
	border-right: #ededed 1px solid;
}

.fengshan div {
   
	margin-top: 24px;
	margin-left: 28px;
}

.p19 {
   
	font-size: 18px;
	color: black;
}

.p20 {
   
	font-size: 14px;
	color: #e9424b;
}

.fengshan img {
   
	width: 100px;
	position: absolute;
	bottom: 0px;
	right: 6px;
}

.daiyan {
   
	width: 1200px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

index.js

window.addEventListener('load', function() {
    /* index.js */
	if ((navigator.userAgent.match(
			/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
		))) {
   
		window.location.href = '../移动端京东页面布局/index.html'; <!-- 手机 -->
	}
	var focus = document.querySelector('.focus');
	var lunbotu = document.querySelector('.lunbotu');
	focus.addEventListener('mouseenter', function() {
   
		focus.children[0].style.display = 'block';
		focus.children[1].style.display = 'block';
		clearInterval(timer);
		timer = null;
	})
	focus.addEventListener('mouseleave', function() {
   
		focus.children[0].style.display = 'none';
		focus.children[1].style.display = 'none';
		timer = setInterval(function() {
   
			focus.children[1].click(); /* 调用点击事件 */
		}, 2000)
	})
	for (var i = 0; i < lunbotu.children.length; i++) {
   
		var li = document.createElement('li');
		focus.children[2].appendChild(li);
		li.setAttribute('index', i);
	}
	for (var j = 0; j < focus.children[2].children.length; j++) {
   
		focus.children[2].children[j].addEventListener('click', function() {
   
			for (var j = 0; j < focus.children[2].children.length; j++) {
   
				focus.children[2].children[j].style.backgroundColor = 'transparent';
			}
			this.style.backgroundColor = 'orange';
			var index = this.getAttribute('index');
			var target = -index * focus.offsetWidth;
			num = index;
			circle = index;
			animate(lunbotu, target, 10, 10);
		})
	}
	var first = lunbotu.children[0].cloneNode(true);
	lunbotu.appendChild(first);
	var num = 0;
	var circle = 0;
	var flag = true;
	focus.children[1].addEventListener('click', function() {
   
		num++;
		if (num == lunbotu.children.length - 1) {
   
			lunbotu.style.left = 0;
			num = 0;
		}
		var target = -num * focus.offsetWidth;
		animate(lunbotu, target, 10, 10);
		circle++;
		for (var i = 0; i < focus.children[2].children.length; i++) {
   
			focus.children[2].children[i].style.backgroundColor = 'transparent';
		}
		if (circle == lunbotu.children.length - 1) {
   
			circle = 0;
		}
		focus.children[2].children[circle].style.backgroundColor = 'orange';
	})
	/* 左侧按钮 */
	focus.children[0].addEventListener('click', function() {
   
		if (num == 0) {
   
			num = lunbotu.children.length - 1;
			lunbotu.style.left = -num * focus.offsetWidth + 'px';
		}
		num--;
		var target = -num * focus.offsetWidth;
		animate(lunbotu, target, 10, 10);
		circle--;
		if (circle < 0) {
   
			circle = lunbotu.children.length - 2;
		}
		for (var i = 0; i < focus.children[2].children.length; i++) {
   
			focus.children[2].children[i].style.backgroundColor = 'transparent';
		}
		focus.children[2].children[circle].style.backgroundColor = 'orange';
	})
	/* 自动播放 */
	var timer = setInterval(function() {
   
		focus.children[1].click(); /* 调用点击事件 */
	}, 2000)
});
$(function(){
   
	var flag = true;
	/* 当点击li的时候 */
	$('.navigation ul li').click(function(){
   
		flag = false;
		/* 获取当前点击的这个li的索引 赋值给index*/
		var index = $(this).index();
		/* 获取和当前li的索引相同的jiadian模块距离页面顶部的距离 并赋值给Tophead*/
		var Tophead = $('.jiadian').eq(index).offset().top;
		/* 给页面做动画效果 里面写的是body,html*/
		$("html,body").animate({
   
			/* 被卷入的高度是Tophead */
			scrollTop:Tophead
		},function(){
   
			flag = true;
		});
		$(this).siblings().removeClass('curret');
		$(this).addClass('curret');
	})
	
	function navigation(){
   
		/* 获取猜你喜欢模块距离页面顶部的距离 */
		var Top = $('.xihuan').offset().top;
		if($(document).scrollTop() >= Top){
   
			/* 淡入 */
			$('.navigation').fadeIn();
		}else{
   
			/* 淡出 */
			$('.navigation').fadeOut();
		}
	}
	/* 页面加载完成后调用函数 判断导航栏位置 使它显示还是隐藏 */
	navigation();
	$(window).scroll(function(){
   
		/* 页面滚动会调用函数 判断导航栏位置 使它显示还是隐藏 */
		navigation();
		if(flag){
   
			/* 遍历家用电器模块 */
			$('.jiadian').each(function(i,ele){
   
				if($(document).scrollTop() >= $(ele).offset().top){
   
					$('.navigation ul li').removeClass('curret');
					$('.navigation ul li').eq(i).addClass('curret');
				}
			})
			console.log(7777);
		}
	})
})

jQuery.js

/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){
   "use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){
   if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){
   "use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={
   },o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={
   },m=function(e){
   return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){
   return null!=e&&e===e.window},c={
   type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){
   var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){
   return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){
   return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){
   var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}k.fn=k.prototype={
   jquery:f,constructor:k,length:0,toArray:function(){
   return s.call(this)},get:function(e){
   return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){
   var t=k.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){
   return k.each(this,e)},map:function(n){
   return this.pushStack(k.map(this,function(e,t){
   return n.call(e,t,e)}))},slice:function(){
   return this.pushStack(s.apply(this,arguments))},first:function(){
   return this.eq(0)},last:function(){
   return this.eq(-1)},eq:function(e){
   var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){
   return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},k.extend=k.fn.extend=function(){
   var e,t,n,r,i,o,a=arguments[0]||{
   },s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{
   },s++),"object"==typeof a||m(a)||(a={
   }),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(k.isPlainObject(r)||(i=Array

最低0.47元/天解锁文章

诸葛龍

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿品优购案例

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /> &lt
复制链接

扫一扫