部分实现代码如下
首页index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站说明 -->
<meta name="description"
content="京东商城-专业的综合网上购物商城销售家电、数码通讯、电脑.、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<!--搜搜关键字 -->
<meta name="keywords" content="网上购物,网上商城手机笔记本,电脑MP3,CD,VCD,DV,相机,数码配件,手表,存储卡,京东">
<!-- 引入我们的favicon文件（网站图标） -->
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入京东初始化文件 -->
<link rel="stylesheet" href="css/initialize.css">
<!-- 引入主页的css文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 引入我们需要的广告文件 -->
<link rel="stylesheet" href="css/notice.css">
<!-- 引入我们需要的js文件 -->
<script type="text/javascript" src="js/my.js"></script>
<!-- 引入动画的js文件 -->
<script src="js/animate.js"></script>
<!-- 引入我们的轮播图js文件 -->
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
</head>
<body>
<!-- 广告部分start -->
<div class="top">
<div class="w" id="delete">
<a href="#" class="top1"></a>
<a href="#" class="top2"></a>
<a href="#" class="top3"></a>
<div class="top4">
</div>
<div class="div" id="n">x</div>
</div>
</div>
<!--头部部分 end -->
<!-- 广告部分 end -->
<!-- 快捷导航 start -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>
<a href="#">河南</a>
<div class="sitelist"></div>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>
<a href="#">你好，请登录 <span class="style_red">免费注册</span> </a>
</li>
<li></li>
<li>
<a href="#">我的订单</a>
</li>
<li></li>
<li>
<a href="#" class="arrow_icon">我的京东
</a>
<div class="mylist">
<ol class="firstlist">
<li>待处理订单</li>
<li>我的问答</li>
<li>降价商品</li>
<li>返修退换货</li>
<li>我的关注</li>
</ol>
<ol class="firstlist">
<li>我的京东</li>
<li>我的优惠券</li>
<li>我的白条</li>
<li>我的理财</li>
</ol>
<ol>
<li>帮助中心</li>
<li>售后服务</li>
<li>在线客服</li>
<li>意见建议</li>
<li>电话客服</li>
<li>客服邮箱</li>
<li>金融资讯</li>
<li>全球售客服</li>
<li>企业客服</li>
</ol>
</div>
</li>
<li></li>
<li>
<a href="#">京东会员</a>
</li>
<li></li>
<li>
<a href="#" class="arrow_icon style_red">企业采购</a>
<div class="entPrice">
<ol>
<li>企业购</li>
<li>公共采购</li>
<li>工业品</li>
<li>商用场景管</li>
<li>礼品卡</li>
<li>微信企业购</li>
<li>工业优选</li>
<li>京东锦里</li>
<li>大中型采购</li>
</ol>
</div>
</li>
<li></li>
<li>
<a href="#" class="arrow_icon">商家服务</a>
<div class="mslist">
<ol>
<li>合作招聘</li>
<li>学习中心</li>
<li>商家平台</li>
<li>京麦工作台</li>
<li>商家帮助</li>
<li>工作平台</li>
</ol>
</div>
</li>
<li></li>
<li>
<a href="#" class="arrow_icon">网站导航</a>
</li>
<li></li>
<li>
<a href="#">手机京东</a>
<div class="phonelist">
<ol>
<li class="one">
</li>
<p>手机京东</p>
<span class="style_red">新人专属大礼包</span>
<div class="iphone">
</div>
</ol>
<ol>
<li class="two">
</li>
<p>关注京东</p>
<span class="">JD.com</span>
<div class="iphone">
</div>
</ol>
<ol>
<li class="three">
</li>
<p>京东金融客户端</p>
<span class="style_red">新人专属大礼包</span>
<div class="iphone">
</div>
</ol>
<ol>
<li class="four">
</li>
<p>京东健康客户端</p>
<!-- <span class="style_red">新人专属大礼包</span> -->
<div class="iphone">
</div>
</ol>
<ol class="six">
<li class="five">
</li>
<p>关注京东小程序</p>
<span class="style_red">新人0.1元购</span>
</ol>
</div>
</li>
<li></li>
<li>
<a href="#">网站无障碍</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 快捷导航 end -->
<!-- 头部部分 start -->
<div class="headerCon">
<header class="header w">
<div class="logo">
<h1><a href="index.html" target="_blank" title="京东商城">京东商城</a></h1>
</div>
<div class="search">
<input type="search" placeholder="超级品牌联盟盛典，至高24期免息" id="search1">
<button><span></span></button>
</div>
<div class="shopcar">
<p class="style_red">我的购物车</p>
<i class="count">0</i>
</div>
<div class="hotWords">
<a href="#" class="style_red">好物超实在</a>
<a href="#">旺旺</a>
<a href="#">拍拍二手</a>
<a href="#">京东京造</a>
<a href="#">11.11</a>
<a href="#">苹果</a>
<a href="#">电脑数码</a>
<a href="#">家电补贴</a>
<a href="#">健康好物</a>
</div>
<div class="hotWordsitmes">
<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="#">PLUS会员</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 class="pic">
<img src="image/notice.jpg" alt="">
</div>
</header>
</div>
<!-- 头部部分 end -->
<!-- nav导航部分 start-->
<div class="nav clearfix">
<div class="w">
<div class="navCon">
<div class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机/</a> <a href="#">数码</a>/<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="list.html">女鞋、 <a href="#"> 箱包、</a> <a href="#">珠宝</a> <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>
<div class="livegame">
<ol id="firstcrowd">
<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>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5> 交通出行</h5>
</a>
<a href="#">国内机票</a>
<a href="#">国际机票</a>
<a href="#">火车票</a>
<a href="#">机场服务</a>
<a href="#">机票套餐</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>酒店预订</h5>
</a>
<a href="#">国内酒店</a>
<a href="#">国际酒店</a>
<a href="#">酒店套餐</a>
<a href="#">超值精选</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>旅游度假</h5>
</a>
<a href="#">国内旅游</a>
<a href="#">全球签证</a>
<a href="#">景点门票</a>
<a href="#">旅行保险</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5> 定制旅游</h5>
</a>
<a href="#">团队建设</a>
<a href="#">奖励旅游</a>
<a href="#">会议周边</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>演出票务</h5>
</a>
<a href="#">电影选座</a>
<a href="#">演唱会</a>
<a href="#">音乐会</a>
<a href="#">话剧歌剧</a>
<a href="#">体育赛事</a>
<a href="#">舞蹈芭蕾</a>
<a href="#">戏曲综艺</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>生活缴费</h5>
</a>
<a href="#">水费</a>
<a href="#">电费</a>
<a href="#">燃气费</a>
<a href="#">城市通</a>
<a href="#">加油卡</a>
<a href="#">油卡充值</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>生活服务</h5>
</a>
<a href="#">家政保洁</a>
<a href="#">摄影写真</a>
<a href="#">丽人/养生</a>
<a href="#">商务服务</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>彩票</h5>
</a>
<a href="#">数据图表</a>
<a href="#">数据图表</a>
<a href="#">燃气费</a>
<a href="#">城市通</a>
<a href="#">加油卡</a>
<a href="#">油卡充值</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>海外生活</h5>
</a>
<a href="#">海外房产</a>
<a href="#">海外购物</a>
<a href="#">游戏周边</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>彩票</h5>
</a>
<a href="#">数据图表</a>
<a href="#">数据图表</a>
<a href="#">燃气费</a>
<a href="#">城市通</a>
<a href="#">加油卡</a>
<a href="#">油卡充值</a>
</li>
</ol>
<img src="upload/atl.webp" alt="" class="alt">
<img src="upload/nara.webp" alt="" class="nara">
<img src="upload/ply.webp" alt="" class="ply">
<img src="upload/zxly.webp" alt="" class="zxly">
<img src="upload/飞机.webp" alt="" class="feiji">
</div>
</li>
<li><a href="#">众筹 / 白条 / 保险</a>
<div class="crowdlist">
<ol>
<li id="firstcrowd">
<a href="#">金融首页</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5> 众筹</h5>
</a>
<a href="#">智能硬件</a>
<a href="#">流行文化</a>
<a href="#">盛行美学</a>
<a href="#">公益</a>
<a href="#">其他权益众筹</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5> 东家</h5>
</a>
<a href="#">阳光私募</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>白条</h5>
</a>
<a href="#">京东白条</a>
<a href="#">白条联名卡</a>
<a href="#">京东钢镚</a>
<a href="#">安居白条</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5> 支付</h5>
</a>
<a href="#">京东支付</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>保险</h5>
</a>
<a href="#">健康险</a>
<a href="#">人寿险</a>
<a href="#">意外险</a>
<a href="#">旅游险</a>
<a href="#">财产险</a>
<a href="#">车险</a>
</li>
</ol>
<ol id="sencondcrowd">
<li>
<a href="#" id="firstA">
<h5>企业金融</h5>
</a>
<a href="#">京保贝</a>
<a href="#">京小贷</a>
<a href="#">企业主贷</a>
<a href="#">企业金采</a>
<a href="#">采购融资</a>
<a href="#">动产融资</a>
<a href="#">京票秒贴</a>
<a href="#">运费保险</a>
</li>
</ol>
</div>
</li>
<li><a href="#">安装 / 清洗 / 二手 / 维修</a></li>
</ul>
</div>
<div class="fous ">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r">
>
</a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"> <img src="image/bg.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="upload/sansun.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/luogi.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/moutai.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="upload/merries.webp" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/mzl.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/oppo.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
</div>
<div class="fousList">
<ul>
<li><img src="image/京东_01.jpg" alt=""></li>
<li><img src="image/京东_02.jpg" alt=""></li>
<li><img src="image/京东_03.jpg" alt=""></li>
</ul>
</div>
<div class="naviten">
<ul class="navitenFirst">
<li class="photo"></li>
<li class="wordy">
<p>HI~欢迎观临京东</p>
<a href="#">登录</a> |
<a href="#" class="end">注册</a>
</li>
<li class="one">新人福利</li>
<li class="two">PLUS会员</li>
</ul>
<div class="news clearfix">
<div class="news-hd">
<h5>京东快报</h5>
<a href="#" class="more">更多</a>
</div>
<div class="news-bd">
<ul>
<li><span>HOT</span> <a href="#">四核战芯入门，WIFI 6路由现在有新选择</a></li>
<li><span>最热</span> <a href="#">华为Mate50 Pro DXO总分149分</a> </li>
<li><span>热评</span> <a href="#">三星显示器技术全面升级，高清画质丰富游戏体验</a></li>
<li><span>热门</span> <a href="#">三星显示器炫酷外观实力强悍，打造专属电竞空间</a></li>
</ul>
</div>
</div>
<div class="live">
<ul>
<li>
<i class="gift_gard"></i>
<p>礼品卡</p>
</li>
<li>
<i class="firm"></i>
<p>企业购</p>
</li>
<li>
<i class="Tariffe"></i>
<p>话费</p>
</li>
<li>
<i class="game"></i>
<p>游戏</p>
</li>
<li>
<i class="refuelling"></i>
<p>加油卡</p>
</li>
<li>
<i class="plane"></i>
<p>飞机票</p>
</li>
<li>
<i class="one"></i>
<p>白条</p>
</li>
<li>
<i class="two"></i>
<p>众筹</p>
</li>
<li>
<i class="three"></i>
<p>火车票</p>
</li>
<li>
<i class="four"></i>
<p>五金城</p>
</li>
<li>
<i class="five"></i>
<p>酒店</p>
</li>
<li>
<i class="six"></i>
<p>电影票</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- nav导航部分 end -->
<!-- 推荐模块 start -->
<div class=" w" id="reom">
<div class="reom-hd">
<h3>京东秒杀</h3>
<p>10:00点场 距结束</p>
<div class="timeDown seckill-main">
<span id="box1"></span>
<span id="box2"></span>
<span id="box3"></span>
</div>
</div>
<div id="timer"></div>
<div class="reom-bd">
<ul>
<li>
<img src="upload/1.webp" alt="">
<p>MORRORART T2壁画歌词音响可壁挂油画音箱蓝牙音箱悬浮歌词字幕音响HIFI家用智能创意礼物</p>
<span class="style_red">￥4599.00</span>
</li>
<li>
<img src="upload/2.webp" alt="">
<p>【现货速发】小米 MIX4 骁龙888+ 陶瓷机身 后置 1 亿像素三摄 陶瓷黑 12GB+256GB【晒单返20】</p>
<span class="style_red">￥3799.00</span>
</li>
<li>
<img src="upload/3.webp" alt="">
<p>三星 SAMSUNG Galaxy S22 超视觉夜拍系统超清夜景 超电影影像系统 超耐用精工设计 8GB+256GB 羽梦白 5G手机</p>
<span class="style_red">￥4569.00</span>
</li>
<div class="last">
<img src="upload/4.webp" alt="">
<p>商场办公专用</p>
<h5>最高直降100元</h5>
<span><a href="#">京东秒杀</a></span>
</div>
</ul>
</div>
<ul class="scorll_list">
<li>
<a href="javascript:void(0);">京东秒杀</a>
</li>
<li></li>
<li>
<a href="javascript:void(0);">特色特选</a>
</li>
<li></li>
<li>
<a href="javascript:void(0);">频道广场</a>
</li>
<li></li>
<li>
<a href="javascript:void(0);">为你推荐</a>
</li>
<li></li>
<li>
<a href="javascript:void(0);">联系客服</a>
</li>
<li></li>
<li>
<a href="javascript:void(0);">反馈我们</a>
</li>
<li></li>
<span class="goBack">
<a href="javascript:void(0)">返回顶部</a>
</span>
</ul>
</div>
<!-- 推荐模块 end --->
<!-- 商品推荐模块 start -->
<div class="goods">
<div class="w">
<ul class="firstgoods">
<li>
<img src="image/phone.webp" alt="">
<h5>手机超值购</h5>
<p>手机PLUS盛典</p>
</li>
<li>
<img src="upload/sbwebp.webp" alt="">
<h5>每满299减50</h5>
<p>跨境数码潮电</p>
</li>
<li>
<img src="upload/jiu.webp" alt="">
<h5>抢111.1劵</h5>
<p>美酒狂欢</p>
</li>
<li>
<img src="upload/zd.webp" alt="">
<h5>每满299减50</h5>
<p>抢健康好物</p>
</li>
<li>
<img src="upload/moco.webp" alt="">
<h5>美味一元抢</h5>
<p>休食水饮</p>
</li>
<li class="lastgoods">
<img src="upload/shubiao.webp" alt="">
<h5>限时六期免息</h5>
<p>手机PLUS盛典</p>
</li>
</ul>
<ul class="secondgoods">
<li>
<img src="image/phone.webp" alt="">
<h5>手机超值购</h5>
<p>手机PLUS盛典</p>
</li>
<li>
<img src="upload/sbwebp.webp" alt="">
<h5>每满299减50</h5>
<p>跨境数码潮电</p>
</li>
<li>
<img src="upload/jiu.webp" alt="">
<h5>抢111.1劵</h5>
<p>美酒狂欢</p>
</li>
<li>
<img src="upload/zd.webp" alt="">
<h5>每满299减50</h5>
<p>抢健康好物</p>
</li>
<li>
<img src="upload/moco.webp" alt="">
<h5>美味一元抢</h5>
<p>休食水饮</p>
</li>
<li class="lastgoods">
<img src="upload/shubiao.webp" alt="">
<h5>限时六期免息</h5>
<p>手机PLUS盛典</p>
</li>
</ul>
</div>
</div>
<!-- 商品推荐模块 end -->
<!-- 日常推荐模块 start -->
<div class="w">
<div class="daily">
<div class="dailyLeft">
<div class="dailyLeft_hd">
<h3>每日特价</h3>
<i class="daily_arrow"></i>
<span class="style_red">精选</span>
</div>
<div class="dailyLeft_bd">
<div class="dailyPrice">
<span>55天最低价</span>
<img src="upload/yuebingwebp.webp" alt="">
<div class="dailymessage">
广式五仁月饼1斤
</div>
<div class="dailymessage_price ">
￥9.99
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/hmt.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/jb.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/wrybwebp.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/btm.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
</div>
</div>
<div class="dailyRight">
<div class="dailyLeft_hd">
<h3>每日特价</h3>
<i class="daily_arrow"></i>
<span class="style_red">精选</span>
</div>
<div class="dailyLeft_bd">
<div class="dailyPrice">
<span>55天最低价</span>
<img src="upload/yuebingwebp.webp" alt="">
<div class="dailymessage">
广式五仁月饼1斤
</div>
<div class="dailymessage_price ">
￥9.99
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/hmt.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/jb.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/wrybwebp.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
<div class="dailyLeft_dd">
<img src="upload/btm.webp" alt="">
<span>黄心猕猴桃12<br>枚
中果单果70-90g</span>
<div class="hmt_price">
<span class="style_red">￥9.9</span>
</div>
<div class="hmt_num">
<span>已购<span class="style_red">302</span>件</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 日常推荐模块 end -->
<!-- 广场模式start -->
<div class="w">
<div class="Channel_Square">
<div class="CS_top">
<div class="CS_font">
<h3>频道广场</h3>
</div>
</div>
<div class="CS_Con">
<a href="#">
<img src="upload/书.webp" alt="">
</a>
<a href="#">
<img src="upload/牛奶.webp" alt="">
</a>
<div class="CS_Conlist">
<ul class="ConlistOne">
<li>
<a href="#">
<span class="span1">智能数码</span>
<span class="span2">尽享玩物</span>
</a>
</li>
<li class="ConLi">
<img src="upload/茶壶.webp" alt="">
<img src="upload/摄像机.webp" alt="" class="picno">
</li>
</ul>
<ul class="Conlisttwo">
<li>
<a href="#">
<span class="span1">家装城</span>
<span class="span2">用心装好家一站式购齐</span>
</a>
</li>
<li class="ConLi">
<img src="upload/电钻.webp" alt="">
<img src="upload/床.webp" alt="" class="picno">
</li>
</ul>
</div>
<div class="CS_Conlista">
<ul class="Conlistthree">
<li>
<a href="#">
<span class="span1">拍拍二手</span>
<span class="span2">大牌1元抢</span>
</a>
</li>
<li class="ConLi">
<img src="upload/手表.webp" alt="">
<img src="upload/钢琴.webp" alt="" class="picno">
</li>
</ul>
<ul class="Conlistfour">
<li>
<a href="#">
<span class="span1">家用电器</span>
<span class="span2">买家电 上京东</span>
</a>
</li>
<li class="ConLi">
<img src="upload/冰箱.webp" alt="">
<img src="upload/洗衣机.webp" alt="" class="picno">
</li>
</div>
</div>
<div class="CS_bottom">
<ul class="CS_bottomtop">
<li>
<a href="#">
<span class="span1">企业购</span>
<span class="span2">一站式企业采购齐全</span>
</a>
<img src="upload/wifi.webp" alt="" class="wifi">
<img src="upload/油.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东手机</span>
<span class="span2">一个极客的诞生</span>
</a>
<img src="upload/手机1.webp" alt="" class="wifi">
<img src="upload/手机2.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">厨卫电器</span>
<span class="span2">百变厨房为你大换新</span>
</a>
<img src="upload/rsq.wenp.webp" alt="" class="wifi">
<img src="upload/bx.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东美化</span>
<span class="span2">京东美妆，懂你的没</span>
</a>
<img src="upload/hzp (2).webp" alt="" class="wifi">
<img src="upload/hzp.webp" alt="" class="you">
</li>
</ul>
</div>
<div class="CS_bottom">
<ul class="CS_bottomtop">
<li>
<a href="#">
<span class="span1">企业购</span>
<span class="span2">一站式企业采购齐全</span>
</a>
<img src="upload/wifi.webp" alt="" class="wifi">
<img src="upload/油.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东手机</span>
<span class="span2">一个极客的诞生</span>
</a>
<img src="upload/手机1.webp" alt="" class="wifi">
<img src="upload/手机2.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">厨卫电器</span>
<span class="span2">百变厨房为你大换新</span>
</a>
<img src="upload/rsq.wenp.webp" alt="" class="wifi">
<img src="upload/bx.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东美化</span>
<span class="span2">京东美妆，懂你的没</span>
</a>
<img src="upload/hzp (2).webp" alt="" class="wifi">
<img src="upload/hzp.webp" alt="" class="you">
</li>
</ul>
</div>
<div class="CS_bottom">
<ul class="CS_bottomtop">
<li>
<a href="#">
<span class="span1">企业购</span>
<span class="span2">一站式企业采购齐全</span>
</a>
<img src="upload/wifi.webp" alt="" class="wifi">
<img src="upload/油.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东手机</span>
<span class="span2">一个极客的诞生</span>
</a>
<img src="upload/手机1.webp" alt="" class="wifi">
<img src="upload/手机2.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">厨卫电器</span>
<span class="span2">百变厨房为你大换新</span>
</a>
<img src="upload/rsq.wenp.webp" alt="" class="wifi">
<img src="upload/bx.webp" alt="" class="you">
</li>
<li>
<a href="#">
<span class="span1">京东美化</span>
<span class="span2">京东美妆，懂你的没</span>
</a>
<img src="upload/hzp (2).webp" alt="" class="wifi">
<img src="upload/hzp.webp" alt="" class="you">
</li>
</ul>
</div>
</div>
</div>
<!-- 广场模式 end -->
<!-- 推荐模块 strat -->
<div class="w">
<div class="Channel_Square">
<div class="CS_top">
<div class="CS_font">
<h3>为你推荐</h3>
</div>
</div>
<div class="nominate_top">
<ul>
<li>
<a href="#">
<h5 class="nominate_one" id="color_white">精选</h5>
<p id="style_red">猜你喜欢</p>
</a>
</li>
<li></li>
<li>
<a href="#">
<h5>智能先锋</h5>
<p>大电器城</p>
</a>
</li>
<li></li>
<li>
<a href="#">
<h5>进口好物</h5>
<p>京东国际</p>
</a>
</li>
<li></li>
<li>
<a href="#">
<h5>居家优品</h5>
<p>品质生活</p>
</a>
</li>
<li></li>
<li>
<a href="#">
<h5>时装达人</h5>
<p>美妆穿搭</p>
</a>
</li>
<li></li>
<li>
<a href="#">
<h5>超市百货</h5>
<p>百货生鲜</p>
</a>
</li>
</ul>
</div>
<div class="dayRs">
<ul>
<li>
<img src="upload/hkt.webp" alt="">
<p>海尔（Haier）3匹新一级能效变频自清洁冷暖空调 立柜机式客厅空调 【3P自清洁新一级节能家用柜机空调】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5499.</span>
<span class="priceTwo">00</span>
</div>
<div class="juan">卷</div>
</li>
<li>
<img src="upload/sx.webp" alt="">
<p>三星 SAMSUNG Galaxy S22 超视觉夜拍系统超清夜景 超电影影像系统 超耐用精工设计 8GB+128GB 曜夜黑 5G手机</p>
<div class="price">
<i>￥</i>
<span class="priceOne">4099.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/tb.webp" alt="">
<p>ThinkPad 联想ThinkBook 14+ 14英寸12代英特尔酷睿处理器笔记本电脑 i5-12500H 16G Xe显卡 06CD】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5529.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/Nature.webp" alt="">
<p>大自然（Nature） 【A 】国标ENF零醛智造环保耐磨地暖强化复合木地板11mm森爱包安装送辅料 一室清雅</p>
<div class="price">
<i>￥</i>
<span class="priceOne">205.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/bx.webp" alt="">
<p>【双蒸发器】海尔冰箱双开门500升一级能效双变频风冷无霜双系统对开三门嵌入式家用超薄大容量省电冰箱 500升侧T+全变温空间+Epp超净杀菌</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5598.</span>
<span class="priceTwo">09</span>
</div>
</li>
</ul>
</div>
<div class="dayRs">
<ul>
<li>
<img src="upload/hkt.webp" alt="">
<p>海尔（Haier）3匹新一级能效变频自清洁冷暖空调 立柜机式客厅空调 【3P自清洁新一级节能家用柜机空调】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5499.</span>
<span class="priceTwo">00</span>
</div>
<div class="juan">卷</div>
</li>
<li>
<img src="upload/sx.webp" alt="">
<p>三星 SAMSUNG Galaxy S22 超视觉夜拍系统超清夜景 超电影影像系统 超耐用精工设计 8GB+128GB 曜夜黑 5G手机</p>
<div class="price">
<i>￥</i>
<span class="priceOne">4099.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/tb.webp" alt="">
<p>ThinkPad 联想ThinkBook 14+ 14英寸12代英特尔酷睿处理器笔记本电脑 i5-12500H 16G Xe显卡 06CD】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5529.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/Nature.webp" alt="">
<p>大自然（Nature） 【A 】国标ENF零醛智造环保耐磨地暖强化复合木地板11mm森爱包安装送辅料 一室清雅</p>
<div class="price">
<i>￥</i>
<span class="priceOne">205.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/bx.webp" alt="">
<p>【双蒸发器】海尔冰箱双开门500升一级能效双变频风冷无霜双系统对开三门嵌入式家用超薄大容量省电冰箱 500升侧T+全变温空间+Epp超净杀菌</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5598.</span>
<span class="priceTwo">09</span>
</div>
</li>
</ul>
</div>
<div class="dayRs">
<ul>
<li>
<img src="upload/hkt.webp" alt="">
<p>海尔（Haier）3匹新一级能效变频自清洁冷暖空调 立柜机式客厅空调 【3P自清洁新一级节能家用柜机空调】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5499.</span>
<span class="priceTwo">00</span>
</div>
<div class="juan">卷</div>
</li>
<li>
<img src="upload/sx.webp" alt="">
<p>三星 SAMSUNG Galaxy S22 超视觉夜拍系统超清夜景 超电影影像系统 超耐用精工设计 8GB+128GB 曜夜黑 5G手机</p>
<div class="price">
<i>￥</i>
<span class="priceOne">4099.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/tb.webp" alt="">
<p>ThinkPad 联想ThinkBook 14+ 14英寸12代英特尔酷睿处理器笔记本电脑 i5-12500H 16G Xe显卡 06CD】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5529.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/Nature.webp" alt="">
<p>大自然（Nature） 【A 】国标ENF零醛智造环保耐磨地暖强化复合木地板11mm森爱包安装送辅料 一室清雅</p>
<div class="price">
<i>￥</i>
<span class="priceOne">205.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/bx.webp" alt="">
<p>【双蒸发器】海尔冰箱双开门500升一级能效双变频风冷无霜双系统对开三门嵌入式家用超薄大容量省电冰箱 500升侧T+全变温空间+Epp超净杀菌</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5598.</span>
<span class="priceTwo">09</span>
</div>
</li>
</ul>
</div>
<div class="dayRs">
<ul>
<li>
<img src="upload/hkt.webp" alt="">
<p>海尔（Haier）3匹新一级能效变频自清洁冷暖空调 立柜机式客厅空调 【3P自清洁新一级节能家用柜机空调】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5499.</span>
<span class="priceTwo">00</span>
</div>
<div class="juan">卷</div>
</li>
<li>
<img src="upload/sx.webp" alt="">
<p>三星 SAMSUNG Galaxy S22 超视觉夜拍系统超清夜景 超电影影像系统 超耐用精工设计 8GB+128GB 曜夜黑 5G手机</p>
<div class="price">
<i>￥</i>
<span class="priceOne">4099.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/tb.webp" alt="">
<p>ThinkPad 联想ThinkBook 14+ 14英寸12代英特尔酷睿处理器笔记本电脑 i5-12500H 16G Xe显卡 06CD】</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5529.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/Nature.webp" alt="">
<p>大自然（Nature） 【A 】国标ENF零醛智造环保耐磨地暖强化复合木地板11mm森爱包安装送辅料 一室清雅</p>
<div class="price">
<i>￥</i>
<span class="priceOne">205.</span>
<span class="priceTwo">00</span>
</div>
</li>
<li>
<img src="upload/bx.webp" alt="">
<p>【双蒸发器】海尔冰箱双开门500升一级能效双变频风冷无霜双系统对开三门嵌入式家用超薄大容量省电冰箱 500升侧T+全变温空间+Epp超净杀菌</p>
<div class="price">
<i>￥</i>
<span class="priceOne">5598.</span>
<span class="priceTwo">09</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--推荐模块 end -->
<!-- 脚步模块的制作start -->
<footer class="footer">
<div class="footerCon w">
<ul class="footerCon_list">
<li>
<h5 class="duo">多</h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5 class="kuai">快</h5>
<p>多仓直发，急速配送</p>
</li>
<li>
<h5 class="hao">好</h5>
<p>正品行货，精致服务</p>
</li>
<li>
<h5 class="sheng">省</h5>
<p>天天低价，畅选无忧</p>
</li>
</ul>
</div>
<div class="footerLinks w">
<div class="w footer_help">
<dl>
<dt><a href="#">服务指南</a> </dt>
<dd><a href="#">购物流程</a> </dd>
<dd><a href="#">会员介绍</a> </dd>
<dd><a href="#">生活旅行</a> </dd>
<dd><a href="#">常见问题</a> </dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a> </dd>
</dl>
<dl>
<dt><a href="#">配送方式</a> </dt>
<dd><a href="#">上门自提</a> </dd>
<dd><a href="#">配送服务查询</a> </dd>
<dd><a href="#">配送费收取标准</a> </dd>
<dd><a href="#">海外配送</a> </dd>
<dd><a href="#">顺丰包邮</a></dd>
<dd><a href="#">海外配送</a> </dd>
</dl>
<dl>
<dt><a href="#">支付方式</a> </dt>
<dd><a href="#">货到付款</a> </dd>
<dd><a href="#">在线支付</a> </dd>
<dd><a href="#">分期付款</a> </dd>
<dd><a href="#">邮局汇款</a> </dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl>
<dt><a href="#">售后服务</a> </dt>
<dd><a href="#">售后政策</a> </dd>
<dd><a href="#">价格保护</a> </dd>
<dd><a href="#">退款说明</a> </dd>
<dd><a href="#">返修/退换货</a> </dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt><a href="#">特色服务</a> </dt>
<dd><a href="#">夺宝岛</a> </dd>
<dd><a href="#">DLY装机</a> </dd>
<dd><a href="#">延保服务</a> </dd>
<dd><a href="#">京东E卡</a> </dd>
<dd><a href="#">京东通信</a></dd>
<dd><a href="#">京鱼座智能</a></dd>
</dl>
<div class="footerLast_help">
<h5>京东自营覆盖区县</h5>
<p>
京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
</p>
<a href="#">查看详情 <i class="iconfont"></i></a>
</div>
</div>
</div>
<div class="footerBottom w">
<div class="copyright_List">
<a href="#">关于我们</a> |
<a href="#">联系我们</a> |
<a href="#">联系客服</a> |
<a href="#">合作招商</a> |
<a href="#">商家帮助</a> |
<a href="#">营销中心</a> |
<a href="#">手机京东</a> |
<a href="#">友情链接</a> |
<a href="#">销售联盟</a> |
<a href="#">京东社区</a> |
<a href="#">风险监测</a> |
<a href="#">隐私政策</a> |
<a href="#">京东公益</a> |
<a href="#">English Site</a> |
<a href="#">Media & IR</a>
</div>
<div class="copyRigth w">
京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br>
互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155 <br>
Copyright © 2004 - 2022 京东JD.com 版权所有 | 消费者维权热线：4006067733 | 经营证照 | (京)网械平台备字(2018)第00003号 | 营业执照 |
增值电信业务经营许可证 <br>
<i class="gs"></i> <span>Global Site</span> |<i class="cp"></i> <span>Сайт России</span> |<i
class="Si"></i> <span>Situs
Indonesia</span> | <i class="Sd"></i>
<span> Sitio de España</span> |
<i class="Ed"></i><span> เว็บไซต์ประเทศไทย</span>
<br>
京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
</div>
<div class="picture">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</footer>
<!-- 脚步模块的制作 end -->
<!-- 必须在这里引入我们的懒加载插件 -->
<!-- <script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function (i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function (i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script> -->
</body>
</html>相关的css文件
css初始化文件
/* 清除内外边距为零 */
* {
margin: 0;
padding: 0;
/* CSS3里面的盒子模型 */
box-sizing: border-box;
}
/* em 和 i 字体的斜体不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li的小圆点 */
li {
list-style: none
}
img {
/* border:0照顾低版本浏览器，如果 图片外面包含链接会有边框的问题 */
border: 0;
/* 取消图片底层有空白缝隙的问题 */
vertical-align: middle
}
/* 当鼠标经过button的时候，鼠标变成小手 */
button {
cursor: pointer
}
/* */
a {
/* */
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/*默认有灰色边框我们需要手动去掉*/
border: 0;
outline: none;
}
body {
/* 抗锯齿型，让文字显示的更加亲切 */
-webkit-font-smoothing: antialiased;
background-color: #f4f4f4;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 使用伪元素清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}首页index.css文件
.w {
width: 1192px;
margin: 0 auto;
}
body {
height: 3000px;
}
#style_red {
color: #e2231a;
}
/* 声明字体 这里要注意位置的问题 */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?515mon');
src: url('../fonts/icomoon.eot?515mon#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?515mon') format('truetype'),
url('../fonts/icomoon.woff?515mon') format('woff'),
url('../fonts/icomoon.svg?515mon#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.style_red {
color: #ff0000;
}
/* 快捷导航部分 */
.shortcut {
height: 30px;
line-height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #dddddd;
}
.fl {
float: left;
}
.fl ul li {
position: relative;
padding-left: 10px;
padding-bottom: 2px;
}
.fl ul li a {
padding-right: 5px;
}
.fl ul li:hover {
background-color: #fff;
z-index: 2;
}
.fl ul li .sitelist {
position: absolute;
top: 30px;
left: 0;
width: 300px;
height: 400px;
background-color: #fff;
z-index: 1;
box-shadow: 1px 1px #ccc;
display: none;
}
.fl ul li:hover ul {
z-index: 99;
padding-bottom: 2px;
border-bottom: none;
}
.fl ul li:hover .sitelist {
border: 1px solid #ccc;
display: block;
}
.fl ul li::before {
content: '\e947';
font-family: 'icomoon';
color: #f10215;
padding-right: 5px;
}
.fr {
float: right;
padding-right: 5px;
}
.fr ul>li {
position: relative;
float: left;
}
.fr ul>li:hover {
/* display: block; */
background-color: #fff;
}
/* 使用属性选择器 */
.shortcut .fr ul>li:nth-child(even) {
width: 1px;
height: 10px;
background-color: #cccccc;
margin: 11px 12px 9px;
}
.mslist {
display: none;
position: absolute;
top: 30px;
right: 0;
width: 200px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
box-shadow: 1px 1px #ddd;
z-index: 1;
}
.mslist ol li {
float: left;
padding: 0 15px;
line-height: 33px;
}
.entPrice .fr ul li>.mslist li:hover {
cursor: pointer;
color: #e1251b;
}
.fr ul li:hover .mslist {
display: block;
}
.fr ul li .mylist {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 282px;
height: 231px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
box-shadow: 1px 1px #ccc;
z-index: 1;
}
.fr ul li:hover .mylist {
display: block;
}
.fr ul li .mylist ol {
height: 59px;
/* background-color: aqua; */
margin: 5px 0;
}
.fr ul li .entPrice {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 153px;
height: 140px;
background-color: #fff;
box-shadow: 2px 2px #ccc;
z-index: 1;
}
.fr ul li:hover .entPrice {
display: block;
}
.fr ul li .entPrice>ol li {
float: left;
padding-left: 13px;
line-height: 28px;
}
.fr ul li .entPrice>ol li:hover {
color: #e1251b;
}
.firstlist {
border-bottom: 1px solid #ddd;
}
.fr ul li div>ol li {
/* margin-top: 12px; */
float: left;
line-height: 30px;
padding: 0 15px;
}
.fr ul li div ol li:hover {
cursor: pointer;
color: #e1251b;
}
.fr>ol li {
padding: 2px 22px;
float: left;
}
.phonelist {
display: none;
position: absolute;
top: 30px;
right: 0;
background-color: #fff;
width: 190px;
height: 506px;
z-index: 1;
border: 1px solid #ccc;
box-shadow: 0 2px #60575a;
}
.fr ul li:hover .phonelist {
display: block;
}
.phonelist>ol {
height: 100px;
/* background-color: aqua; */
border-bottom: 1px solid #ddd;
}
.phonelist .six {
border-bottom: none;
}
.phonelist>ol .one {
margin: 13px 4px 10px 5px;
height: 74px;
width: 74px;
border: 1px solid#ccc;
background: url(../image/jd1.png) no-repeat;
}
.phonelist>ol .two {
margin: 13px 4px 10px 5px;
height: 74px;
width: 74px;
border: 1px solid#ccc;
background: url(../image/jd2.png) no-repeat;
}
.phonelist>ol .three {
margin: 13px 4px 10px 5px;
height: 74px;
width: 74px;
border: 1px solid#ccc;
background: url(../image/jd3.png) no-repeat;
}
.phonelist>ol .four {
margin: 13px 4px 10px 5px;
height: 74px;
width: 74px;
border: 1px solid#ccc;
background: url(../image/jd4.png) no-repeat;
}
.phonelist>ol .five {
margin: 13px 4px 10px 5px;
height: 74px;
width: 74px;
border: 1px solid#ccc;
background: url(../image/jd5.png) no-repeat;
}
.phonelist>ol p {
padding-top: 13px;
display: block;
line-height: 20px;
}
.phonelist .iphone {
margin-left: 84px;
width: 73px;
height: 21px;
background: url(../image/jd6.jpg);
}
.arrow_icon::after {
content: '\e900';
font-family: 'icomoon';
color: #999aa1;
padding-left: 5px;
}
/* 头部部分 */
.headerCon {
background-color: #fff;
}
.header {
position: relative;
height: 140px;
/* background-color: #fff; */
/* border-bottom: 1px solid #dddddd; */
}
/* logo模块 */
.logo {
position: absolute;
top: 20px;
width: 190px;
height: 120px;
}
.logo a {
display: block;
width: 190px;
height: 120px;
background: url(../image/logo1.jpg) no-repeat;
font-size: 0;
}
/* 搜索模块 */
.search {
/* overflow: hidden; */
position: absolute;
width: 550px;
height: 36px;
top: 25px;
left: 261px;
border: 2px solid #e2231a;
border-right: none;
}
.search input {
float: left;
width: 488px;
height: 32px;
padding-left: 18px;
color: #989898;
}
.search button {
float: left;
width: 60px;
height: 34px;
background-color: #e1251b;
}
.search button::before {
display: block;
position: absolute;
top: 10px;
right: 64px;
content: '\e907';
font-family: 'icomoon';
color: #ccc;
font-size: 16px;
padding: 0 10px;
}
.search button::after {
content: '\e909';
font-family: 'icomoon';
color: #fff;
}
.hotWords {
position: absolute;
top: 66px;
left: 260px;
}
.hotWords a {
margin: 0 5px;
}
.shopcar {
position: absolute;
top: 20px;
right: 241px;
width: 130px;
height: 34px;
border: 1px solid #eeeeee;
text-align: center;
}
.shopcar p {
font-size: 14px;
line-height: 33px;
}
.shopcar p::before {
content: '\e904';
font-family: 'icomoon';
color: #e1251b;
margin-right: 17px;
font-size: 15px;
}
.shopcar .count {
position: absolute;
width: 18px;
line-height: 14px;
height: 14px;
top: -2px;
left: 20px;
color: #fff;
border-radius: 5px;
background-color: #e1251b;
}
.hotWordsitmes {
position: absolute;
top: 110px;
left: 216px;
}
.hotWordsitmes ul li {
float: left;
}
.hotWordsitmes ul li a {
margin-right: 23px;
font-size: 14px;
color: #333333;
}
.hotWordsitmes ul li a:hover {
color: #e1251b;
}
.pic {
position: absolute;
top: 23px;
right: 0;
width: 181x;
height: 95px;
}
/* nav导航模块 */
.nav {
border-top: 1px solid #dddddd;
/* background-color: red; */
position: relative;
}
.nav .navCon .dd {
position: relative;
float: left;
margin-top: 10px;
background-color: #fff;
width: 190px;
height: 470px;
}
.navCon .dd ul li {
padding-left: 10px;
font-size: 14px;
color: #333333;
height: 27px;
line-height: 34px;
}
.navCon .dd ul li .crowdlist {
display: none;
top: 0;
left: 190px;
position: absolute;
width: 998px;
height: 470px;
background-color: #fff;
z-index: 2;
border: 1px solid #e9e9e9;
box-shadow: 1px 1px #ccc;
}
.navCon .dd ul li .livegame {
display: none;
top: 0;
left: 190px;
position: absolute;
width: 998px;
height: 470px;
background-color: #fff;
z-index: 2;
border: 1px solid #e9e9e9;
box-shadow: 1px 1px #ccc;
}
.navCon .dd ul li:hover .livegame {
display: block;
}
.livegame #firstcrowd {
position: relative;
width: 999px;
height: 30px;
}
.livegame .feiji {
position: absolute;
width: 168px;
height: 134px;
right: 10px;
top: 81px;
}
.livegame .alt,
.livegame .nara,
.livegame .ply,
.livegame .zxly {
position: absolute;
width: 83px;
height: 35px;
top: 0;
right: 94px;
}
.livegame .nara {
top: 0;
right: 10px;
}
.livegame .ply {
top: 36px;
right: 10px;
}
.livegame .zxly {
top: 36px;
right: 94px;
}
.livegame #firstcrowd li {
float: left;
}
.livegame #firstcrowd li a {
background-color: #333;
margin-right: 10px;
padding: 0 10px;
color: #fff;
}
.livegame #firstcrowd li a::after {
content: '\e902';
font-family: 'icomoon';
margin-left: 3px;
}
.livegame #firstcrowd li a:hover {
background-color: #de452b;
}
#sencondcrowd li {
line-height: 20px;
/* margin-left: 50px; */
margin: 8px 0 0px 5px;
}
#sencondcrowd li h5 {
width: 69px;
color: #333333;
/* margin-right: 27px; */
text-align: right;
}
#sencondcrowd li h5:hover {
color: #e1251b;
}
#sencondcrowd li h5::after {
content: '\e902';
font-family: 'icomoon';
margin-left: 9px;
}
#sencondcrowd li a {
padding: 0 7px;
float: left;
}
#firstA {
margin-right: 0;
}
.navCon .dd ul>li:hover {
background-color: #ccc;
}
.crowdlist #firstcrowd {
width: 85px;
height: 24px;
background-color: #333333;
margin-left: 21px;
margin-top: 21px;
}
.crowdlist #firstcrowd>a {
display: block;
color: #fff;
line-height: 24px;
}
.crowdlist #firstcrowd>a::after {
content: '\e902';
font-family: 'icomoon';
margin-left: 3px;
}
.crowdlist>ol #firstcrowd:hover {
background-color: #e1251b;
}
#lastcrowd {
line-height: 20px;
/* margin-left: 50px; */
margin: 20px 0 20px 42px;
}
#lastcrowd h5 {
margin-left: -10px;
}
#lastcrowd h5::after {
content: '\e902';
font-family: 'icomoon';
margin-left: 3px;
}
#lastcrowd li {
float: left;
}
#lastcrowd {
margin-left: 14px;
padding: 0 7px;
}
.dd ul li:hover .crowdlist {
display: block;
}
.fous {
width: 590px;
height: 470px;
float: left;
position: relative;
overflow: hidden;
margin: 10px 10px 0;
}
/* .fous ul li img {
width: 590px;
height: 470px;
} */
.fous ul {
/* ul必须有定位才可以使用动画效果的js文件 */
position: absolute;
top: 0;
left: 0;
width: 1000%;
}
.fous ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
.fousList {
float: left;
padding-top: 10px;
}
.fousList li {
padding-bottom: 10px;
padding-right: 10px;
}
.naviten {
float: left;
height: 470px;
width: 190px;
/* background-color: pink; */
margin-top: 10px;
}
.navitenFirst {
position: relative;
overflow: hidden;
height: 101px;
/* background-color: skyblue; */
border-bottom: 1px solid #eeeeee;
}
.navitenFirst .photo {
width: 40px;
height: 40px;
background: url(../image/download.png) no-repeat;
border-radius: 50%;
margin-top: 15px;
margin-left: 22px;
}
.navitenFirst .wordy {
color: #666666;
margin-top: -35px;
margin-left: 74px;
}
.wordy a {
padding: 0 4px;
}
.navitenFirst .one {
cursor: pointer;
line-height: 27px;
text-align: center;
position: absolute;
color: #fff;
top: 67px;
left: 20px;
width: 70px;
height: 25px;
border-radius: 10px;
background-color: #e1251b;
transition: background .3s ease, color .3s ease;
}
.navitenFirst .one:hover {
background-color: #ccc;
}
.navitenFirst .two {
cursor: pointer;
line-height: 27px;
text-align: center;
position: absolute;
color: #c9d779;
top: 67px;
left: 100px;
width: 70px;
height: 25px;
border-radius: 10px;
background-color: #000;
transition: all .5s ease, color .5s ease;
}
.navitenFirst .two:hover {
background-color: #e1251b;
}
.news-hd {
margin-top: 14px;
}
.news-hd h5 {
padding-left: 20px;
font-size: 15px;
float: left;
color: #333333;
cursor: pointer;
}
.news-hd .more {
float: right;
}
.news-hd .more::after {
padding-left: 7px;
font-family: 'icomoon';
content: "\e902";
}
.news-bd {
margin-top: 12px;
float: left;
height: 82px;
padding-left: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
}
.news-bd ul li {
width: 170px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.news-bd ul li span {
background-color: #fdeeed;
color: #e1251b;
}
.news-bd li a {
padding-left: 5px;
line-height: 20px;
color: #666;
}
.news-bd li a:hover {
color: #e1251b;
}
.live {
border-top: 1px solid #fff;
/* background-color: skyblue; */
}
.live ul {
height: 237px;
}
.live ul li {
float: left;
padding-left: 15px;
/* margin-top: 10px;
margin-right: 12px; */
padding: 0 12px;
padding-top: 10px;
}
.live ul li:hover {
color: #de452b;
}
.live .gift_gard {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg1.png) no-repeat;
}
.live .firm {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg2.png) no-repeat;
}
.live .Tariffe {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg3.png) no-repeat;
}
.live .game {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg4.png) no-repeat;
}
.live .refuelling {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
margin-left: 8px;
background: url(../upload/bg5.png) no-repeat;
}
.live .plane {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg6.png) no-repeat;
margin-left: 6px;
}
.live .one {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg7.png) no-repeat;
}
.live .two {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
margin-left: 8px;
background: url(../upload/bg8.png) no-repeat;
}
.live .three {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg9.png) no-repeat;
margin-left: 6px;
}
.live .four {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg11.png) no-repeat;
}
.live .five {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg11.png) no-repeat;
}
.live .six {
display: block;
width: 28px;
height: 28px;
padding-top: 10px;
background: url(../upload/bg12.png) no-repeat;
margin-left: 6px;
}
.live ul li p {
line-height: 20px;
text-align: center;
}
/* 推荐模块 */
#reom {
margin-top: 30px;
height: 260px;
}
.scorll_list {
/* display: none; */
position: absolute;
margin-left: 1210px;
width: 58px;
height: 410px;
top: 700px;
background-color: #fff;
}
.scorll_list li a {
display: block;
width: 38px;
height: 38px;
line-height: 19px;
font-size: 14px;
color: #333;
margin: 12px 15px 7px 10px;
text-align: center;
}
.scorll_list li a:hover {
color: #e1251b;
transition: all .5s ease;
}
/* #reom .scorll_list li:nth-child(odd):hover {
background-color: #e1251b;
color: #fff;
} */
#reom .scorll_list li:nth-child(even) {
width: 2em;
height: 1px;
background-color: #ccc;
margin: 0 17px;
}
#reom .scorll_list span {
display: none;
position: absolute;
bottom: 0;
width: 38px;
height: 38px;
line-height: 19px;
font-size: 14px;
color: #333;
margin: 12px 15px 7px 10px;
text-align: center;
}
.reom-hd {
float: left;
height: 260px;
width: 190px;
background: url(../image/seckill.png) no-repeat;
cursor: pointer;
}
.reom-hd .seckill-main {
display: block;
width: 130px;
height: 30px;
margin-top: -40px;
margin-left: auto;
margin-right: auto;
/* background-color: pink; */
}
#box1,
#box2,
#box3 {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-color: black;
margin-left: 8px;
color: white;
text-align: center;
font-size: 20px;
}
#box1::after {
position: absolute;
display: block;
content: ':';
width: 20px;
height: 100%;
font-weight: bolder;
font-size: 18px;
right: -15px;
top: 0%;
}
#box2::after {
position: absolute;
display: block;
content: ':';
width: 20px;
height: 100%;
font-weight: bolder;
font-size: 18px;
right: -15px;
top: 0%;
}
.reom-hd h3 {
font-size: 30px;
line-height: 85px;
text-align: center;
color: #fff;
}
.reom-hd p {
font-size: 16px;
color: #fff;
line-height: 161px;
text-align: center;
}
.reom-bd ul li {
position: relative;
width: 250px;
float: left;
}
.reom-bd ul li>img {
display: inline-block;
margin: 30px 55px 0;
}
.reom-bd ul li p {
text-align: center;
display: block;
margin-top: 20px;
padding: 0 34px;
font-size: 12px;
color: #333;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.reom-bd ul li span {
display: block;
font-size: 12px;
font-weight: bold;
line-height: 22px;
text-align: center;
}
.reom-bd ul li:nth-child(n+2)::after {
position: absolute;
content: '';
width: 1px;
height: 175px;
background-color: #ddd;
left: 0;
top: 50px;
}
.last {
width: 240px;
height: 260px;
float: left;
/* background-color: aqua; */
background-color: #ddd;
z-index: 2;
}
.last>img {
margin: 30px 69px 0;
}
.last p {
display: block;
font-size: 12px;
color: #fff;
line-height: 40px;
text-align: center;
}
.last h5 {
font-size: 12px;
line-height: 10px;
color: #333;
text-align: center;
}
.last span {
display: inline-block;
width: 82px;
height: 24px;
border: 1px solid #e1251b;
border-radius: 10px;
text-align: center;
line-height: 22px;
margin-top: 10px;
margin-left: 80px;
color: #e1251b;
}
.last span a {
color: #e1251b;
}
.last span a::after {
content: '\e902';
font-family: 'icomoon';
color: #e1251b;
}
/* 商品推荐模块 */
.goods {
width: 1270px;
height: 555px;
background: url(../image/jd_bg2.webp) no-repeat;
margin: 0 auto;
margin-top: 30px;
overflow: hidden;
}
.w .firstgoods {
margin-top: 98px;
height: 210px;
overflow: hidden;
}
.w .secondgoods {
margin-top: 10px;
height: 210px;
overflow: hidden;
}
.goods .w>ul li {
float: left;
width: 190px;
height: 210px;
margin-right: 10px;
border-radius: 5px;
background: url(../image/bg5.webp) no-repeat;
cursor: pointer;
}
.goods .w>ul li img {
display: inline-block;
text-align: center;
margin: 0 30px;
}
.goods .w>ul li h5 {
width: 185px;
height: 40px;
display: inline-block;
background: url(../image/bg6.webp) no-repeat;
color: #fff;
line-height: 32px;
text-align: center;
font-size: 16px;
}
.goods .w>ul li p {
font-weight: bolder;
text-align: center;
font-size: 16px;
color: #fff;
color: #de452b;
}
.goods .w>ul .lastgoods {
margin-right: 0;
}
/* 日常推荐模块 */
.daily {
height: 340px;
margin-top: 20px;
}
.daily .dailyLeft {
width: 590px;
height: 340px;
float: left;
margin-right: 10px;
}
.daily .dailyRight {
width: 590px;
height: 340px;
float: left;
}
.dailyLeft .dailyLeft_hd {
position: relative;
height: 60px;
background-color: #fff;
}
.dailyRight .dailyLeft_hd {
position: relative;
height: 60px;
background-color: #fff;
}
.dailyLeft .dailyLeft_hd h3,
.dailyRight .dailyLeft_hd h3 {
float: left;
font-size: 24px;
font-weight: 700;
color: #333;
padding: 0 20px;
line-height: 60px;
cursor: pointer;
}
.dailyLeft .dailyLeft_hd .daily_arrow,
.dailyRight .dailyLeft_hd .daily_arrow {
float: left;
cursor: pointer;
float: left;
position: absolute;
top: 22px;
left: 125px;
width: 16px;
height: 16px;
/* background-color: #000; */
background: url(../image/sprite.png) no-repeat;
background-position: -16px 0;
}
.dailyLeft .dailyLeft_hd span,
.dailyRight .dailyLeft_hd span {
position: relative;
float: right;
margin-right: 15px;
font-size: 14px;
line-height: 60px;
cursor: pointer;
}
.dailyLeft .dailyLeft_hd span::after,
.dailyRight .dailyLeft_hd span::after {
content: '';
position: absolute;
bottom: 18px;
left: 0;
height: 2px;
width: 100%;
background-color: #e1251b;
}
.dailyLeft_bd {
background-color: #fff;
height: 280px;
}
.dailyLeft_bd .dailyPrice {
cursor: pointer;
float: left;
position: relative;
width: 170px;
height: 265px;
background-color: #f7f8f9;
margin-left: 15px;
overflow: hidden;
}
.dailyLeft_bd .dailyPrice span {
display: inline-block;
width: 90px;
height: 24px;
position: absolute;
background: url(../image/dowload.png) no-repeat;
left: 0;
top: 0;
line-height: 24px;
text-align: center;
color: #fff;
}
.dailyLeft_bd .dailyPrice img {
margin-top: 46px;
display: inline-block;
width: 120px;
height: 120px;
text-align: center;
margin-left: 25px;
}
.dailyLeft_bd .dailymessage {
/* background-color: #333333; */
width: 150px;
height: 19px;
margin-top: 9px;
margin-bottom: 4px;
font-size: 14px;
color: #333;
text-align: center;
}
.dailyLeft_bd .dailymessage_price {
font-size: 18px;
text-align: center;
color: red;
margin-left: -25px;
}
.dailyLeft_dd {
position: relative;
width: 170px;
height: 89px;
float: left;
margin-left: 25px;
margin-bottom: 56px;
cursor: pointer;
}
.dailyLeft_dd img {
width: 84px;
height: 89px;
}
.dailyLeft_dd>span {
display: inline-block;
/* width: 100%; */
height: 45px;
width: 80px;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.dailyLeft_dd .hmt_price>span {
position: absolute;
top: 35px;
left: 88px;
display: inline-block;
line-height: 30px;
font-size: 14px;
font-weight: 700;
}
.dailyLeft_dd .hmt_num {
position: absolute;
width: 80px;
top: 65px;
left: 85px;
}
/* 广场模块 */
.Channel_Square {
margin: 20px 0;
height: 1005px;
width: 100%;
}
.Channel_Square .CS_top {
height: 65px;
}
.CS_top .CS_font h3 {
position: relative;
height: 45px;
font-size: 28px;
font-weight: 700;
text-align: center;
line-height: 45px;
overflow: hidden;
color: #333;
}
.CS_top .CS_font h3::before,
.CS_top .CS_font h3::after {
position: absolute;
top: 50%;
margin-top: -10px;
right: 470px;
content: '';
width: 25px;
height: 20px;
}
.CS_top .CS_font h3::after {
background-image: url(../image/sc2.png);
background-position: -25px 0;
}
.CS_top .CS_font h3::before {
left: 470px;
background-image: url(../image/sc1.png);
}
.CS_Con {
height: 370px;
}
.CS_Con a {
float: left;
width: 290px;
height: 370px;
margin: 0 10px 10px 0;
}
.CS_Con a img {
width: 290px;
height: 370px;
}
.CS_Conlist,
.CS_Conlista {
width: 290px;
height: 370px;
/* background-color: green; */
float: left;
overflow: hidden;
}
.CS_Conlist {
margin-right: 10px;
}
.CS_Conlist .ConlistOne,
.CS_Conlist .Conlisttwo {
height: 180px;
background-color: #fff;
}
.CS_Conlist .ConlistOne {
margin-bottom: 10px;
}
.CS_Conlista .Conlistthree,
.CS_Conlista .Conlistfour {
height: 180px;
background-color: #fff;
}
.CS_Conlista .Conlistthree {
margin-bottom: 10px;
}
.CS_Conlist .ConlistOne a,
.CS_Conlist .Conlisttwo a,
.CS_Conlista .Conlistthree a,
.CS_Conlista .Conlistfour a {
width: 250px;
display: block;
height: 30px;
margin-left: 30px;
margin-right: 10px;
padding-top: 17px;
padding-bottom: 13px;
line-height: 30px;
}
.ConlistOne .span1,
.Conlisttwo .span1,
.Conlistthree .span1,
.Conlistfour .span1 {
color: #333;
font-weight: 700;
font-size: 22px;
}
.ConlistOne .span2,
.Conlisttwo .span2,
.Conlistthree .span2,
.Conlistfour .span2 {
font-size: 14px;
color: #999;
font-size: 14px;
}
.ConlistOne img,
.Conlisttwo img,
.Conlistthree img,
.Conlistfour img {
width: 100px;
height: 100px;
}
.ConlistOne .ConLi,
.Conlisttwo .ConLi,
.Conlistthree .ConLi,
.Conlistfour .ConLi {
padding-top: 62px;
margin-left: 30px;
}
.ConLi .picno {
margin-left: 25px;
}
.CS_bottom {
height: 180px;
margin-top: 10px;
}
.CS_bottom ul li {
float: left;
width: 290px;
}
.CS_bottom ul li {
background-color: #fff;
height: 180px;
}
.CS_bottom ul li:nth-child(-n+3) {
margin-right: 10px;
}
.CS_bottomtop a {
width: 250px;
display: block;
height: 30px;
margin-left: 30px;
margin-right: 10px;
padding-top: 17px;
padding-bottom: 13px;
line-height: 30px;
}
.CS_bottomtop .span1 {
color: #333;
font-weight: 700;
font-size: 22px;
}
.CS_bottomtop .span2 {
font-size: 14px;
color: #999;
font-size: 14px;
}
.CS_bottomtop li img {
width: 100px;
height: 100px;
}
.CS_bottomtop li .wifi {
margin-top: 23px;
margin-left: 30px;
}
.CS_bottomtop li .you {
margin-top: 23px;
margin-left: 30px;
}
/* 推荐模块的制作 start */
.nominate_top {
height: 60px;
background-color: #fff;
}
.nominate_top ul {
margin-left: 30px;
margin-right: 70px;
}
.nominate_top ul li {
float: left;
text-align: center;
}
.nominate_top ul li:nth-child(odd) {
width: 180px;
}
.nominate_top ul li:nth-child(even) {
width: 1px;
height: 37px;
background-color: #cccccc;
margin: 10px 0;
}
.nominate_top ul li a h5 {
font-size: 16px;
font-weight: 700;
color: #333;
line-height: 27px;
}
.nominate_top ul li a h5:hover {
color: #e1251b;
}
.nominate_top ul li a p {
font-size: 14px;
color: #999;
}
.nominate_top ul li a p:hover {
color: #e1251b;
}
.nominate_one {
width: 70px;
height: 27px;
display: inline-block;
background-color: #e2231a;
border-radius: 50px;
line-height: 27px;
text-align: center;
}
#color_white {
color: #fff;
}
dayRs {
margin: 10px 0px;
height: 322px;
}
.dayRs ul li {
position: relative;
width: 230px;
float: left;
height: 323px;
background-color: #fff;
}
.dayRs ul li:nth-child(-n+4) {
margin-right: 10px;
}
.dayRs ul li img {
width: 150px;
height: 150px;
display: block;
margin-left: 40px;
margin-top: 30px;
}
.dayRs ul li p {
margin-top: 40px;
display: block;
line-height: 24px;
font-size: 14px;
text-align: center;
color: #666;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
/* 自适应布局 */
display: -webkit-box;
/* 2行显示 */
-webkit-line-clamp: 2;
/* 对齐方式 */
-webkit-box-orient: vertical;
padding: 0 20px;
}
.dayRs .price {
margin-left: 20px;
}
.dayRs .price i {
font-size: 12px;
font-weight: 700;
color: #e1251b;
}
.dayRs ul li .priceOne {
font-size: 20px;
font-weight: 700;
color: #e1251b;
margin-left: -2px;
}
.dayRs ul li .priceTwo {
font-size: 12px;
color: #e1251b;
}
.dayRs .juan {
position: absolute;
right: 0;
bottom: 0;
padding: 0 6px;
margin-right: 21px;
margin-bottom: 20px;
border: 1px solid #e1251b;
cursor: pointer;
border-radius: 1px;
}
/* 脚部模块 */
.footer {
margin-top: 30px;
height: 548px;
}
.footerCon {
overflow: hidden;
height: 103px;
}
.footerCon .footerCon_list {
position: relative;
height: 42px;
margin: 30px 57px 30px 35px;
}
.footerCon .footerCon_list li {
float: left;
width: 185px;
margin-right: 90px;
}
.footerCon .footerCon_list li .duo,
.footerCon .footerCon_list li .kuai,
.footerCon .footerCon_list li .hao,
.footerCon .footerCon_list li .sheng {
position: absolute;
display: block;
width: 36px;
height: 42px;
background-repeat: no-repeat;
background-position: 0 -192px;
background-image: url(../image/精灵图png.png);
font-size: 0;
}
.footerCon .footerCon_list li .kuai {
background-position: -41px -192px;
}
.footerCon .footerCon_list li .hao {
background-position: -82px -192px;
}
.footerCon .footerCon_list li .sheng {
background-position: -123px -192px;
}
.footerCon .footerCon_list li p {
width: 210px;
overflow: hidden;
line-height: 42px;
top: 8px;
color: #444444;
font-size: 18px;
padding-left: 45px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.footerLinks {
border-top: 1px solid #dedede;
}
.footer_help {
position: relative;
height: 185px;
border-bottom: 1px solid #ccc;
padding-top: 20px;
}
.footer_help dl {
float: left;
width: 200px;
}
.footer_help dl:last-child {
width: 90px;
text-align: center;
}
.footer_help dl dt {
font-size: 16px;
margin-bottom: 10px;
}
.footer_copyright {
text-align: center;
padding-top: 20px;
}
.links {
padding-top: 15px;
}
.copyright {
line-height: 20px;
}
.links a {
margin: 0 3px;
}
.footer_help .footerLast_help {
position: absolute;
right: 0;
top: 20px;
width: 200px;
height: 150px;
float: right;
}
.footer_help .footerLast_help h5 {
color: #666666;
font-size: 14px;
text-align: center;
margin-bottom: 15px;
}
.footer_help .footerLast_help p {
padding: 0 10px;
}
.footer_help .footerLast_help a {
float: right;
margin-right: 30px;
}
.iconfont {
font-family: 'icomoon';
font-style: normal;
-webkit-text-stroke-width: .2px;
}
.footerBottom {
height: 264px;
}
.copyright_List {
padding: 15px 0;
margin-left: 42px;
}
.copyright_List a {
padding: 0 5px;
}
.copyRigth {
position: relative;
text-align: center;
line-height: 22px;
}
.copyRigth span {
margin: 0 20px;
}
.copyRigth .gs {
position: absolute;
top: 71px;
left: 272px;
width: 15px;
height: 12px;
background: url(../image/精灵图png.png) -109px -155px;
}
.copyRigth .cp {
position: absolute;
top: 71px;
left: 381px;
width: 15px;
height: 12px;
background: url(../image/精灵图png.png) -167px -154px;
}
.copyRigth .Si {
position: absolute;
top: 71px;
left: 505px;
width: 15px;
height: 12px;
background: url(../image/精灵图png.png) -147px -154px;
}
.copyRigth .Sd {
position: absolute;
top: 71px;
left: 642px;
width: 15px;
height: 12px;
background: url(../image/精灵图png.png) -126px -154px;
}
.copyRigth .Ed {
position: absolute;
top: 71px;
left: 780px;
width: 15px;
height: 12px;
background: url(../image/精灵图png.png) -107px -171px;
}
.picture {
overflow: hidden;
margin-top: 40px;
height: 32px;
}
.picture ul {
margin-left: 190px;
}
.picture ul li {
float: left;
height: 32px;
width: 103px;
margin: 0 2px;
}
.picture li:nth-child(1) {
background: url(../image/精灵图png.png) -205px -111px;
}
.picture li:nth-child(2) {
background: url(../image/精灵图png.png) -205px -74px;
}
.picture li:nth-child(3) {
background: url(../image/精灵图png.png) -205px -37px;
}
.picture li:nth-child(4) {
background: url(../image/精灵图png.png) -205px 0px;
}
.picture li:nth-child(5) {
background: url(../image/精灵图png.png) 0px -155px;
}
.picture li:nth-child(6) {
background: url(../image/精灵图2.png) 0 -97px;
}
.picture li:nth-child(7) {
width: 69px;
background: url(../image/精灵图2.png) -104px -99px;
}
.picture li:nth-child(8) {
background: url(../image/精灵图2.png) -104px -132px;
}notice文件
.w {
width: 1192px;
margin: 0 auto;
}
.top {
height: 80px;
background-color: #ff633a;
}
.top .w {
height: 80px;
background: url(../image/topBg.avif) no-repeat;
position: relative;
}
.w>a {
position: absolute;
display: block;
width: 68px;
height: 68px;
top: 6px;
border-radius: 8px;
background-color: pink;
background-repeat: no-repeat;
}
.w>a:hover {
/* 鼠标移入变透明 */
opacity: 0.8;
}
.top1 {
left: 280px;
background-image: url(../image/top1.avif);
background-size: 68px;
}
.top2 {
left: 404px;
background-image: url(../image/top2.avif);
background-size: 68px;
}
.top3 {
left: 528px;
background-image: url(../image/top3.avif);
background-size: 68px;
}
.top4 {
width: 190px;
height: 80px;
background: url(../image/top.webp) no-repeat;
background-size: 190px 80px;
}
.div {
width: 20px;
height: 20px;
color: #c81623;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
text-align: center;
line-height: 20px;
cursor: pointer;
}相关的js文件
window.addEventListener('load', function () {
// 1. 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var fous = document.querySelector('.fous');
var fousWidth = fous.offsetWidth;
// 2. 鼠标经过focus 就显示隐藏左右按钮
fous.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
// 鼠标移上停止动画
clearInterval(timer);
timer = null; // 清除定时器变量
});
fous.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
//手动调用点击事件
arrow_r.click();
}, 2000);
});
// 3.动态生成小圆圈，有几张图片，我就生成几个小圆圈
var ul = fous.querySelector('ul');
var ol = fous.querySelector('.circle');
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
// 创建小li，把小li放到ol中。
var li = document.createElement('li');
// 通过自定义属性记录当前小圆圈的索引号
li.setAttribute('index', i);
ol.appendChild(li);
// 小圆圈排他思想，我们在生成小圆圈的同时绑定点击事件
li.addEventListener('click', function () {
// 干掉所有人，只剩下我自己 清除current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 只留下自己设置当前的current
this.className = 'current';
// 点击小圆圈我们移动图片，移动的是ul
// ul移动的距离，小圆圈的索引号乘以图片宽度 注意是负值
// 当我们点击小li，拿到当前的小li的索引号
var index = this.getAttribute('index');
// 当我们点击某个小li，就把li的索引号给num;
num = index;
// 当我们点击某个小li,就要把这个li的索引号给circle
circle = index;
// console.log(index);
// console.log(fousWidth);
animate(ul, -index * fousWidth);
});
};
// 把第一个小li设置类名为current
ol.children[0].className = 'current';
// 克隆第一张图片（li）放到ul最后里面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 点击右侧按钮，让图片进行滚动
var num = 0;
// circle控制小圆圈的播放
var circle = 0;
// flag 节流阀
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false; //关闭节流阀
// 如果走到最后复制第一张图片，此时 我们的ul要快速复原left为0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * fousWidth, function () {
flag = true; //打开节流阀
});
// 8.点击右侧安你要，小圆圈跟随一起变化，可以声明一个变量控制小圆圈的播放
circle++;
// 如果走到最后我们克隆的照片，我们小圆点从新开始
if (circle == ol.children.length) {
circle = 0;
}
// 调用函数
circleChange();
}
});
// 9.左侧按钮的做法
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * fousWidth + 'px';
}
num--;
animate(ul, -num * fousWidth, function () {
flag = true;
});
// 点击左侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
circle--;
// 如果circle < 0说明第一张图片，则小圆圈要改为第四个小圆圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数
circleChange();
}
});
function circleChange() {
// 先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下当前的小圆圈的current
ol.children[circle].className = 'current';
};
// 自动播放轮播图
var timer = this.setInterval(function () {
// 手动调用事件
arrow_r.click();
}, 2000)
})
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
