效果展示
真高仿，像真的一样，页面的效果几乎都做出来了。
京东
刚接触html css的时候写第一个页面，由于当时布局不太熟练，写了将近一个月…
英雄联盟
实现功能
- 京东点击切换轮播图
- 京东自动轮播图
- 京东自动轮播图+获取鼠标焦点暂停移动
- 京东实现右侧导航栏点击跳转，英雄联盟实现右侧导航栏动画
- 京东、英雄联盟官网有的，基本都有
源码
代码实现
京东
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</meta>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<link rel=" icon" href="image\logo.png">
<link rel="stylesheet" type="text/css" href="jd.css">
<link rel="stylesheet" href="download\iconfont.css">
<link rel="stylesheet" href="download2/iconfont.css">
<link rel="stylesheet" href="downloadgd\iconfont.css">
<link rel="stylesheet" href="悬浮栏\iconfont.css">
<link rel="stylesheet" href="悬浮栏\顶部\iconfont.css">
<link rel="stylesheet" href="眼睛\iconfont.css">
</head>
<body>
<!-- 悬浮栏 -->
<div id="fixed">
<ul>
<li>
<div class="li1"><a class="a" href="#a">京东秒杀</a></div>
</li>
<hr>
<li>
<div class="li2"><a class="a" href="#b">特色优选</a></div>
</li>
<hr>
<li>
<div class="li2"><a class="a" href="#pdgcbg">频道广场</a></div>
</li>
<hr>
<li>
<div class="li2"><a class="a" href="#pdgcbg1">为你推荐</a></div>
</li>
<hr>
<li>
<div class="i"><i class="iconfont a"></i></div>
<div class="li3"><a class="a" href="#a">客服</a></div>
</li>
<hr>
<li>
<div class="i"><i class="iconfont a"></i></div>
<div class="li3"><a class="a" href="#a">反馈</a></div>
</li>
<hr>
<li>
<div class="i"><i class="iconfont a"></div>
<div class="li1"><a class="a" href="#header">顶部</a></div>
</li>
</ul>
</div>
<div id="bg">
<div class="box">
<div class="grid-container">
<a class="black active l dq" href="">
<img src="image\地区.png " height="12" width="10"> 河南
<span class="tooltiptext1">
<ul>
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
<li>河北</li>
<li>山西</li>
<li>河南</li>
<li>辽宁</li>
<li>吉林</li>
<li>黑龙江</li>
<li>内蒙古</li>
<li>江苏</li>
<li>山东</li>
<li>安徽</li>
<li>浙江</li>
<li>福建</li>
<li>湖北</li>
<li>湖南</li>
<li>广东</li>
<li>安徽</li>
<li>浙江</li>
<li>福建</li>
<li>湖北</li>
<li>湖南</li>
<li>广西</li>
<li>江西</li>
<li>四川</li>
<li>海南</li>
<li>贵州</li>
<li>云南</li>
<li>西藏</li>
<li>陕西</li>
<li>甘肃</li>
<li>青海</li>
<li>宁夏</li>
<li>新疆</li>
<li>港澳</li>
<li>台湾</li>
<li>钓鱼岛</li>
<li>海外</li>
<div> </div>
<p>地区专享版本
<p>
<li class="active">中國港澳</li>
<li> </li>
<li class="active">中國台灣</li>
<li class="active">京东全球</li>
<li> </li>
<li class="active"> </li>
<div> </div>
</ul>
</span>
</a>
<a class="active l" href=""> </a>
<a class="active l" href=""> </a>
<a class="active l" href=""> </a>
<a class="active l" href=""> </a>
<a class="active l" href="">你好，请登录</a>
<a class="red l" href=""> 免费注册</a>
<a class="active r" href=""> 我的订单</a>
<a class="black active r dq" href=""> 我的京东
<span class="tooltiptext2">
<ul>
<li class="active">待处理订单</li>
<li class="active">我的问答</li>
<li class="active">返修退换货</li>
<li class="active">我的关注</li>
<li class="active">降价商品 </li>
<li class="active"> </li>
<div></div>
<li class="active">我的京东</li>
<li class="active">我的优惠卷</li>
<li class="active">我的白条</li>
<li class="active">我的理财</li>
</ul>
</span>
</a>
<a class="active r" href=""> 京东会员</a>
<a class="red black r active dq" href=""> 企业采购
<span class="tooltiptext3">
<ul>
<li class="jdg">企业购</li>
<li class="jdg">公共频道</li>
<li class="jdg">工业品</li>
<li class="jdg">商用场景馆</li>
<li class="jdg">礼品卡</li>
<li class="jdg">企业微信购</li>
<li class="jdg">工品优选</li>
<li class="jdg">京东锦礼</li>
<li class="jdg a">大中型客户采购</li>
</ul>
</span>
</a>
<a class="black r ac" href=""> 客户服务</a>
<a class="black r" href=""> 网站导航</a>
<a class="hover r" href=""> 手机京东</a>
<a class="active r" href=""> 网站无障碍</a>
</div>
</div>
<div id="header" class="w ">
<div class="hbody">
<div class="search-m">
<!-- 搜索 -->
<div class="from">
<!-- 搜索框 -->
<input type="text" class="ssk">
<img src="image\ss.png">
</div>
<div class="gwc">我的购物车</div>
</div>
<div class="hotwords">
<!-- 热词 -->
<li class="one">红魔热销中</li>
<li>女鞋</li>
<li>低至95折</li>
<li>小米新品</li>
<li>珠宝饰品</li>
<li>耳机音箱</li>
<li>游戏电视</li>
<li>游戏新品</li>
<li>电脑整机</li>
</div>
<div class="img">
<img src="image\jd.png">
</div>
<div class="hbottom">
<li class="one">秒杀</li>
<li class="one">优惠卷</li>
<li>PLUS会员</li>
<li>品牌闪购</li>
<li>拍卖</li>
<li>京东家电</li>
<li>京东超市</li>
<li>京东生鲜</li>
<li>京东国际</li>
<li>京东云</li>
</div>
</div>
</div>
<!-- 轮播图 -->
<div id="fs">
<div class="fsbody">
<div class="fsone">
<li> <span>家用电器</span>
<div class="hd">
<div class="hdbody">
<div class="box1">
<div>家电馆<i class="iconfontgdd"></i></div>
<div>开店设备一站购<i class="iconfontgdd"></i></div>
</div>
<div class="box2">
<div class="sbox">
<div class="l">电视<i class="iconfontgdd"></i></div>
<div class="r">全面屏电视</div>
<div class="r">教育电视</div>
<div class="r">DLED电视</div>
<div class="r">智慧屏</div>
<div class="r">4K超清电视</div>
<div class="r">55英寸</div>
<div class="r">65英寸</div>
<div class="r">电视配件</div>
</div>
<div class="sbox">
<div class="l">空调<i class="iconfontgdd"></i></div>
<div class="r">新风空调</div>
<div class="r">以旧换新</div>
<div class="r">空调挂机</div>
<div class="r">空调柜机</div>
<div class="r">空调套装</div>
<div class="r">新一级能效</div>
<div class="r">挂机1.5匹</div>
<div class="r">柜机3匹</div>
<div class="r">变频空调</div>
<div class="r">中央空调</div>
<div class="r">移动空调</div>
</div>
<div class="sbox">
<div class="l">洗衣机<i class="iconfontgdd"></i></div>
<div class="r">滚筒洗衣机</div>
<div class="r">洗烘一体机</div>
<div class="r">波轮洗衣机</div>
<div class="r">洗烘套装</div>
<div class="r">迷你洗衣机</div>
<div class="r">洗衣机配件</div>
<div class="r">烘干机</div>
</div>
<div class="sbox">
<div class="l">冰箱<i class="iconfontgdd"></i></div>
<div class="r">多门</div>
<div class="r">对开门</div>
<div class="r">三门</div>
<div class="r">双门</div>
<div class="r">冰洗套装</div>
<div class="r">冷柜/冰吧</div>
<div class="r">酒柜</div>
<div class="r">冰箱配件</div>
</div>
<div class="sbox">
<div class="l">厨卫大电<i class="iconfontgdd"></i></div>
<div class="r">油烟机</div>
<div class="r">灶具</div>
<div class="r">烟灶套装</div>
<div class="r">集成灶</div>
<div class="r">集成水槽</div>
<div class="r">消毒柜</div>
<div class="r">洗碗机</div>
<div class="r">电热水器</div>
<div class="r">燃气热水器</div>
<div class="r">壁挂率</div>
<div class="r">空气能热水器</div>
<div class="r">嵌入式厨电</div>
<div class="r">太阳能热水器</div>
<div class="r">烟机灶具配件</div>
</div>
<div class="sbox">
<div class="l">厨卫小电<i class="iconfontgdd"></i></div>
<div class="r">破壁机</div>
<div class="r">咖啡机</div>
<div class="r">榨汁机</div>
<div class="r">电炖锅</div>
<div class="r">果蔬净化清洗机</div>
<div class="r">三明治机/早餐机</div>
<div class="r">电烤箱</div>
<div class="r">厨师机/和面机</div>
<div class="r">料理机</div>
<div class="r">电饼铛</div>
<div class="r">电水壶/热水瓶</div>
<div class="r">面包机</div>
<div class="r">电火锅</div>
<div class="r">空气炸锅</div>
<div class="r">养生壶</div>
<div class="r">电磁炉</div>
<div class="r">电饭煲</div>
<div class="r">电压力锅</div>
<div class="r">微波炉</div>
<div class="r">面条机</div>
<div class="r">电陶炉</div>
<div class="r">电烧烤炉</div>
<div class="r">煮蛋器</div>
<div class="r">电热饭盒</div>
<div class="r">豆浆机</div>
</div>
<div class="sbox">
<div class="l">生活电器<i class="iconfontgdd"></i></div>
<div class="r">电风扇</div>
<div class="r">冷风扇</div>
<div class="r">空气净化器</div>
<div class="r">加湿器</div>
<div class="r">净水器</div>
<div class="r">饮水机</div>
<div class="r">吸尘器</div>
<div class="r">扫地机器人</div>
<div class="r">茶吧机</div>
<div class="r">蒸汽/电动拖把</div>
<div class="r">除螨仪</div>
<div class="r">洗地机</div>
<div class="r">挂烫机/熨斗</div>
<div class="r">干衣机</div>
<div class="r">除湿机</div>
<div class="r">电话机</div>
<div class="r">擦地/擦窗机器人</div>
<div class="r">取暖器</div>
<div class="r">毛球修剪器</div>
<div class="r">生活电器配件</div>
</div>
<div class="sbox">
<div class="l">个护健康<i class="iconfontgdd"></i></div>
<div class="r">剃须刀</div>
<div class="r">电动牙刷</div>
<div class="r">冲牙器</div>
<div class="r">电吹风</div>
<div class="r">卷/直发器</div>
<div class="r">理发器</div>
<div class="r">美容仪</div>
<div class="r">剃/脱毛器</div>
<div class="r">洁面仪</div>
<div class="r">按摩器</div>
<div class="r">按摩椅</div>
<div class="r">足浴盆</div>
<div class="r">电动牙刷头</div>
</div>
<div class="sbox">
<div class="l">视听影音<i class="iconfontgdd"></i></div>
<div class="r">家庭影院</div>
<div class="r">KTV音响</div>
<div class="r">迷你音响</div>
<div class="r">DVD</div>
<div class="r">功放</div>
<div class="r">回音壁</div>
<div class="r">麦克风</div>
</div>
</div>
<img class="gg1" src="image\a\Snipaste_2022-07-11_17-02-07.png">
<img class="gg2" src="image\a\c8708a4338dad41f.jpg.webp">
</div>
</div>
</li>
<li> <span>手机</span>/<span>运营商</span>/<span>数码</span>
<div class="hd">
<div class="hdbody">
<div class="box1">
<div>家电馆<i class="iconfontgdd"></i></div>
<div>开店设备一站购<i class="iconfontgdd"></i></div>
</div>
<div class="box2">
<div class="sbox">
<div class="l">电视<i class="iconfontgdd"></i></div>
<div class="r">全面屏电视</div>
<div class="r">教育电视</div>
<div class="r">DLED电视</div>
<div class="r">智慧屏</div>
<div class="r">4K超清电视</div>
<div class="r">55英寸</div>
<div class="r">65英寸</div>
<div class="r">电视配件</div>
</div>
<div class="sbox">
<div class="l">空调<i class="iconfontgdd"></i></div>
<div class="r">新风空调</div>
<div class="r">以旧换新</div>
<div class="r">空调挂机</div>
<div class="r">空调柜机</div>
<div class="r">空调套装</div>
<div class="r">新一级能效</div>
<div class="r">挂机1.5匹</div>
<div class="r">柜机3匹</div>
<div class="r">变频空调</div>
<div class="r">中央空调</div>
<div class="r">移动空调</div>
</div>
<div class="sbox">
<div class="l">洗衣机<i class="iconfontgdd"></i></div>
<div class="r">滚筒洗衣机</div>
<div class="r">洗烘一体机</div>
<div class="r">波轮洗衣机</div>
<div class="r">洗烘套装</div>
<div class="r">迷你洗衣机</div>
<div class="r">洗衣机配件</div>
<div class="r">烘干机</div>
</div>
<div class="sbox">
<div class="l">冰箱<i class="iconfontgdd"></i></div>
<div class="r">多门</div>
<div class="r">对开门</div>
<div class="r">三门</div>
<div class="r">双门</div>
<div class="r">冰洗套装</div>
<div class="r">冷柜/冰吧</div>
<div class="r">酒柜</div>
<div class="r">冰箱配件</div>
</div>
<div class="sbox">
<div class="l">厨卫大电<i class="iconfontgdd"></i></div>
<div class="r">油烟机</div>
<div class="r">灶具</div>
<div class="r">烟灶套装</div>
<div class="r">集成灶</div>
<div class="r">集成水槽</div>
<div class="r">消毒柜</div>
<div class="r">洗碗机</div>
<div class="r">电热水器</div>
<div class="r">燃气热水器</div>
<div class="r">壁挂率</div>
<div class="r">空气能热水器</div>
<div class="r">嵌入式厨电</div>
<div class="r">太阳能热水器</div>
<div class="r">烟机灶具配件</div>
</div>
<div class="sbox">
<div class="l">厨卫小电<i class="iconfontgdd"></i></div>
<div class="r">破壁机</div>
<div class="r">咖啡机</div>
<div class="r">榨汁机</div>
<div class="r">电炖锅</div>
<div class="r">果蔬净化清洗机</div>
<div class="r">三明治机/早餐机</div>
<div class="r">电烤箱</div>
<div class="r">厨师机/和面机</div>
<div class="r">料理机</div>
<div class="r">电饼铛</div>
<div class="r">电水壶/热水瓶</div>
<div class="r">面包机</div>
<div class="r">电火锅</div>
<div class="r">空气炸锅</div>
<div class="r">养生壶</div>
<div class="r">电磁炉</div>
<div class="r">电饭煲</div>
<div class="r">电压力锅</div>
<div class="r">微波炉</div>
<div class="r">面条机</div>
<div class="r">电陶炉</div>
<div class="r">电烧烤炉</div>
<div class="r">煮蛋器</div>
<div class="r">电热饭盒</div>
<div class="r">豆浆机</div>
</div>
<div class="sbox">
<div class="l">生活电器<i class="iconfontgdd"></i></div>
<div class="r">电风扇</div>
<div class="r">冷风扇</div>
<div class="r">空气净化器</div>
<div class="r">加湿器</div>
<div class="r">净水器</div>
<div class="r">饮水机</div>
<div class="r">吸尘器</div>
<div class="r">扫地机器人</div>
<div class="r">茶吧机</div>
<div class="r">蒸汽/电动拖把</div>
<div class="r">除螨仪</div>
<div class="r">洗地机</div>
<div class="r">挂烫机/熨斗</div>
<div class="r">干衣机</div>
<div class="r">除湿机</div>
<div class="r">电话机</div>
<div class="r">擦地/擦窗机器人</div>
<div class="r">取暖器</div>
<div class="r">毛球修剪器</div>
<div class="r">生活电器配件</div>
</div>
<div class="sbox">
<div class="l">个护健康<i class="iconfontgdd"></i></div>
<div class="r">剃须刀</div>
<div class="r">电动牙刷</div>
<div class="r">冲牙器</div>
<div class="r">电吹风</div>
<div class="r">卷/直发器</div>
<div class="r">理发器</div>
<div class="r">美容仪</div>
<div class="r">剃/脱毛器</div>
<div class="r">洁面仪</div>
<div class="r">按摩器</div>
<div class="r">按摩椅</div>
<div class="r">足浴盆</div>
<div class="r">电动牙刷头</div>
</div>
<div class="sbox">
<div class="l">视听影音<i class="iconfontgdd"></i></div>
<div class="r">家庭影院</div>
<div class="r">KTV音响</div>
<div class="r">迷你音响</div>
<div class="r">DVD</div>
<div class="r">功放</div>
<div class="r">回音壁</div>
<div class="r">麦克风</div>
</div>
</div>
<img class="gg1" src="image\a\Snipaste_2022-07-11_17-02-07.png">
<img class="gg2" src="image\a\c8708a4338dad41f.jpg.webp">
</div>
</div>
</li>
<li><span>家居</span>/<span>家具</span>/<span>家装</span>/<span>厨具</span></li>
<li><span>男装</span>/<span>女装</span>/<span>童装</span>/<span>内衣</span></li>
<li><span>美妆</span>/<span>个护清洁</span>/<span>宠物</span>/<span></li>
<li><span>女鞋</span>/<span>箱包</span>/<span>钟表</span>/<span>珠宝</span></li>
<li><span>男鞋</span>/<span>运动</span>/<span>户外</span></li>
<li><span>房产</span>/<span>汽车</span>/<span>汽车用品</span></li>
<li><span>母婴</span>/<span>玩具乐器</span></li>
<li><span>食品</span>/<span>酒类</span>/<span>生鲜</span>/<span>特产</span></li>
<li><span>艺术</span>/<span>礼品鲜花</span>/<span>农资绿植</span></li>
<li><span>医疗保健</span>/<span>计生情趣</span></li>
<li><span>图书</span>/<span>文娱</span>/<span>教育</span>/<span>电子书</span></li>
<li><span>机票</span>/<span>酒店</span>/<span>旅游</span>/<span>生活</span></li>
<li><span>理财</span>/<span>众筹</span>/<span>白条</span>/<span>保险</span></li>
<li><span>安装</span>/<span>维修</span>/<span>清洗</span>/<span>二手</span></li>
<li><span>工业品</span></li>
</div>
<!-- 动画 -->
<div class="banner">
<input type="radio" id="put1" checked name="put" hidden>
<input type="radio" id="put2" name="put" hidden>
<input type="radio" id="put3" name="put" hidden>
<ul>
<li><img src="image/dem/d1.jpg"></li>
<li><img src="image\dem\d2.jpg"></li>
<li><img src="image\dem\d3.jpg"></li>
</ul>
<div class="circle">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
<div class="left_arrow">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
<div class="right_arrow">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
</div>
<div class="fsthree">
<!-- 三图动画 -->
<div class="a">
<div class="demo3">
<img src="image\demo3\1\1.webp">
<img src="image\demo3\1\2.webp">
<img src="image\demo3\1\3.webp">
</div>
</div>
<div class="a">
<div class="demo3">
<img src="image\demo3\2\1.webp">
<img src="image\demo3\2\2.jpg.webp">
<img src="image\demo3\2\3.png.webp">
</div>
</div>
<div class="a">
<div class="a">
<div class="demo3">
<img src="image\demo3\3\1.webp">
<img src="image\demo3\3\2.jpg.webp">
<img src="image\demo3\3\3.webp">
</div>
</div>
</div>
</div>
<div class="fsfour">
<div class="one">
<div class="o">
<img class="img1" src="image\touxiang.png">
</div>
<div class="t">
<li><span>Hi~欢迎逛京东！</span></li>
<li><span>登录</span>|<span>注册</span></li>
</div>
<div class="bottom">
<div class="left">新人福利</div>
<div class="right">PLUS会员</div>
</div>
</div>
<hr>
<div class="two">
<div class="o"> 京东快报 <a href="">更多</a></div>
<ul class="t">
<li><span class="a">热门</span>孕期腿脚抽筋古娜拉黑暗之神</li>
<li><span class="a">最新</span>智慧便捷功能全，物灵智能点读笔</li>
<li><span class="a">最新</span>我是渣渣灰，是兄弟就来砍我</li>
<li><span class="a">推荐</span>挖掘机技术哪家强，中国山东找蓝翔</li>
</ul>
</div>
<hr>
<div class="three">
<div class="bb">
<div><img src="image\话费\话费.png"> 话费</div>
<div><img src="image\话费\游戏.png"> 游戏</div>
<div><img src="image\话费\众筹.png"> 众筹</div>
<div><img src="image\话费\电影票.png">电影票</div>
</div>
<div class="bb">
<div><img src="image\话费\机票.png">机票</div>
<div><img src="image\话费\加油卡.png">加油卡</div>
<div><img src="image\话费\理财.png">理财</div>
<div><img src="image\话费\企业购.png">企业购</div>
</div>
<div class="bb">
<div><img src="image\话费\酒店.png">酒店</div>
<div><img src="image\话费\火车票.png">火车票</div>
<div><img src="image\话费\白条.png">白条</div>
<div><img src="image\话费\礼品卡.png">礼品卡</div>
</div>
</div>
</div>
</div>
</div>
<!-- 京东秒杀 -->
<div id="a">
<div class="bd">
<div>
<div></div><img width="100%" height="100%" src="Snipaste_2022-07-22_22-11-18.png">
</div>
<div>
<ul>
<li>
<div><img src="image\京东秒杀\艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能.png"></div><span
title="艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能">艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能</span>
<div class="b"><i class="iconfont"></i>99.99</div>
</li>
<li>
<div><img src="image\京东秒杀\百威Budweiser淡色拉格啤酒450ml18听整箱装.jpg"></div><span
title="百威Budweiser淡色拉格啤酒450ml18听整箱装">百威Budweiser淡色拉格啤酒450ml18听整箱装</span>
<div class="b"><i class="iconfont"></i>33.00 </div>
</li>
<li>
<div><img src="image\京东秒杀\格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿.jpg"></div><span
title="格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿">格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿</span>
<div class="b"><i class="iconfont"></i>999.99 </div>
</li>
<li>
<div><img src="image\京东秒杀\海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G101.jpg"></div>
<span
title="海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10">海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10</span>
<div class="b"><i class="iconfont"></i>765.88 </div>
</li>
<li>
<div><img src="image\京东秒杀\华硕天选3锐龙版15.6英寸游戏本笔记本电脑.jpg"></div><span
title="华硕天选3锐龙版15.6英寸游戏本笔记本电脑">华硕天选3锐龙版15.6英寸游戏本笔记本电脑</span>
<div class="b"><i class="iconfont"></i>6999.90 </div>
</li>
<li>
<div><img src="image\京东秒杀\乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物.jpg"></div><span
title="乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物">乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物</span>
<div class="b"><i class="iconfont"></i>520.00 </div>
</li>
<li>
<div><img src="image\京东秒杀\乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏.jpg"></div><span
title="乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏">乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏</span>
<div class="b"><i class="iconfont"></i>890.90 </div>
</li>
<li>
<div><img src="image\京东秒杀\舒肤佳泡沫洗手液樱花白茶.jpg"></div><span
title="舒肤佳泡沫洗手液樱花白茶">舒肤佳泡沫洗手液樱花白茶</span>
<div class="b"><i class="iconfont"></i>39.00 </div>
</li>
<li>
<div><img src="image\京东秒杀\艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能.png"></div><span
title="艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能">艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能</span>
<div class="b"><i class="iconfont"></i>99.99</div>
</li>
<li>
<div><img src="image\京东秒杀\百威Budweiser淡色拉格啤酒450ml18听整箱装.jpg"></div><span
title="百威Budweiser淡色拉格啤酒450ml18听整箱装">百威Budweiser淡色拉格啤酒450ml18听整箱装</span>
<div class="b"><i class="iconfont"></i>33.00 </div>
</li>
<li>
<div><img src="image\京东秒杀\格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿.jpg"></div><span
title="格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿">格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿</span>
<div class="b"><i class="iconfont"></i>999.99 </div>
</li>
<li>
<div><img src="image\京东秒杀\海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G101.jpg"></div>
<span
title="海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10">海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10</span>
<div class="b"><i class="iconfont"></i>765.88 </div>
</li>
</ul>
</div>
<div>
<div>
<img src="image\a\点读笔.jpg.webp">
<div>
<span class="one">平板电脑秒杀专场</span>
<span class="two">下单赠磁吸皮套</span>
<div class="three">品类秒杀</div>
</div>
</div>
</div>
</div>
</div>
<!-- 每日特价 -->
<div id="b">
<div class="bd">
<div class="l">
<div class="head">
<div class="left">每日特价<span class="gd"><i class="iconfont1"></i></span></div>
<ul>
<div class="ch">
<!-- 初始 -->
<div class="a"><span>298天最低价</span>
<div class="a"><img src="image\每日特价\奥克斯家用双门迷你小.jpg.webp"><br>奥克斯双门迷你小
<div class="q"><i class="iconfont"></i>478</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\戴尔T3650塔式图形工作站.jpg.webp"><span
class="mr">354天最低价</span></div>
<div class="c">戴尔T3650塔式图形工作站<div class="rmb"><i
class="iconfont"></i>3950</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\LRKER Type-C快充充电线.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">LRKER Type-C快充充电线<div class="rmb"><i
class="iconfont"></i>4.9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\荣耀Play6T全网通手机.jpg.webp"><span
class="mr">20天最低价</span></div>
<div class="c">荣耀Play6T全网通手机<div class="rmb"><i
class="iconfont"></i>1259</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\买3送1碗莲种子【30粒套.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">买3送1碗莲种子【30粒套<div class="rmb"><i
class="iconfont"></i>8.8</div>
</div>
</div>
</div>
</div>
</div>
<li>精选
<div class="ts">
<div class="a"><span>298天最低价</span>
<div class="a"><img src="image\每日特价\奥克斯家用双门迷你小.jpg.webp"><br>奥克斯双门迷你小
<div class="q"><i class="iconfont"></i>478</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\戴尔T3650塔式图形工作站.jpg.webp"><span
class="mr">354天最低价</span></div>
<div class="c">戴尔T3650塔式图形工作站<div class="rmb"><i
class="iconfont"></i>3950</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\LRKER Type-C快充充电线.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">LRKER Type-C快充充电线<div class="rmb"><i
class="iconfont"></i>4.9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\荣耀Play6T全网通手机.jpg.webp"><span
class="mr">20天最低价</span></div>
<div class="c">荣耀Play6T全网通手机<div class="rmb"><i
class="iconfont"></i>1259</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\买3送1碗莲种子【30粒套.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">买3送1碗莲种子【30粒套<div class="rmb"><i
class="iconfont"></i>8.8</div>
</div>
</div>
</div>
</div>
</li>
<li>美食
<div class="ts">
<div class="a"><span>75天最低价</span>
<div class="a"><img src="image\每日特价\陕西精选新鲜大黄杏5斤.jpg.webp"><br>陕西精选新鲜大黄杏5斤
<div class="q"><i class="iconfont"></i>22.8</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\正宗苹果蕉净重3斤.jpg.webp"><span
class="mr">86天最低价</span></div>
<div class="c">正宗苹果蕉净重3斤<div class="rmb"><i
class="iconfont"></i>11.8</div>
<div class="yq">已抢<span>125</span>件</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\星华源麻辣牛肉100g.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">星华源麻辣牛肉100g<div class="rmb"><i
class="iconfont"></i>17.5</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\呈香记麻椒鸡真空包装开袋.jpg.webp"><span
class="mr">206天最低价</span></div>
<div class="c">呈香记麻椒鸡真空包装开袋<div class="rmb"><i
class="iconfont"></i>17.9</div>
<div class="yq">已抢<span>150</span>件</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\冷冻扇贝肉500g袋装.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">冷冻扇贝肉500g袋装<div class="rmb"><i
class="iconfont"></i>39</div>
<div class="yq">已抢<span>134</span>件</div>
</div>
</div>
</div>
</div>
</li>
<li>百货
<div class="ts">
<div class="a"><span>75天最低价</span>
<div class="a"><img src="image\每日特价\日本进口三格雪糕模具.jpg.webp"><br>日本进口三格雪糕模具
<div class="q"><i class="iconfont"></i>15.2</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\心相印婴儿抽纸M码110抽.jpg.webp"><span
class="mr">339天最低价</span></div>
<div class="c">心相印婴儿抽纸M码110抽<div class="rmb"><i
class="iconfont"></i>44.9</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\吨顿桶运动水壶超大容量耐.jpg.webp"><span
class="mr">51天最低价</span></div>
<div class="c">吨顿桶运动水壶超大容量耐<div class="rmb"><i
class="iconfont"></i>26.9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\卡通静音门把手防撞垫保护.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">卡通静音门把手防撞垫保护<div class="rmb"><i
class="iconfont"></i>9.9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\兜市精选全自动雨伞2骨.jpg.webp"><span
class="mr">1年最低价</span></div>
<div class="c">兜市精选全自动雨伞2骨<div class="rmb"><i
class="iconfont"></i>35.9</div>
<div class="yq">已抢<span>234</span>件</div>
</div>
</div>
</div>
</div>
</li>
<li>个护
<div class="ts">
<div class="a"><span>129天最低价</span>
<div class="a"><img src="image\每日特价\敬修堂牙膏黄金版香口.jpg.webp"><br>敬修堂牙膏黄金版香口
<div class="q"><i class="iconfont"></i>34.8</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\韩方五谷海盐控油除螨洗.jpg.webp"><span
class="mr">311天最低价</span></div>
<div class="c">韩方五谷海盐控油除螨洗<div class="rmb"><i
class="iconfont"></i>26</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\苏菲日夜组合126片.jpg.webp"><span
class="mr">130天最低价</span></div>
<div class="c">苏菲日夜组合126片<div class="rmb"><i
class="iconfont"></i>44.9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\康婷瑞倪维儿洁肤护理乳.jpg.webp"><span
class="mr">138天最低价</span></div>
<div class="c">康婷瑞倪维儿洁肤护理乳<div class="rmb"><i
class="iconfont"></i>24</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\修正紫花地丁育30g.jpg.webp"><span
class="mr">90天最低价</span></div>
<div class="c">修正紫花地丁育30g<div class="rmb"><i
class="iconfont"></i>29.8</div>
</div>
</div>
</div>
</div>
</li>
<li>预告
<div class="ts">
<div class="a">
<div class="a"><img src="image\每日特价\缤兔美妆冰箱冷藏专业.jpg.webp"><br>缤兔美妆冰箱冷藏专业
<div class="q"><i class="iconfont"></i>699</div>
</div>
</div>
<div class="b">
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\米诺地尔酊头皮上药器.jpg.webp"></div>
<div class="c">米诺地尔酊头皮上药器<div class="rmb"><i
class="iconfont"></i>178</div>
</div>
</div>
</div>
<div>
<div class="b">
<div class="dw"><img src="image\每日特价\圣元汇力多营养小米米糊米.jpg.webp"></div>
<div class="c">圣元汇力多营养小米米糊米<div class="rmb"><i
class="iconfont"></i>9</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\华为智选Hi nova9 se 5G手.jpg.webp">
</div>
<div class="c">华为智选Hi nova9 se 5G手<div class="rmb"><i
class="iconfont"></i>24</div>
</div>
</div>
</div>
<div>
<div class="d">
<div class="dw"><img src="image\每日特价\修正紫花地丁育30g.jpg.webp"><span
class="mr">90天最低价</span></div>
<div class="c">修正紫花地丁育30g<div class="rmb"><i
class="iconfont"></i>29.8</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="r">
<div class="bd">
<div class="bd">
<!-- 左 -->
<div class="head">品牌闪购<span class="gd"><i class="iconfont1"></i></span></div>
<div class="sfj">舒福佳<br>Shufujia
</div>
<div class="aa">舒福佳品牌闪购</div>
<div class="aaa">全场低至8.8元免运|仅剩1天</div>
<img src="image\品牌闪购\舒福佳.webp">
</div>
<div class="bd">
<!-- 右 -->
<div class="body">
<!-- 商标 -->
<div class="sb"><img src="image\商标\洁丽雅秒杀专场.webp" class="sb1">
<div class="sb2">洁丽雅秒杀专场</div>
</div>
<div class="sb"><img src="image\商标\六福珠宝闪购专场.webp" class="sb1">
<div class="sb2">六福珠宝闪购专场</div>
</div>
<div class="sb"><img src="image\商标\onlycook闪购专场.webp" class="sb1">
<div class="sb2">onlycook闪购专场</div>
</div>
<div class="sb"><img src="image\商标\蒙娜丽莎品牌专场.webp" class="sb1">
<div class="sb2">蒙娜丽莎品牌专场</div>
</div>
<div class="sb"><img src="image\商标\大牌童装狂欢购.webp" class="sb1">
<div class="sb2">大牌童装狂欢购</div>
</div>
<div class="sb"><img src="image\商标\海昌隐形眼镜闪购.webp" class="sb1">
<div class="sb2">海昌隐形眼镜闪购</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 发现好货 -->
<div id="c">
<div class="bd">
<div class="l">
<div class="haohuo"><span>探索新生活 <i class="iconfont2"></i></span></div>
</div>
<div class="r">
<ul>
<li class="li1">
<div class="name1">小米 至尊纪念版 5G手机</div><img src="image\发现好货\小米至尊纪念版5G手机.png">
</li>
<li class="li2"><img src="image\发现好货\鲜嫩清甜脆新鲜嫩莲蓬.jpg">
<div class="name2">鲜嫩清甜脆新鲜嫩莲蓬</div>
</li>
<li class="li1">
<div class="name1">DURGOD 三模 机械键盘</div><img src="image\发现好货\DURGOD三模机械键盘.jpg">
</li>
<li class="li2"><img src="image\发现好货\耐克缓震跑步鞋.jpg">
<div class="name2">耐克 缓震 跑步鞋</div>
</li>
<li class="li1">
<div class="name1">华为WATCH 3鸿蒙智能运动手表</div><img src="image\发现好货\华为WATCH3鸿蒙智能运动手表.png">
</li>
<li class="li2"><img src="image\发现好货\尤尼克斯方形拍头羽毛.png">
<div class="name2">尤尼克斯 方形拍头 羽毛</div>
</li>
<li class="li1">
<div class="name1">倍护婴 三环动物乐园款</div><img src="image\发现好货\倍护婴三环动物乐园款.jpg">
</li>
<li class="li2"><img src="image\发现好货\李宁吸湿PU篮球.jpg">
<div class="name2">李宁 吸湿PU 篮球</div>
</li>
<li class="li1">
<div class="name1">众桥 多功能充电式 苍蝇拍</div><img src="image\发现好货\众桥多功能充电式苍蝇拍.jpg">
</li>
<li class="li2"><img src="image\发现好货\MLB 男女通用棒球帽.jpg">
<div class="name2">MLB 男女通用 棒球帽</div>
</li>
<li class="li1">
<div class="name1">小米 至尊纪念版 5G手机</div><img src="image\发现好货\小米至尊纪念版5G手机.png">
</li>
<li class="li2"><img src="image\发现好货\鲜嫩清甜脆新鲜嫩莲蓬.jpg">
<div class="name2">鲜嫩清甜脆新鲜嫩莲蓬</div>
</li>
<li class="li1">
<div class="name1">DURGOD 三模 机械键盘</div><img src="image\发现好货\DURGOD三模机械键盘.jpg">
</li>
<li class="li2"><img src="image\发现好货\耐克缓震跑步鞋.jpg">
<div class="name2">耐克 缓震 跑步鞋</div>
</li>
<li class="li1">
<div class="name1">华为WATCH 3鸿蒙智能运动手表</div><img src="image\发现好货\华为WATCH3鸿蒙智能运动手表.png">
</li>
</ul>
</div>
</div>
</div>
<!-- 新品首发 -->
<div id="d">
<div class="bd">
<!-- 新品首发 -->
<div>
<div class="head">
<div class="text">新品首发<i class="iconfont1"></i></div>
</div>
<img src="D:\VS\vscode_date\jd\image\新品首发\Snipaste_2022-07-11_15-22-04.png">
</div>
<!-- JIY寻宝 -->
<div>
<div class="head">
<div class="text">JOY寻宝<i class="iconfont1"></i></div>
</div>
<div class="header">
<ul>
<li>
换个新机
<div class="yc">
<div class="bbsb">
<img src="image\新品首发\8848.webp">
<div class="text">
8848 钛金手机M5尊享版智能商务加密轻奢手机双卡双
<div class="price"><i class="iconfont3"></i>4999.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\其他故障定金.webp">
<div class="text">
其他故障定金
<div class="price"><i class="iconfont3"></i>30.<span>00</span></div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\京东安卓手机2年碎屏保D.webp">
<div class="text">
京东安卓手机2年碎屏保D
<div class="price"><i class="iconfont3"></i>79.<span>00</span></div>
</div>
</div>
</div>
</li>
<li>健身达人
<div class="yc">
<div class="bbsb">
<img src="image\新品首发\GYMGEST力量站多功能肌肉综合训练器家用运动健身.webp">
<div class="text">
GYMGEST力量站多功能肌肉综合训练器家用运动健身
<div class="price"><i class="iconfont3"></i>13999.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\【健身房级超跑】亿健跑步机家用静音走步机可折叠室.webp">
<div class="text">
【健身房级超跑】亿健跑步机家用静音走步机可折叠室
<div class="price"><i class="iconfont3"></i>3149.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\贝德拉(BeDL)跑步机家用折叠走步机健身器材510.webp">
<div class="text">
贝德拉(BeDL)跑步机家用折叠走步机健身器材510
<div class="price"><i class="iconfont3"></i>1549.<span>00</span>
</div>
</div>
</div>
</div>
</li>
<li>掌上书房
<div class="yc">
<div class="bbsb">
<img src="image\新品首发\官方正版盛夏2木苏里著江添VS盛望盛夏TB版.webp">
<div class="text">
官方正版盛夏2木苏里著江添VS盛望盛夏TB版
<div class="price"><i class="iconfont3"></i>39.<span>60</span></div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\34dee67188f67639.jpg!q90.webp">
<div class="text">
JDRead2【京东自主研发】电子书阅读器300ppi高清
<div class="price"><i class="iconfont3"></i>1242.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\京东安卓手机2年碎屏保D.webp">
<div class="text">
京东安卓手机2年碎屏保D
<div class="price"><i class="iconfont3"></i>39.<span>60</span></div>
</div>
</div>
</div>
</li>
<li>乔迁之喜
<div class="yc">
<div class="bbsb">
<img src="image\新品首发\玻妞(HOBOT) 388擦窗机器人波妞超声波自动喷水智.webp">
<div class="text">
玻妞(HOBOT) 388擦窗机器人波妞超声波自动喷水智
<div class="price"><i class="iconfont3"></i>3680.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\科沃斯(ECOVACS)【自清洁抹布】N9+扫地机器人.webp">
<div class="text">
新品首发\科沃斯(ECOVACS)【自清洁抹布】N9+扫地机
<div class="price"><i class="iconfont3"></i>3699.<span>00</span>
</div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\352 X86C空气净化器家用除甲醛}争化器正负离子消毒除.webp">
<div class="text">
352 X86C空气净化器家用除甲醛}争化器正负离子消毒除
<div class="price"><i class="iconfont3"></i>4198.<span>00</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="bbsb">
<img src="image\新品首发\8848.webp">
<div class="text">
8848 钛金手机M5尊享版智能商务加密轻奢手机双卡双
<div class="price"><i class="iconfont3"></i>4999.<span>00</span></div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\其他故障定金.webp">
<div class="text">
其他故障定金
<div class="price"><i class="iconfont3"></i>30.<span>00</span></div>
</div>
</div>
<div class="bbsb">
<img src="image\新品首发\京东安卓手机2年碎屏保D.webp">
<div class="text">
京东安卓手机2年碎屏保D
<div class="price"><i class="iconfont3"></i>79.<span>00</span></div>
</div>
</div>
</div>
<!-- 逛好店 -->
<div>
<div class="head">
<div class="text">逛好店<i class="iconfont1"></i></div>
</div>
<div class="bd1">
<div class="title">海康威视（HIKVISION）车品京东自营旗舰店</div>
<div class="bd1">
<div class="bq1">自营</div>
<div class="bq2">急速狂飙</div>
</div>
<div class="guanzhu">239.3万人关注</div>
<div class="img"><img src="image\新品首发\逛好店1.webp"></img></div>
</div>
<div class="bd2">
<div class="bd1">
<div class="title">格力官方旗舰店</div>
<div class="bq2">家电集结</div>
</div>
<div class="guanzhu3">73.0万人关注</div>
<div class="img"><img src="image\新品首发\逛好店1.webp"></img></div>
</div>
</div>
<!-- 领卷中心 -->
<div>
<div class="head">
<div class="text">领卷中心<i class="iconfont1"></i></div>
</div>
<div class="bg">
<div class="bg">
<div class="div">
<div class="ljimg">
<img class="jimg" src="image\新品首发\领卷1.webp"></img>
</div>
<div class="div">
<div class="ljprice"><i class="iconfont3"></i><span>5</span></div>
<div class="limit">满6元可用</div>
<div class="desc">新人专属，尽可购买时使用一次</div>
</div>
<div class="inner">更多好劵</div>
<div class="gd"><i class="iconfontgd"></i></div>
</div>
<div class="div">
<div class="ljimg">
<img class="jimg" src="image\新品首发\领劵2.webp"></img>
</div>
<div class="div">
<div class="ljprice"><i class="iconfont3"></i><span>2</span></div>
<div class="limit">满3元可用</div>
<div class="desc">仅可购买自营文具键鼠标</div>
</div>
<div class="inner">更多好劵</div>
<div class="gd"><i class="iconfontgd"></i></div>
</div>
<div class="div">
<div class="ljimg">
<img class="jimg" src="image\新品首发\领卷3.webp"></img>
</div>
<div class="div">
<div class="ljprice"><i class="iconfont3"></i><span>5</span></div>
<div class="limit">满60.1元可用</div>
<div class="desc">仅可购买内衣部分商品</div>
</div>
<div class="inner">更多好劵</div>
<div class="gd"><i class="iconfontgd"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 频道广场 -->
<div id="pdgcbg">
<div class="pdgc"><img class="divf" src="image\左.png">频道广场<img class="divl" src="image\右.png"></div>
</div>
<!-- 京东超市 -->
<div id="jdcsbg">
<div class="jdcs">
<img class="jdimg" src="image\频道广场\京东超市大.webp">
<img class="sximg" src="image\频道广场\生鲜馆大.webp">
<div class="sjimg">
<div class="tbox">京东手机<span class="sbox">一个极客的诞生</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\京东手机1.webp">
<img class="lbox" src="image\频道广场\京东手机2.webp">
</div>
</div>
<div class="esimg">
<div class="tbox">拍拍二手<span class="sbox">大牌1元抢</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\二手1.webp">
<img class="lbox" src="image\频道广场\二手2.webp">
</div>
</div>
<div class="jzimg">
<div class="tbox">家装城<span class="sbox">用心装好家一站式购齐</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\家装城1.webp">
<img class="lbox" src="image\频道广场\家装城2.webp">
</div>
</div>
<div class="dqimg">
<div class="tbox">家装城<span class="sbox">用心装好家一站式购齐</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\家具1.webp">
<img class="lbox" src="image\频道广场\家具2.webp">
</div>
</div>
<div class="qyimg">
<div class="tbox">企业购<span class="sbox">一站式企业采购平台</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\企业购1.webp">
<img class="lbox" src="image\频道广场\企业购2.webp">
</div>
</div>
<div class="csimg">
<div class="tbox">京东超市<span class="sbox">一站式囤生活好物</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\京东超市1.webp">
<img class="lbox" src="image\频道广场\京东超市2.webp">
</div>
</div>
<div class="dzimg">
<div class="tbox">京东京造<span class="sbox">京东自有品牌</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\京东造1.webp">
<img class="lbox" src="image\频道广场\京东造2.webp">
</div>
</div>
<div class="dyimg">
<div class="tbox">大药房<span class="sbox">购正品药 免费换新</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\药房1.webp">
<img class="lbox" src="image\频道广场\药房2.webp">
</div>
</div>
<div class="joyimg">
<div class="tbox">Joy寻宝<span class="sbox">懂你的Joy</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\寻宝1.webp">
<img class="lbox" src="image\频道广场\寻宝2.webp">
</div>
</div>
<div class="sxgimg">
<div class="tbox">生鲜馆<span class="sbox">尝遍天下鲜</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\生鲜1.webp">
<img class="lbox" src="image\频道广场\生鲜2.webp">
</div>
</div>
<div class="mzimg">
<div class="tbox">京东美妆<span class="sbox">京东美妆 懂你的美</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\美妆1.webp">
<img class="lbox" src="image\频道广场\美妆2.webp">
</div>
</div>
<div class="ssimg">
<div class="tbox">京东时尚<span class="sbox">服饰美妆好物</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\时尚1.webp">
<img class="lbox" src="image\频道广场\时尚2.webp">
</div>
</div>
<div class="xjimg">
<div class="tbox">新机发布<span class="sbox">有新机更有范</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\新机1.webp">
<img class="lbox" src="image\频道广场\新机2.webp">
</div>
</div>
<div class="smimg">
<div class="tbox">智能数码<span class="sbox">尽享玩物</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\数码1.webp">
<img class="lbox" src="image\频道广场\数码2.webp">
</div>
</div>
<div class="cwimg">
<div class="tbox">厨卫电器<span class="sbox">百变厨房大焕新</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\厨卫1.webp">
<img class="lbox" src="image\频道广场\厨卫2.webp">
</div>
</div>
<div class="xyjimg">
<div class="tbox">冰箱洗衣机<span class="sbox">品质生活必备</span></div>
<div class="bbox">
<img class="lbox" src="image\频道广场\洗衣机1.webp">
<img class="lbox" src="image\频道广场\洗衣机2.webp">
</div>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div id="pdgcbg1">
<div class="pdgc"><img class="divf" src="image\左.png">为你推荐<img class="divl" src="image\右.png"></div>
</div>
<!-- 为你推荐 -->
<div id="wntj">
<!-- 精选 -->
<div class="header">
<ul>
<li>
<div class="tbox">
<div class="tbox1">精选</div>
</div>
<div class="bbox1">猜你喜欢</div>
</li>
<li>
<div class="tbox">智能先锋</div>
<div class="bbox">大电器城</div>
</li>
<li>
<div class="tbox">居家优品</div>
<div class="bbox">品质生活</div>
</li>
<li>
<div class="tbox">超市百货</div>
<div class="bbox">百货生鲜</div>
</li>
<li>
<div class="tbox">时尚达人</div>
<div class="bbox">美妆穿搭</div>
</li>
<li class="li">
<div class="tbox">进口好物</div>
<div class="bbox">京东国际</div>
</li>
</ul>
</div>
<div class="body">
<div>
<img class="tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
<div class="mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金</div>
<div class="bbox"><i class="iconfont3"></i>3498.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\【母婴专区+变频一级能效+WIFI操控】海尔冰箱法式多门.webp">
<div class="mbox">【母婴专区+变频一级能效+WIFI操控】海尔冰箱法式多门</div>
<div class="bbox"><i class="iconfont3"></i>3899.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
<div class="mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金</div>
<div class="bbox"><i class="iconfont3"></i>3498.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\米家小米冰箱双开门496升十字对开门四门冰箱一级能效...webp">
<div class="mbox">米家小米冰箱双开门496升十字对开门四门冰箱一级能效...</div>
<div class="bbox"><i class="iconfont3"></i>3189.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<img class="div1" src="image\为你推荐\机不离手.png">
<div>
<img class="tbox" src="image\为你推荐\【多仓速发】海尔(Haier)冰箱法式多门变频超薄嵌入式家...webp">
<div class="mbox">【多仓速发】海尔(Haier)冰箱法式多门变频超薄嵌入式家...</div>
<div class="bbox"><i class="iconfont3"></i>3099.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\背背佳矫正背部姿势带儿童学生成人男女通用KU矫....webp">
<div class="mbox">背背佳矫正背部姿势带儿童学生成人男女通用KU矫..</div>
<div class="bbox"><i class="iconfont3"></i>179.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\海尔(Haier)冰箱463升法式多门家用电冰箱四门节能无霜...webp">
<div class="mbox">海尔(Haier)冰箱463升法式多门家用电冰箱四门节能无霜.</div>
<div class="bbox"><i class="iconfont3"></i>2588.<span>90</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\Aisino企业管理软件+联想(ThinkServer)TS80X服务器….webp">
<div class="mbox">Aisino企业管理软件+联想(ThinkServer)TS80X服务器</div>
<div class="bbox"><i class="iconfont3"></i>7088.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
<div class="mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金</div>
<div class="bbox"><i class="iconfont3"></i>6199.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div class="jxdiv">
<div class="header">精选热点</div>
<div class="bbbox">
<div>电压力锅</div>
<div>移动书架</div>
<div>懒人减肥机</div>
<div>欧式果盘</div>
<div>保温壶</div>
<div>自动波箱油</div>
<div>学习机</div>
<div>薰衣草精油</div>
</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\新飞(Frestec）三门冰箱家用节能风冷电冰箱小型双开门....webp">
<div class="mbox">新飞(Frestec）三门冰箱家用节能风冷电冰箱小型双开门..</div>
<div class="bbox"><i class="iconfont3"></i>759.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\【海尔巨能冻】海尔冰箱双开门517升双变频一级能家效风.....webp">
<div class="mbox">【海尔巨能冻】海尔冰箱双开门517升双变频一级能家效风...</div>
<div class="bbox"><i class="iconfont3"></i>3499.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\Apple iPhone 13(A2634) 128GB星光色支持移动...webp">
<div class="mbox">Apple iPhone 13(A2634) 128GB星光色支持移动...</div>
<div class="bbox"><i class="iconfont3"></i>6148.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
<div>
<img class="tbox" src="image\为你推荐\海尔(Haier)349升智能双变频风冷无霜一级能效法式多门....webp">
<div class="mbox">海尔(Haier)349升智能双变频风冷无霜一级能效法式多门...</div>
<div class="bbox"><i class="iconfont3"></i>3899.<span>00</span></div>
<div class="zxs"><i class="iconfontyj"></i> 找相似</div>
</div>
</div>
</div>
<!-- 底部 -->
<div id="dbbg">
<div class="box1">
<div class="zbox"><img src="image\底部\多.png">品类齐全，轻松购物</div>
<div class="zbox"><img src="image\底部\快.png">多仓直发，极速配送</div>
<div class="zbox"><img src="image\底部\好.png">正品行货，精致服务</div>
<div class="zbox"><img src="image\底部\省.png">天天低价，畅选无忧</div>
</div>
<hr>
<div class="box2">
<div class="lbox">
<div class="lbox1">
<div class="text">购物指南</div>
<div class="text">配送方式</div>
<div class="text">支付方式</div>
<div class="text">售后服务</div>
<div class="text">特色服务</div>
</div>
<div class="lbox2">
<div class="text">购物流程</div>
<div class="text">上门自提</div>
<div class="text">货到付款</div>
<div class="text">售后服务</div>
<div class="text">夺宝岛</div>
<div class="text">会员介绍</div>
<div class="text">211限时达到</div>
<div class="text">在线支付</div>
<div class="text">价格保护</div>
<div class="text">DIY装机</div>
<div class="text">生活旅行</div>
<div class="text">配送服务查询</div>
<div class="text">分期付款</div>
<div class="text">退款说明</div>
<div class="text">延保服务</div>
<div class="text">常见问题</div>
<div class="text">配送收费收取标准</div>
<div class="text">公司转账</div>
<div class="text">返修/退换货</div>
<div class="text">京东E卡</div>
<div class="text">大家电</div>
<div class="text">海外配送</div>
<div class="text"></div>
<div class="text">取消订单</div>
<div class="text">京东通信</div>
<div class="text">联系客服</div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text">京鱼座智能</div>
</div>
</div>
<div class="rbox">
<div class="text">京东自营覆盖区县</div>
<div class="bbox">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。<div class="b1box">查看更多<i
class="iconfontgdd"></i></div>
</div>
</div>
</div>
<div class="box3">
<ul class="box31">
<li>关于我们</li>
<span>|</span>
<li>联系我们</li>
<span>|</span>
<li>联系客服</li>
<span>|</span>
<li>合作招商</li>
<span>|</span>
<li>商家帮助</li>
<span>|</span>
<li>营销中心</li>
<span>|</span>
<li>手机京东</li>
<span>|</span>
<li>友情链接</li>
<span>|</span>
<li>销售联盟</li>
<span>|</span>
<li>京东社区</li>
<span>|</span>
<li>风险监测</li>
<span>|</span>
<li>隐私政策</li>
<span>|</span>
<li>京东公益</li>
<span>|</span>
<li>English Site</li>
<span>|</span>
<li>Media &IR</li>
</ul>
<div class="box32">
<ul>
<li>京公网安备11000002000088号</li>
<span>|</span>
<li>京ICP备11041704号</li>
<span>|</span>
<li>ICP</li>
<span>|</span>
<li>互联网药品信息服务资格证编号(京)-经营性-2014-0008</li>
<span>|</span>
<li>新出发京零字第大120007号</li>
<span>|</span>
</ul>
<ul>
<li>互联网出版许可证编号新出网证(京)字150号</li>
<span>|</span>
<li>出版物经营许可证</li>
<span>|</span>
<li>网络文化经营许可证京网文[2020]6112-1201号</li>
<span>|</span>
<li>违法和不良信息举报电话:4006561155</li>
</ul>
<ul>
<li>Copyright c 2004 - 2022京东JD.com版权所有</li>
<span>|</span>
<li>消费者维权热线:4006067733</li>
<span>|</span>
<li>经营证照</li>
<span>|</span>
<li>(京)网械平台备字(2018)第00003号</li>
<span>|</span>
<li>营业执照</li>
<span>|</span>
<li>增值电信业务经营许可证</li>
</ul>
<ul>
<li>Global Site</li>
<span>|</span>
<li>CainT PoCCMM</li>
<span>|</span>
<li>Situs Indonesia</li>
<span>|</span>
<li>Sitio de Espana</li>
<span>|</span>
<li>51laf6iss114l</li>
</ul>
<ul>
<li>京东旗下网站:京东钱包</li>
<span>|</span>
<li>京东云</li>
<span>|</span>
<li>网络内容从业人员违法违规行为举报电话:4006561155-3</li>
</ul>
</div>
<div class="box4">
<img src="image\底部\可信网站.png">
<img src="image\底部\网络警察.png">
<img src="image\底部\诚信网站.png">
<img src="image\底部\网上有害信息.png">
<img src="image\底部\网络举报.png">
<img src="image\底部\扫黄.png">
<img class="img1" src="image\底部\适老化.png">
<img class="img2" src="image\底部\国家知识.png">
</div>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
border: 0px;
}
body,
html {
scroll-behavior: smooth;
}
#bg {
min-width: 1500px;
height: auto;
background-color: rgb(244, 244, 244);
}
#bg > .bd {
width: 1190px;
margin: 0 auto;
}
div.box {
margin: 0;
width: 100%;
height: 30px;
background-color: rgb(227, 228, 229);
position: relative;
min-width: 1500px;
/* padding: auto; */
}
.grid-container {
/* 网格布局 */
display: grid;
height: 30px;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
grid-gap: 0px;
/* 网格间隙 */
background-color: rgb(227, 228, 229);
position: absolute;
/*绝对位置，使重叠*/
left: 10%;
/* 盒子里左右比例 */
right: 11%;
align-items: center;
justify-items: center;
}
.grid-container a.r {
display: block;
color: rgb(153, 153, 153);
font-family: "宋体";
font-size: 7px;
margin: 0;
text-align: center;
text-decoration: none;
border-left: 1px solid rgb(204, 204, 204);
max-height: 20px;
min-width: 80px;
}
.grid-container a.l {
display: block;
color: rgb(153, 153, 153);
font-family: "宋体";
font-size: 7px;
margin: 0;
text-align: center;
text-decoration: none;
max-height: 20px;
min-width: 80px;
}
.grid-container a.black:hover {
/* 鼠标移至背景变白色 */
padding: 9.8% 9%;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
.grid-container a.active {
color: rgb(153, 153, 153);
}
.grid-container a.active:hover {
color: rgb(227, 51, 51);
}
.grid-container a.red {
color: rgb(227, 51, 51);
}
.tooltiptext1 {
/* 提示文本 */
visibility: hidden;
padding: 10px;
width: 300px;
height: 442px;
border: 1px solid rgb(204, 204, 204);
border-top: 0ch;
color: rgb(153, 153, 153);
background-color: rgb(255, 255, 255);
/* 定位 */
position: absolute;
z-index: 10;
/* 提示在图片外面 */
top: 100%;
margin-left: -68px;
}
.tooltiptext2 {
/* 《我的京东》提示框 */
visibility: hidden;
padding: 10px;
width: 280px;
height: 161px;
border: 1px solid rgb(204, 204, 204);
border-top: 0ch;
color: rgb(153, 153, 153);
background-color: rgb(255, 255, 255);
/* 定位 */
position: absolute;
z-index: 10;
/* 提示在图片外面 */
top: 100%;
margin-left: -72px;
}
.tooltiptext3 {
/* 《企业采购》提示框 */
visibility: hidden;
text-align: left;
padding: 10px;
width: 140px;
height: 151px;
border: 1px solid rgb(204, 204, 204);
border-top: 0ch;
color: rgb(153, 153, 153);
background-color: rgb(255, 255, 255);
/* 定位 */
position: absolute;
z-index: 10;
/* 提示在图片外面 */
top: 100%;
margin-left: -72px;
}
.dq:hover .tooltiptext3 {
/* 提示文本 */
visibility: visible;
}
.dq:hover .tooltiptext2 {
/* 提示文本 */
visibility: visible;
}
.dq:hover .tooltiptext1 {
/* 提示文本 */
visibility: visible;
}
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0px;
}
li {
display: inline-block;
margin: auto;
padding: 0;
color: rgb(153, 153, 153);
text-decoration: none;
width: 60px;
line-height: 25px;
}
li:hover {
color: rgb(227, 51, 51);
background-color: rgb(244, 244, 244);
}
li.active {
margin-right: 40px;
}
li.active:hover {
color: rgb(227, 51, 51);
background-color: rgb(255, 255, 255);
}
li.a {
width: 100px;
}
li.jdg:hover {
color: rgb(227, 51, 51);
background-color: rgb(255, 255, 255);
}
ul p {
/* 块级元素 */
text-align: left;
margin-left: 15px;
margin-top: 15px;
}
#header {
min-width: 1500px;
height: 140px;
background-color: rgb(255, 255, 255);
}
#header.w {
position: relative;
z-index: 0;
height: 140px;
}
.hbody {
position: relative;
width: 1190px;
height: 140px;
margin: auto;
}
.search-m {
/* 搜索 */
position: relative;
width: 1190px;
height: 60px;
margin: auto;
z-index: 1;
}
.search-m .from {
position: absolute;
width: 550px;
height: 32px;
top: 25px;
left: 260px;
border: 1px solid rgb(226, 35, 26);
background-color: rgb(255, 255, 255);
}
.search-m .from .ssk {
width: 488px;
height: 32px;
outline: none;
}
.search-m img {
/* 搜索图片 */
width: 58px;
height: 32px;
float: right;
top: 25px;
}
.search-m .gwc {
/* 我的购物车 */
position: absolute;
left: 830px;
top: 25px;
width: 130px;
height: 34px;
font-family: "宋体";
font-size: 7px;
border: 1px solid rgb(238, 238, 238);
color: #e1251b;
text-align: center;
line-height: 36px;
}
.hotwords {
/* 搜索框下面词条 */
display: flex;
position: absolute;
top: 65px;
left: 260px;
width: 550px;
height: 20px;
font-size: 12px;
color: #999;
margin-right: 10px;
flex-wrap: nowrap;
}
.w li {
width: auto;
}
.w li.one {
color: #e1251b;
}
.w li:hover {
cursor: pointer;
/* 鼠标样式 */
color: #e1251b;
background-color: rgb(255, 255, 255);
}
.img {
/*京东图片 */
position: absolute;
width: 190px;
height: 120px;
left: 20px;
top: 10px;
}
.hbottom {
display: flex;
flex-wrap: nowrap;
position: absolute;
width: 700px;
height: 40px;
bottom: 0px;
left: 203px;
}
.hbottom li.one {
font-weight: 700;
}
.hbottom li {
color: black;
}
#fs {
position: relative;
min-width: 1500px;
height: 480px;
background-color: rgb(244, 244, 244);
}
.fsbody {
/* position: relative; */
display: flex;
justify-content: space-between;
width: 1190px;
height: 470px;
margin: auto;
}
.fsone {
position: relative;
margin-top: 10px;
padding: 10px 0px;
height: 450px;
width: 190px;
background-color: rgb(254, 254, 254);
}
.fsone li {
display: block;
list-style-type: none;
color: rgb(51, 51, 51);
font-size: 14px;
width: auto;
margin-left: 15px;
}
.fsone span:hover {
color: rgb(200, 22, 35);
}
.fsone li:hover .hd {
visibility: visible;
}
.fsone .hd .hdbody {
width: 998px;
height: 432px;
padding: 20px 0 10px 0;
position: relative;
}
.fsone .hd .hdbody .box1 {
width: 800px;
height: 24px;
padding: 0 0 0 20px;
display: flex;
}
.fsone .hd .hdbody .box1 div {
width: auto;
height: 24px;
color: #ffffff;
font-size: 12px;
line-height: 24px;
background-color: #333333;
margin-right: 10px;
padding: 0 10px;
}
.fsone .hd .hdbody .box1 div:hover {
background-color: #c81623;
}
.fsone .hd .hdbody .box2 {
width: 780px;
height: 398x;
padding: 10px 0 0 20px;
display: flex;
flex-wrap: wrap;
}
.fsone .hd .hdbody .gg1 {
position: absolute;
top: 20px;
right: 30px;
width: 166px;
height: 140px;
}
.fsone .hd .hdbody .gg2 {
position: absolute;
top: 170px;
right: 30px;
width: 166px;
height: 140px;
}
.fsone .hd .hdbody .box2 .sbox {
position: relative;
width: 700px;
height: auto;
padding: 5px 0 5px 80px;
display: flex;
flex-wrap: wrap;
}
.fsone .hd .hdbody .box2 .sbox .r {
margin: 3px 0;
padding: 0 7px;
height: 16px;
line-height: 16px;
font-size: 7px;
color: #666;
}
.fsone .hd .hdbody .box2 .sbox .l {
position: absolute;
right: 700px;
top: 9px;
font-size: 7px;
color: #333;
line-height: 16px;
height: 16px;
font-weight: 700;
}
.fsone .hd {
/* 家用电器隐藏文本框 */
z-index: 100;
visibility: hidden;
position: absolute;
background-color: rgb(255, 255, 255);
color: #000;
width: 980px;
height: 462px;
border: 1px solid rgb(211, 211, 211);
/* 定位 */
/* margin-top: -10px;
margin-left: 190px; */
top: 0px;
left: 160px;
}
/* 自动加手动轮播图 */
.banner {
/* 图片播放窗口 */
position: relative;
top: 10px;
width: 590px;
height: 470px;
overflow: hidden;
}
.banner ul {
/* 图片存储容器 */
width: 1770px;
padding: 0;
transition: all 1s;
}
.banner li {
/* 轮播图单图 */
list-style: none;
width: 590px;
height: 470px;
float: left;
}
.circle {
/* 循环 */
position: absolute;
bottom: 10px;
left: 30px;
}
.circle label {
/* 图片下方按钮点击前 */
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
position: relative;
cursor: pointer;
}
.circle label::after {
/* 图片下方按钮点击后 */
content: "";
width: 8px;
height: 8px;
background: white;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
border-radius: 50%;
position: absolute;
opacity: 0;
/* 不透明度 */
}
#put1:checked ~ .circle label:first-of-type::after,
#put2:checked ~ .circle label:nth-of-type(2)::after,
#put3:checked ~ .circle label:nth-of-type(3)::after {
opacity: 1;
}
#put1:checked ~ ul {
margin-left: 0;
}
#put2:checked ~ ul {
margin-left: -590px;
}
#put3:checked ~ ul {
margin-left: -1180px;
}
.left_arrow label {
/* 隐藏按钮的位置 */
display: inline-block;
width: 25px;
height: 25px;
top: 50%;
left: 0%;
margin-top: -12.5px;
position: absolute;
margin-left: 25px;
}
/* 圆点的put1,put2,put3和箭头的put1,put2,put3是相互联系的，同时受input制约 */
#put1:checked ~ .left_arrow label:nth-of-type(3),
#put2:checked ~ .left_arrow label:nth-of-type(1),
#put3:checked ~ .left_arrow label:nth-of-type(2) {
opacity: 0.5;
margin-left: 0px;
cursor: pointer;
background: url(image/dem/left.png) no-repeat center center;
/* background-color: #000; */
}
.right_arrow label {
display: inline-block;
width: 25px;
height: 25px;
top: 50%;
right: 0%;
margin-top: -12.5px;
position: absolute;
margin-right: 25px;
}
#put1:checked ~ .right_arrow label:nth-of-type(2),
#put2:checked ~ .right_arrow label:nth-of-type(3),
#put3:checked ~ .right_arrow label:nth-of-type(1) {
opacity: 0.5;
margin-right: 0px;
cursor: pointer;
background: url(image/dem/right.png) no-repeat center center;
}
.fsthree {
display: flex;
flex-wrap: wrap;
align-content: space-between;
margin-top: 10px;
width: 190px;
height: 470px;
overflow: hidden;
}
.fsthree > .a {
/* 循环播放容器 */
width: 190px;
height: 150px;
}
.demo3 {
/* 图片容器 */
width: 570px;
height: 150px;
font-size: 0px;
animation: three 30s infinite linear;
}
.fsthree img {
/* 单个图片大小 */
width: 190px;
height: 150px;
float: left;
}
@keyframes three {
/* 播放动画 */
0%,
32.99% {
margin-left: 0px;
}
33%,
67.99% {
margin-left: -190px;
}
68%,
100% {
margin-left: -380px;
}
}
.fsfour {
margin-top: 10px;
height: 470px;
width: 190px;
background-color: rgb(255, 255, 255);
}
.fsfour > .one {
position: relative;
flex-wrap: wrap;
width: 190px;
height: 102px;
z-index: 0;
}
.fsfour .one .o {
/* 头像框 */
position: absolute;
width: 40px;
height: 40px;
margin-top: 13px;
margin-left: 20px;
border-radius: 50%;
}
.fsfour .one .t {
/* 欢迎逛京东 */
position: absolute;
width: 106px;
height: 38px;
margin-top: 16px;
margin-left: 70px;
cursor: pointer;
}
.fsfour .one .t span:hover {
color: #c81623;
}
.fsfour .one .bottom {
/* 新人福利、plus会员 框 */
position: absolute;
justify-content: space-between;
margin-top: 70px;
height: 25px;
width: 100%;
}
.img1 {
/* 头像 */
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
.fsfour .one li {
list-style-type: none;
width: auto;
display: block;
color: #666;
font-size: 7px;
line-height: normal;
cursor: pointer;
}
.fsfour .one li:hover {
background-color: rgb(255, 255, 255);
}
.fsfour .red:hover {
color: rgb(200, 22, 35);
}
.fsfour > .one > .bottom > .left {
/* 新人福利 */
position: absolute;
margin: 0 16px;
width: 70px;
height: 25px;
min-width: auto;
background-color: rgb(223, 36, 28);
color: rgb(255, 255, 255);
font-size: 7px;
text-align: center;
line-height: 25px;
border-radius: 30px;
cursor: pointer;
}
.fsfour > .one > .bottom > .right {
/* PLUS会员 */
position: absolute;
margin: 0 16px;
width: 70px;
height: 25px;
margin-left: 100px;
min-width: auto;
background-color: rgb(54, 54, 52);
border-radius: 30px;
font-size: 7px;
text-align: center;
line-height: 25px;
color: rgb(229, 215, 144);
cursor: pointer;
}
hr {
width: 60%;
border-bottom: 1px solid rgb(238, 238, 238);
margin: auto;
}
.fsfour > .two {
width: 190px;
height: 130px;
}
.fsfour > .two > .o {
/* 京东快报 */
margin: 0px 15px;
padding: 10px 0 0 0;
width: 150px;
height: 20px;
font-weight: 700;
font-size: 14px;
}
.fsfour > .two > .o > a {
/* “更多 */
text-decoration: none;
/* 删除下划线 */
font-size: 12px;
color: rgb(153, 153, 153);
float: right;
cursor: pointer;
}
.fsfour > .two > .t {
list-style-type: none;
font-size: 12px;
height: 100px;
color: #666;
width: 160px;
margin: auto;
}
.fsfour > .two > .t > li {
cursor: pointer;
color: #666;
width: 160px;
height: 20px;
overflow: hidden;
/*规定文本不进行换行*/
white-space: nowrap;
/*当对象内文本溢出时显示省略标记（...）*/
text-overflow: ellipsis;
}
.fsfour > .two > .t > li:hover {
background-color: rgb(255, 255, 255);
color: #c81623;
}
.fsfour > .two > .t .a {
cursor: pointer;
/* 热门、HOT */
background-color: rgb(253, 238, 237);
color: rgb(225, 37, 27);
width: 35px;
height: 16px;
margin-right: 6px;
}
.fsfour > .three {
display: flex;
width: 190px;
margin-top: 11px;
height: 225px;
}
.fsfour > .three > .bb {
/* 话费等先分为三等份 */
display: flex;
flex: 1;
flex-direction: column;
/* 子元素从上往下分 */
}
.fsfour > .three > .bb > div {
cursor: pointer;
/* 三等份里的四个小盒子 */
display: flex;
flex-direction: column;
/* 从上往下排列 */
flex: 1;
align-items: center;
/* 侧轴（x）居中 */
color: #333;
font-size: 7px;
}
.fsfour > .three > .bb > div > img {
width: 28px;
height: 28px;
margin-bottom: 4px;
opacity: 1;
}
#a {
display: flex;
margin-top: 30px;
min-width: 1500px;
height: 260px;
}
#a > .bd {
display: flex;
width: 1190px;
margin: auto;
height: 260px;
cursor: pointer;
}
.xfl {
margin: auto;
height: 420px;
width: 58px;
left: 1390px;
background-color: #c81623;
}
#a > .bd > div:nth-child(2n-1) {
position: relative;
background-color: #fff;
flex: 1;
}
#a > .bd > div {
flex: 4;
overflow: hidden;
}
#a > .bd > div:nth-child(1) > div {
position: absolute;
top: 31px;
width: 190px;
height: 45px;
font-size: 30px;
color: #fff;
font-weight: 700;
text-align: center;
}
#a > .bd > div:nth-child(2) > ul {
/* 京东秒杀旁边轮播图 */
display: flex;
width: 2400px;
height: 260px;
list-style-type: none;
background-color: #c81623;
animation: jd 30s infinite linear;
}
#a > .bd > div:nth-child(2) > ul > li {
width: 200px;
height: 260px;
background-color: rgb(255, 255, 255);
margin: 0px;
}
#a > .bd > div:nth-child(2) > ul > li > div {
/* 京东秒杀旁边图片 */
margin: 30px auto 0 auto;
width: 140px;
height: 140px;
}
#a > .bd > div:nth-child(2) > ul > li > div > img {
width: 140px;
height: 140px;
}
#a > .bd > div:nth-child(2) > ul > li > span {
display: inline-block;
width: 160px;
height: 18px;
margin: 13px 20px 0 20px;
font-size: 12px;
font-weight: 400;
color: #333;
overflow: hidden;
/*规定文本不进行换行*/
white-space: nowrap;
/*当对象内文本溢出时显示省略标记（...）*/
text-overflow: ellipsis;
}
#a > .bd > div:nth-child(2) > ul > li > span:hover {
color: #c81623;
}
#a > .bd > div:nth-child(2) > ul > li > .b {
width: 160px;
height: 24px;
margin-top: 7px;
line-height: 24px;
text-align: center;
color: #e1251b;
font-size: 12px;
font-weight: 700;
}
@keyframes jd {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#a > .bd > div > r {
width: 180px;
height: 240px;
padding: 10px;
}
#a > .bd > div:nth-child(3) > div {
display: flex;
align-content: center;
flex-wrap: wrap;
width: 180px;
height: 240px;
padding: 10px;
}
#a > .bd > div:nth-child(3) > div > img {
margin: 0 auto;
width: 120px;
height: 120px;
}
#a > .bd > div:nth-child(3) > div > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 180px;
margin-top: 10px;
}
#a > .bd > div:nth-child(3) > div > div > .one {
font-size: 14px;
font-weight: 500;
/* margin: 0 auto; */
color: #666666;
height: 21px;
}
#a > .bd > div:nth-child(3) > div > div > .two {
font-size: 14px;
font-weight: 700;
color: #333333;
height: 21px;
}
#a > .bd > div:nth-child(3) > div > div > .three {
border-radius: 14px;
margin-top: 4px;
width: 82px;
line-height: 24px;
height: 24px;
border: 1px solid #e1251b;
font-size: 12px;
font-weight: 700;
text-align: center;
color: #e1251b;
}
#a > .bd > div:nth-child(3) > div > div > .three:hover {
color: white;
border-color: transparent;
background-color: #c81623;
}
#b {
margin: 20px auto;
min-width: 1500px;
height: 340px;
}
#b > .bd {
display: flex;
justify-content: space-between;
width: 1190px;
margin: auto;
height: 340px;
}
#b > .bd > .l {
width: 590px;
height: 340px;
background-color: rgb(255, 255, 255);
}
#b > .bd .head {
position: relative;
padding: 0 20px;
width: 550px;
height: 60px;
}
#b > .bd .head .left {
font-weight: 700;
font-size: 24px;
float: left;
line-height: 60px;
cursor: pointer;
}
#b > .bd .head > ul {
display: flex;
justify-content: space-between;
list-style-type: none;
float: right;
font-size: 14px;
height: 21px;
width: 261.5px;
margin-top: 15px;
}
#b > .bd .head > ul > li {
width: auto;
line-height: 16px;
font-size: 14px;
color: #999999;
cursor: pointer;
}
#b > .bd .head > ul > li:hover {
background-color: rgb(255, 255, 255);
color: #e1251b;
text-decoration: underline 3px;
/* 给文字设置下划线*/
text-decoration-color: #e1251b;
/*给下划线设置颜色 */
text-underline-offset: 4px;
/* 下划线与文字距离 */
}
#b .ts {
visibility: hidden;
position: absolute;
display: flex;
width: 560px;
height: 270px;
padding: 0 15px 15px 15px;
top: 60px;
left: 0px;
background-color: rgb(255, 255, 255);
}
#b .ch {
position: absolute;
display: flex;
width: 560px;
height: 270px;
padding: 0 15px 15px 15px;
top: 60px;
left: 0px;
}
#b .a {
width: 170px;
height: 256px;
margin-right: 6px;
background-color: rgb(248, 248, 249);
}
#b .dw {
position: relative;
}
#b .mr {
position: absolute;
left: 0px;
top: 70px;
display: inline-block;
color: #ffffff;
font-size: 12px;
background-color: #00000099;
width: 84px;
text-align: center;
}
#b .a > .a {
width: 170px;
height: auto;
color: #333333;
font-size: 14px;
margin: 9px 0px 4px 0px;
text-align: center;
line-height: 25px;
}
#b .yq {
/* 已抢 */
position: absolute;
color: #999999;
font-size: 12px;
height: 18px;
top: 70px;
}
#b .yq span {
color: #e1251b;
}
#b .a > span {
/* 298天最低价 */
display: inline-block;
float: left;
text-align: center;
width: 90px;
height: 24px;
line-height: 24px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
background-color: rgb(247, 164, 0);
}
#b .a > .a > img {
width: 120px;
height: 120px;
margin-top: 22px;
}
#b .a > .a > .q {
color: #e1251b;
font: 18px;
font-weight: 700;
text-align: center;
}
#b .b {
width: 384px;
height: 256px;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
}
#b .b .b {
float: left;
width: 165px;
height: 89px;
margin: 18px 0px 48px 19px;
}
#b .c {
position: relative;
height: 84px;
width: 75px;
color: #333333;
font-size: 12px;
}
#b .c .rmb {
font-size: 14px;
width: 0px;
color: #e1251b;
font-weight: 700;
margin-top: 5px;
margin-left: 5px;
}
#b .b img {
width: 84px;
height: 84px;
}
#b .b .d {
display: grid;
float: left;
width: 170px;
height: 84px;
margin: 0px 0px 48px 19px;
grid-template-columns: 84px 75px;
}
#b .b .rmb {
color: #e1251b;
font-size: 14px;
line-height: 16px;
font-weight: 700;
}
#b li:hover .ts {
visibility: visible;
}
#b > .bd > .r {
width: 590px;
height: 340px;
background-color: rgb(255, 255, 255);
}
#b > .bd > .r > .bd {
display: flex;
height: 325px;
width: 550px;
margin: 0 20px 10px 20px;
background-color: rgb(255, 255, 255);
}
#b > .bd > .r > .bd > .bd {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#b > .bd > .r > .bd > .bd:nth-child(1) {
background-color: rgb(245, 248, 245);
}
#b > .bd > .r .head {
/* 品牌闪购 */
width: 235px;
font-weight: 700;
font-size: 24px;
float: left;
line-height: 60px;
cursor: pointer;
color: #000;
background-color: rgb(255, 255, 255);
}
#b .sfj {
/* 舒福佳 */
margin-top: 20px;
text-align: center;
font-weight: 700;
width: 275px;
color: rgb(15, 101, 206);
font-size: 20px;
height: 70px;
}
#b .aa {
text-align: center;
color: #000;
font-size: 16px;
font-weight: 700;
width: 275px;
height: 30px;
}
#b .aaa {
color: #999;
font-size: 13px;
height: 30px;
margin-top: -10px;
}
#b > .bd > .r > .bd:nth-child(1) img {
width: 120px;
height: 120px;
}
#b > .bd > .r > .bd :nth-child(2) > .body {
width: 275px;
margin-top: 30px;
height: 295px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(2, 135px);
}
#b > .bd > .r > .bd :nth-child(2) > .body > .sb {
/* 商标 */
text-align: end;
width: 135px;
height: 72px;
padding: 14px 0;
}
#b > .bd > .r > .bd :nth-child(2) > .body > .sb > .sb1 {
/* 商标 */
width: 100px;
height: 50px;
margin-right: 20px;
}
#b > .bd > .r > .bd :nth-child(2) > .body > .sb > .sb2 {
/* 字 */
width: 135px;
text-align: center;
height: 18px;
font-size: 12px;
margin-top: 6px;
font-weight: 400;
color: #666;
}
#c {
min-width: 1500px;
height: 260px;
}
#c > .bd {
display: grid;
width: 1190px;
height: 260px;
margin: auto;
grid-template-columns: 190px 990px;
grid-template-rows: 260px 260px;
grid-column-gap: 10px;
}
#c > .bd > .l {
cursor: pointer;
width: 190px;
height: 260px;
background-image: url("image/发现好货/发现好货.png");
}
#c > .bd > .l > .haohuo {
width: 160px;
height: 90px;
margin: 0 auto;
margin-top: 15px;
background-image: url("image/发现好货/发现.png");
}
#c > .bd > .l > .haohuo > span {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding-top: 55px;
padding-left: 20px;
padding-bottom: 10px;
display: block;
}
#c > .bd > .r {
/* 滚动条初始隐藏 */
width: 990px;
height: 260px;
overflow: hidden;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
#c > .bd > .r:hover {
/* 放上鼠标进度条出现 */
overflow: auto;
}
#c > .bd > .r > ul {
width: 3000px;
height: 231px;
display: flex;
animation: gundong 40s infinite linear;
}
#c > .bd > .r > ul:hover {
animation-play-state: paused;
}
#c > .bd > .r > ul > .li1 {
margin: 50px 50px 0 0;
width: 150px;
height: auto;
}
#c > .bd > .r > ul > .li2 {
margin: 20px 50px 0 0;
width: 150px;
height: auto;
}
#c ul li:hover {
/* 与屎山代码抵消 */
background-color: rgb(255, 255, 255);
}
#c .name1:hover {
color: #e1251b;
background-color: rgb(255, 255, 255);
}
#c .name2:hover {
color: #e1251b;
background-color: rgb(255, 255, 255);
}
#c .name1 {
overflow: hidden;
/* 文本不换行 */
white-space: nowrap;
text-overflow: ellipsis;
color: #333;
text-align: center;
font-size: 14px;
margin-bottom: 10px;
}
#c .name2 {
overflow: hidden;
/* 文本不换行 */
white-space: nowrap;
text-overflow: ellipsis;
color: #333;
text-align: center;
font-size: 14px;
margin-top: 10px;
}
@keyframes gundong {
0% {
margin-left: 0;
}
100% {
margin-left: -2000px;
}
}
#c ul img {
width: 150px;
height: 150px;
}
#d {
margin: 20px 0;
min-width: 1500px;
height: 340px;
}
#d > .bd {
display: flex;
justify-content: space-between;
height: 340px;
width: 1190px;
margin: auto;
}
#d > .bd > div {
width: 290px;
height: 340px;
background-color: rgb(255, 255, 255);
}
#d > .bd > div:nth-child(2) > .header {
/* TOY寻宝 */
width: 280px;
height: 40px;
margin-top: -5px;
margin-bottom: -10px;
}
#d > .bd > div:nth-child(2) > .header ul {
display: flex;
position: relative;
}
#d > .bd > div:nth-child(2) > .header li {
height: 20px;
width: 62px;
margin: 0 4px;
border-radius: 12px;
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: #f6f6f6;
}
#d > .bd > div:nth-child(2) > .header li .yc {
display: flex;
flex-wrap: wrap;
visibility: hidden;
position: absolute;
top: 30px;
left: 0px;
height: 230px;
width: 290px;
background-color: rgb(255, 255, 255);
}
#d > .bd > div:nth-child(2) > .header li:hover {
background-color: #e1251b;
color: #ffffff;
}
#d > .bd > div:nth-child(2) > .header li:hover .yc {
visibility: visible;
}
#d > .bd > div:nth-child(2) .bbsb {
display: flex;
flex-wrap: wrap;
height: 70px;
width: 270px;
padding: 0 10px;
margin-bottom: 10px;
}
#d > .bd > div:nth-child(2) .bbsb img {
height: 70px;
width: 70px;
}
#d > .bd > div:nth-child(2) .bbsb .text {
line-height: 20px;
text-align: start;
color: #333333;
font-size: 14px;
width: 180px;
height: 70.4px;
margin: 0 auto;
}
#d > .bd > div:nth-child(2) .bbsb .price {
width: 180px;
height: 24px;
margin-top: 10px;
color: #e1251b;
font-size: 16px;
}
.price > span {
color: #e1251b;
font-size: 12px;
}
#d > .bd > div:nth-child(1) {
background-image: url("image/新品首发/新品首发bg.png");
background-size: 100% 100%;
}
#d > .bd > div:nth-child(3) > .bd1,
.bd2 {
cursor: pointer;
width: 120px;
height: 98px;
padding: 15px 125px 15px 15px;
margin: 0 15px 10px 15px;
display: flex;
flex-wrap: wrap;
position: relative;
}
#d > .bd > div:nth-child(3) .bd1 {
background-image: url("image/新品首发/海威bg.png");
}
#d > .bd > div:nth-child(3) .bd2 {
background-image: url("image/新品首发/格力官方.png");
}
#d > .bd > div:nth-child(3) .title {
max-height: 38px;
line-height: 1.3em;
font-size: 14px;
color: #333;
width: 120px;
overflow: hidden;
/*当对象内文本溢出时显示省略标记（...）*/
text-overflow: ellipsis;
/* 在第几行隐藏出省略号 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#d > .bd > div:nth-child(3) .bd1 > .bd1 {
width: 120px;
height: 18.2px;
margin-top: 5px;
display: flex;
flex-wrap: nowrap;
}
#d > .bd > div:nth-child(3) .bd1 .bq1 {
/* 标签红 */
width: 24px;
height: 16px;
padding: 0 2px;
border: 1px solid #e1251b;
margin: 0 5px 0 0;
color: #e1251b;
font-size: 12px;
cursor: pointer;
}
#d > .bd > div:nth-child(3) .bq2 {
/* 标签红 */
width: 54px;
height: 16px;
padding: 0 2px;
border: 1px solid #596fab;
margin: 0 5px 0 0;
color: #596fab;
font-size: 12px;
cursor: pointer;
}
#d > .bd > div:nth-child(3) .img {
position: absolute;
padding: 5px;
width: 90px;
height: 90px;
top: 15px;
left: 150px;
background-color: #fff;
cursor: pointer;
}
#d > .bd > div:nth-child(3) img {
width: 90px;
height: 90px;
}
#d > .bd > div:nth-child(3) .guanzhu {
/* 关注人数 */
color: #999999;
font-size: 12px;
width: 79.04px;
height: 18px;
margin-top: 20px;
}
#d > .bd > div:nth-child(3) .guanzhu3 {
/* 关注人数 */
color: #999999;
font-size: 12px;
width: 79.04px;
height: 18px;
margin-top: 40px;
}
#d > .bd > div:nth-child(4) .bg {
width: 290px;
height: 280px;
background-image: url("image/新品首发/领卷中心bg.png");
display: flex;
flex-direction: column;
}
#d > .bd > div:nth-child(4) .bg .bg {
width: 260px;
padding: 0 15px;
height: 280px;
}
#d > .bd > div:nth-child(4) .bg .bg .div {
height: 82px;
width: 260px;
margin-bottom: 3px;
display: flex;
flex-wrap: wrap;
}
#d > .bd > div:nth-child(4) .bg .bg .div .ljimg {
width: 50px;
height: 50px;
padding: 8px;
margin: 8px 0 0 7px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
}
#d > .bd > div:nth-child(4) .bg .bg .div .ljimg .jimg {
width: 50px;
height: 50px;
border-radius: 5px;
}
#d > .bd > div:nth-child(4) .bg .bg .div .div {
width: 140px;
height: 78px;
}
#d > .bd > div:nth-child(4) .bg .bg .div .ljprice {
width: 140px;
height: 34px;
color: #e33333;
font-size: 14px;
font-family: impact, sans-serif;
}
#d > .bd > div:nth-child(4) .bg .bg .div .div .desc {
width: 140px;
height: 18px;
color: #333333;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#d > .bd > div:nth-child(4) .bg .bg > .div > .inner {
width: 10px;
height: 60px;
font-size: 12px;
font-family: "Microsoft YaHei";
color: #666666;
margin-top: 10px;
cursor: pointer;
}
#d > .bd > div:nth-child(4) .bg .bg > .div > .inner:hover {
color: #e1251b;
}
#d > .bd > div:nth-child(4) .bg .bg > .div > .gd {
width: 10px;
height: 60px;
font-size: 12px;
margin-top: 10px;
cursor: pointer;
line-height: 60px;
}
#d > .bd > div:nth-child(4) .bg .bg .div .ljprice > span {
width: 140px;
height: 34px;
color: #e33333;
font-size: 28px;
}
#d .head {
width: 250px;
padding: 0 20px;
height: 60px;
}
#d > .bd > div:nth-child(1) img {
width: 290px;
height: 250px;
}
#d > .bd > div:nth-child(4) .bg .bg .div .limit {
color: #999999;
font-size: 12px;
width: 140px;
height: 18px;
}
#d .head .text {
float: left;
font-weight: 700;
font-size: 24px;
color: #333;
line-height: 32px;
width: 120px;
height: 32px;
margin: 12px 0 0 0;
}
#fixed {
top: 100px;
width: 58px;
height: 420px;
position: fixed;
left: 50%;
margin-left: 630px;
z-index: 99;
}
#fixed > ul {
width: 58px;
height: 420px;
}
#fixed > ul > li {
width: 58px;
height: 60px;
line-height: 19px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
background-color: rgb(255, 255, 255);
}
#fixed > ul > li > .li1 {
width: 28px;
height: 38.2px;
color: #e1251b;
font-size: 14px;
font-family: "Microsoft YaHei";
}
#fixed > ul > li > .li2 {
width: 28px;
height: 38.2px;
font-size: 14px;
font-family: "Microsoft YaHei";
}
#fixed > ul > li > .li3 {
width: 28px;
height: 19.2px;
font-size: 14px;
font-family: "Microsoft YaHei";
}
#fixed .i {
width: 16px;
height: 16.8px;
margin: 0 10px;
}
#fixed > ul > li > .li2 > a {
color: #333;
}
#fixed > ul > li > .li3 > a {
color: #333;
}
#fixed li:hover {
background-color: rgb(200, 22, 35);
}
#fixed li:hover .a {
color: #fff;
}
#fixed a {
/* 清除下划线 */
text-decoration: none;
color: #e1251b;
font-size: 14px;
padding: auto;
}
#fixed hr {
position: absolute;
left: 12px;
}
#pdgcbg {
min-width: 1500px;
height: 45px;
margin-bottom: 20px;
}
#pdgcbg > .pdgc {
width: 150px;
height: 45px;
margin: 0 auto 20px;
padding: 0 30px;
font-size: 28px;
font-weight: 700;
line-height: 45px;
text-align: center;
position: relative;
}
#pdgcbg > .pdgc > .divf {
width: 25px;
height: 20px;
position: absolute;
top: 12.5px;
left: 0px;
}
#pdgcbg > .pdgc > .divl {
width: 25px;
height: 20px;
position: absolute;
top: 12.5px;
right: 0px;
}
#pdgcbg1 {
min-width: 1500px;
height: 45px;
margin-bottom: 20px;
}
#pdgcbg1 > .pdgc {
width: 150px;
height: 45px;
margin: 0 auto 20px;
padding: 0 30px;
font-size: 28px;
font-weight: 700;
line-height: 45px;
text-align: center;
position: relative;
}
#pdgcbg1 > .pdgc > .divf {
width: 25px;
height: 20px;
position: absolute;
top: 12.5px;
left: 0px;
}
#pdgcbg1 > .pdgc > .divl {
width: 25px;
height: 20px;
position: absolute;
top: 12.5px;
right: 0px;
}
#jdcsbg {
min-width: 1500px;
height: 950px;
margin-bottom: 20px;
}
#jdcsbg > .jdcs {
width: 1190px;
height: 950px;
margin: auto;
display: grid;
place-content: space-between space-between;
grid-template-columns: repeat(4, 290px);
grid-template-rows: repeat(5, 180px);
grid-template-areas:
"jd sx sj es"
"jd sx jz dq"
"qy cs dz dy"
"joy sxg mz ss"
"xj sm cw xyj";
}
.jdimg,
.sximg,
.sjimg,
.esimg,
.jzimg,
.dqimg,
.qyimg,
.csimg,
.dzimg,
.dyimg,
.joyimg,
.sxgimg,
.mzimg,
.ssimg,
.xjimg,
.smimg,
.cwimg,
.xyjimg {
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
}
#jdcsbg .jdimg {
grid-area: jd;
}
#jdcsbg .sximg {
grid-area: sx;
}
#jdcsbg .sjimg {
grid-area: sj;
}
#jdcsbg .esimg {
grid-area: es;
}
#jdcsbg .jzimg {
grid-area: jz;
}
#jdcsbg .dqimg {
grid-area: dq;
}
#jdcsbg .qyimg {
grid-area: qy;
}
#jdcsbg .csimg {
grid-area: cs;
}
#jdcsbg .dzimg {
grid-area: dz;
}
#jdcsbg .dyimg {
grid-area: dy;
}
#jdcsbg .joyimg {
grid-area: sxg;
}
#jdcsbg .mzimg {
grid-area: mz;
}
#jdcsbg .ssimg {
grid-area: ss;
}
#jdcsbg .xjimg {
grid-area: xj;
}
#jdcsbg .smimg {
grid-area: sm;
}
#jdcsbg .cwimg {
grid-area: cw;
}
#jdcsbg .xyjimg {
grid-area: xyj;
}
#jdcsbg .tbox {
/* 顶部的盒子 */
width: 250px;
height: 30px;
padding: 17px 0 13px 0;
margin: 0 10px 0px 30px;
font-size: 22px;
font-weight: 700;
color: #333;
}
#jdcsbg .tbox > .sbox {
color: #999;
font-size: 14px;
margin-left: 5px;
font-weight: 400;
}
#jdcsbg .bbox {
/* 底部的盒子 */
display: flex;
width: 260px;
height: 100px;
margin: 0 0 0 30px;
}
#jdcsbg .bbox > .lbox {
width: 100px;
height: 100px;
margin-right: 30px;
transition: opacity 0.5s;
}
#jdcsbg .bbox > .lbox:hover {
opacity: 0.8;
}
#jdcsbg .jdimg,
.sximg {
transition: opacity 0.5s;
}
#jdcsbg .jdimg:hover,
.sximg:hover {
opacity: 0.8;
}
#wntj {
width: 1190px;
margin: auto;
height: 1056px;
}
#wntj > .header {
width: 1190px;
height: 60px;
margin-bottom: 10px;
background-color: rgb(255, 255, 255);
}
#wntj .header ul {
width: 1080px;
height: 60px;
margin: auto;
display: flex;
}
#wntj .header ul li {
width: 180px;
height: 60px;
/*首先我们设置边框只显示右侧，宽度为2px的实线。*/
border-right: 2px solid;
/*设置线性渐变*/
border-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 10%,
rgb(226, 226, 226) 50%,
rgba(255, 255, 255, 0) 90%
)
2 2 2 2;
}
#wntj .header ul .li {
width: 180px;
height: 60px;
border-right: 0px;
}
#wntj .header ul li:hover {
background-color: rgb(255, 255, 255);
}
#wntj .header ul li:hover .tbox {
color: #c81623;
}
#wntj .header ul li:hover .bbox {
color: #c81623;
}
#wntj .header ul li .tbox {
width: 180px;
height: 27px;
margin-top: 7px;
color: #333333;
font-size: 16px;
line-height: 27px;
font-weight: 700;
cursor: pointer;
text-align: center;
}
#wntj .header ul li .tbox1 {
width: 70px;
height: 27px;
color: #fff;
padding: 0 5px;
margin: auto;
background-color: #e1251b;
border-radius: 50px;
font-size: 16px;
line-height: 27px;
font-weight: 700;
cursor: pointer;
text-align: center;
}
#wntj .header ul li .bbox {
width: 180px;
height: 21px;
color: #999999;
font-size: 14px;
text-align: center;
cursor: pointer;
}
#wntj .header ul li .bbox1 {
width: 180px;
height: 21px;
color: #e1251b;
font-size: 14px;
text-align: center;
cursor: pointer;
}
#wntj .body {
width: 1190px;
height: 986px;
display: grid;
grid-template-columns: repeat(5, 230px);
grid-template-rows: repeat(3, 322px);
place-content: space-between space-between;
}
#wntj .body div {
background-color: rgb(255, 255, 255);
position: relative;
cursor: pointer;
}
#wntj .body div .zxs {
transition: opacity 0.5s;
opacity: 0;
position: absolute;
width: 120px;
height: 28px;
border: 1px solid #353131;
background-color: #353131;
font-size: 12px;
border-radius: 15px;
color: #fff;
left: 55px;
bottom: 20px;
visibility: hidden;
text-align: center;
line-height: 28px;
}
#wntj .body div:hover .zxs {
visibility: visible;
opacity: 1;
}
#wntj .body div:hover .bbox {
opacity: 0;
}
#wntj .body .tbox {
background-color: rgb(255, 255, 255);
width: 150px;
height: 150px;
margin: 30px 40px 40px;
opacity: 1;
transition: opacity 0.5s;
}
#wntj .body div:hover .tbox {
opacity: 0.8;
}
#wntj .body .mbox {
margin: auto;
text-align: center;
width: 190px;
height: 48px;
font-size: 14px;
line-height: 24px;
color: #666;
overflow: hidden;
/*当对象内文本溢出时显示省略标记（...）*/
text-overflow: ellipsis;
/* 在第几行隐藏出省略号 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#wntj .body .bbox {
width: 190px;
height: 30px;
margin: auto;
font-size: 18px;
color: #e1251b;
font-weight: 700;
opacity: 1;
transition: opacity 0.5s;
}
#wntj .body .mbox span {
background-color: #e1251b;
border-radius: 2px;
color: #fff;
padding: 0 5px;
margin-right: 4px;
line-height: 16px;
height: 16px;
font-size: 12px;
}
#wntj .body .bbox span {
font-size: 12px;
color: #e1251b;
font-weight: 700;
}
#wntj .body .div1 {
width: 100%;
height: 100%;
cursor: pointer;
}
#wntj .body .jxdiv {
width: 100%;
height: 100%;
background-image: url("image/为你推荐/精选.png");
}
#wntj .body .jxdiv .header {
width: 110px;
height: 34px;
margin: 20px 60px 37px 60px;
line-height: 34px;
color: #fff;
background-color: #f2272b;
font-size: 16px;
font-weight: 700;
text-align: center;
border-radius: 50px;
}
#wntj .body .jxdiv .bbbox {
width: 230px;
height: 192px;
display: grid;
place-content: space-around space-around;
grid-template-columns: repeat(2, 88px);
grid-template-rows: repeat(4, 32px);
}
#wntj .body .jxdiv .bbbox div {
font-weight: 400;
width: 100%;
height: 100%;
color: #c81623;
border: 1px solid #ffe0e8;
border-radius: 5px;
font-size: 14px;
line-height: 36px;
text-align: center;
}
#wntj .body .jxdiv .bbbox div:hover {
background: #c81623;
border-color: #c81623;
color: #fff;
}
#dbbg {
margin-top: 10px;
width: 1190px;
height: 570px;
margin: auto;
}
#dbbg .box1 {
width: 1190px;
height: 42px;
padding: 30px 0;
display: flex;
border-bottom: 1px solid #dedede;
}
#dbbg .box1 .zbox {
position: relative;
width: 180px;
height: 42px;
padding-left: 45px;
margin: 0 36px;
font-size: 18px;
font-weight: 700;
color: #444;
line-height: 42px;
}
#dbbg .box1 .zbox img {
width: 36px;
height: 42px;
position: absolute;
left: 0px;
}
#dbbg .box2 {
display: flex;
width: 1190px;
height: 160px;
padding: 20px 0;
border-bottom: 1px solid #dedede;
}
#dbbg .box2 .lbox {
width: 990px;
height: 159px;
}
#dbbg .box2 .lbox .lbox1 {
width: 990px;
height: 22px;
margin-bottom: 5px;
display: flex;
}
#dbbg .box2 .lbox .lbox1 .text {
width: 198px;
height: 22px;
font-size: 14px;
line-height: 22px;
font-weight: 700;
color: #666666;
}
#dbbg .box2 .lbox .lbox2 {
width: 990px;
height: 22px;
display: grid;
grid-template-columns: repeat(5, 198px);
grid-template-rows: repeat(6, 22px);
}
#dbbg .box2 .lbox .lbox2 .text {
color: #666666;
font-size: 12px;
width: auto;
height: 16px;
}
#dbbg .box2 .rbox {
width: 200px;
height: 150px;
}
#dbbg .box2 .rbox .text {
width: 200px;
height: 21px;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
font-weight: 700;
color: #666666;
}
#dbbg .box2 .rbox .bbox {
width: 180px;
height: 54px;
padding: 0 10px;
color: #666666;
font-size: 12px;
line-height: 18px;
}
#dbbg .box2 .rbox .bbox .b1box {
width: 180px;
text-align: right;
}
#dbbg .box3 {
width: 1190px;
height: 236px;
padding: 15px 0;
border-top: 1px;
}
#dbbg .box3 .box31 {
width: 1190px;
height: 18px;
padding: 0px;
display: flex;
}
#dbbg .box3 .box31 li {
width: auto;
height: 16px;
color: #666666;
font-size: 12px;
text-align: center;
}
#dbbg .box3 .box31 span {
margin: 0 7px;
color: #cccccc;
font-weight: 100;
}
#dbbg .box3 .box32 {
width: 1190px;
height: 110px;
padding: 10px 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#dbbg .box3 .box32 ul {
flex: 1;
width: 1190px;
height: 22px;
display: flex;
justify-content: center;
}
#dbbg .box3 .box32 li {
width: auto;
height: 16px;
color: #999999;
font-size: 12px;
text-align: center;
margin: 0px;
line-height: 22px;
}
#dbbg .box3 .box32 span {
line-height: 22px;
margin: 0 7px;
color: #999999;
font-weight: 100;
font-size: 12px;
}
#dbbg .box4 {
width: 1190px;
height: 36.4px;
color: #666666;
font-size: 12px;
margin: 25px 0;
display: flex;
justify-content: center;
}
#dbbg .box4 img {
width: 103px;
height: 32px;
margin: 0 3px;
}
#dbbg .box4 .img1 {
width: 70px;
height: 32px;
margin: 0 3px;
border-radius: 0;
}
#dbbg .box4 .img2 {
width: 88px;
height: 32px;
margin: 0 3px;
}
英雄联盟
html
<!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">
<title>英雄联盟全新官方网站-腾讯游戏</title>
<link rel="stylesheet" type="text/css" href="lol.css">
<link rel="icon" href="img\icon.ico">
<link rel="stylesheet" type="text/css" href="图标\箭头\iconfont.css">
</head>
<body>
<div id="all-bg">
<!-- 导航栏 -->
<div id="head-bg">
<div class="bg">
<div class="head">
<img src="img/头部图/lol.png">
<ul>
<li>
<span class="span1">游戏资料</span>
<span class="span2">GAME INFO</span>
</li>
<li>
<span class="span1">商城/合作</span>
<span class="span2">STORE</span>
</li>
<li>
<span class="span1">社区互动</span>
<span class="span2">COMMUNITY</span>
</li>
<li>
<span class="span1">赛事官网</span>
<span class="span2">ESPORTS</span>
</li>
<li>
<span class="span1">自助系统</span>
<span class="span2">SYSTEM</span>
</li>
<div class="xll">
<div class="text">
<ul>
<li>
<a href="">游戏下载</a>
<a href="">新手指引</a>
<a href="">资料库</a>
<a href=""><i class="icon"></i>云顶之弈</a>
<a href=""><i class="icon"></i>攻略中心</a>
<a href="">开发者基地</a>
<a href="">海克斯战利品库</a>
<a href="">英雄联盟宇宙</a>
</li>
<li>
<a href="">点卷充值</a>
<a href=""><i class="icon1"></i>道聚城</a>
<a href="">周边商城</a>
<a href="">LOL桌游</a>
<a href="">网吧特权</a>
<a href="">电竞小说</a>
</li>
<li>
<a href="">视频中心</a>
<a href="">官方微信</a>
<a href="">官方微博</a>
<a href="">玩家创作馆</a>
<a href="">玩家服务</a>
<a href=""><i class="icon"></i>LOL组队专区</a>
<a href=""><i class="icon"></i>作者入驻计划</a>
<a href=""><i class="icon"></i>英雄联盟素材库</a>
</li>
<li>
<a href=""><i class="icon1"></i>季中冠军赛</a>
<a href=""><i class="icon1"></i>LPL职业联赛</a>
<a href="">LDL发展联赛</a>
<a href="">全球总决赛</a>
<a href="">城市英雄争霸赛</a>
<a href="">德玛西亚杯</a>
<a href="">全国高校联赛</a>
<a href=""><i class="icon"></i>云顶之奕公开赛</a>
</li>
<li>
<a href=""><i class="icon"></i>图标自助领取</a>
<a href=""><i class="icon1"></i>转区系统</a>
<a href=""><i class="icon"></i>封号查询</a>
<a href="">账号注销</a>
<a href=""><i class="icon"></i>信誉分系统</a>
<a href="">服务器状态查询</a>
<a href="">秩序殿堂</a>
<a href="">峡谷之巅</a>
</li>
</ul>
</div>
</div>
</ul>
<!-- 玩家 -->
<div class="wj">
<div class="tx">
<img src="img/头部图/头像.png">
<span></span>
</div>
<div class="wz">
<p>亲爱的召唤师，欢迎<a href="">登录</a></p>
</div>
</div>
<!-- 掌盟 -->
<div class="zm">
<span></span>
</div>
<!-- 搜索 -->
<div class="sousuo">
<span></span>
</div>
</div>
</div>
</div>
<!-- 大图片 -->
<div id="big-img-bg">
<img class="big-img" src="img/头部图/0.jpg">
<div class="yy"></div>
<div class="box">
<div class="ckxq"></div>
<div class="bbxq">
当前游戏版本：
<em>Ver 12.12</em>
<div class="ckxqt">版本详情</div>
</div>
</div>
</div>
<!-- 轮播图大背景 -->
<div id="lbt-bg">
<!-- 轮播图 -->
<div class="lbtbox">
<div class="lbox">
<div class="lbt">
<ul>
<li>
<img src="img/轮播图/1.jpeg">
</li>
<li>
<img src="img/轮播图/2.jpeg">
</li>
<li>
<img src="img/轮播图/3.jpeg">
</li>
<li>
<img src="img/轮播图/4.jpeg">
</li>
<li>
<img src="img/轮播图/5.jpeg">
</li>
</ul>
</div>
<div class="lb">
<div class="dg">你的商店</div>
<div class="dg">不羁之悦</div>
<div class="dg">LPL夏季赛</div>
<div class="dg">星之守护者歌曲</div>
<div class="dg">精选周边低至六折起</div>
</div>
</div>
<div class="rbox">
<div class="lb">
<li>综合
<div class="dc"></div>
<ul class="u">
<li>《群星依旧》-星之守护者(2022)官方音乐视频</li>
<li>
<div class="bq">视频</div>
<div class="t">【英雄联盟】不羁之悦尼技英雄介绍</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq">视频</div>
<div class="t">【英雄联盟】不羁之悦尼菽英雄主题配乐</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">新英雄尼J与星之守护者即将降临</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13版本更新公告:不羁之悦尼菽降临峡谷，星之..</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13云顶之弈版本更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq">视频</div><!-- -->
<div class="t">【英雄联盟】群星将至，星之守护者2022即将开启</div>
<div class="r">07-13</div>
</li>
</ul>
</li>
<li>公告
<div class="dc"></div>
<ul class="u">
<li>另一片天空——星之守护者免费任务介绍</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">新英雄尼拉与星之守护者即将降临</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13版本更新公告:不羁之悦尼薇降临峡谷，星之...</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13云顶之弈版本更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">7月15日周免英雄更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">7月8日周免英雄更新公告</div>
<div class="r">07-06</div>
</li>
<li>
<div class="bq bqlan">新闻</div>
<div class="t">2022商城商品价格调整公告</div>
<div class="r">07-06</div>
</li>
</ul>
</li>
<li>赛事
<div class="dc"></div>
<ul class="u">
<li>TOP5: Rookie其人之道禁法施彼身</li>
<li>
<div class="bq bqlan">赛事</div>
<div class="t">LPL夏季赛7月15日首发名单，GALA交锋Light</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq">视频</div>
<div class="t">我是选手:Photic武术姿态余恨奏挽歌</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq">视频</div>
<div class="t">TOP5: Scout禁军之墙狂沙卷万里</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq bqlan">赛事</div>
<div class="t">LPL夏季赛7月14日首发名单，Rookie对阵Mole</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq bqlan">赛事</div>
<div class="t">议程揭晓:入亚8大电竞项目首聚!22位嘉宾共探亚洲...</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq">视频</div>
<div class="t">TOP5: Able炼狱扳机盛放似玫瑰</div>
<div class="r">07-13</div>
</li>
</ul>
</li>
<li>攻略
<div class="dc"></div>
<ul class="u">
<li>《群星依旧》-星之守护者(2022)官方音乐视频</li>
<li>
<div class="bq">视频</div>
<div class="t">【英雄联盟】不羁之悦尼技英雄介绍</div>
<div class="r">07-14</div>
</li>
<li>
<div class="bq">视频</div>
<div class="t">【英雄联盟】不羁之悦尼菽英雄主题配乐</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">新英雄尼J与星之守护者即将降临</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13版本更新公告:不羁之悦尼菽降临峡谷，星之..</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13云顶之弈版本更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq">视频</div><!-- -->
<div class="t">【英雄联盟】群星将至，星之守护者2022即将开启</div>
<div class="r">07-13</div>
</li>
</ul>
</li>
<li>社区
<div class="dc"></div>
<ul class="u">
<li>另一片天空——星之守护者免费任务介绍</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">新英雄尼拉与星之守护者即将降临</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13版本更新公告:不羁之悦尼薇降临峡谷，星之...</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">12.13云顶之弈版本更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">7月15日周免英雄更新公告</div>
<div class="r">07-13</div>
</li>
<li>
<div class="bq bqtu">公告</div>
<div class="t">7月8日周免英雄更新公告</div>
<div class="r">07-06</div>
</li>
<li>
<div class="bq bqlan">新闻</div>
<div class="t">2022商城商品价格调整公告</div>
<div class="r">07-06</div>
</li>
</ul>
</li>
</div>
<div class="bbox">
<span class="span1">阅读更多</span>
<span class="span2">最新资讯</span>
<i class="ijt"></i>
</div>
</div>
</div>
<!-- 热门活动 -->
<div id="rmhd">
<div class="lbox">
<div class="text">
热门活动
<ul class="u">
<li>正在进行
<div class="dc"></div>
<div class="chushi">
<div>
<img src="img/热门活动/1.webp">
<p>星之守护者2022</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者2022</h4>
<p class="p2">五位全新星之守护者闪亮登场 为爱与希望而战！</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img/热门活动/2.webp">
<p>星之守护者(2022)通行证</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者(2022)通行证</h4>
<p class="p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\3.jpg">
<p>提百万的赠礼</p>
<div class="over">213天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">提百万的赠礼</h4>
<p class="p2">充值返点券最高30%!</p>
<p class="p2">2022-07-15 - 2022-08-01</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\4.jpg">
<p>LPL纪念图标领取</p>
<div class="over">26天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">LPL纪念图标领取</h4>
<p class="p2">登陆英雄联盟客户端,免费领取LPL纪念图标</p>
<p class="p2">2022-06-20 - 2022-08-14</p>
</div>
</div>
</div>
</div>
</li>
<li>商城特惠
<div class="dc"></div>
<div class="chushi">
<div>
<img src="img\热门活动\5.jpg">
<p>星之守护者2022</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者2022</h4>
<p class="p2">五位全新星之守护者闪亮登场 为爱与希望而战！</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\6.jpg">
<p>星之守护者(2022)通行证</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者(2022)通行证</h4>
<p class="p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\7.jpg">
<p>提百万的赠礼</p>
<div class="over">213天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">提百万的赠礼</h4>
<p class="p2">充值返点券最高30%!</p>
<p class="p2">2022-07-15 - 2022-08-01</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\8.jpg">
<p>LPL纪念图标领取</p>
<div class="over">26天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">LPL纪念图标领取</h4>
<p class="p2">登陆英雄联盟客户端,免费领取LPL纪念图标</p>
<p class="p2">2022-06-20 - 2022-08-14</p>
</div>
</div>
</div>
</div>
</li>
<li>长期活动
<div class="dc"></div>
<div class="chushi">
<div>
<img src="img\热门活动\9.webp">
<p>夺冠图标表情领取</p>
<div class="over">长期活动</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者2022</h4>
<p class="p2">五位全新星之守护者闪亮登场 为爱与希望而战！</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img/热门活动/10.webp">
<p>至臻名品</p>
<div class="over">长期活动</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者(2022)通行证</h4>
<p class="p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\11.webp">
<p>小小英雄：巨龙幼崽来袭</p>
<div class="over">长期活动</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">提百万的赠礼</h4>
<p class="p2">充值返点券最高30%!</p>
<p class="p2">2022-07-15 - 2022-08-01</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\12.webp">
<p>破败之王 羽饰骑士礼包</p>
<div class="over">长期活动</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">LPL纪念图标领取</h4>
<p class="p2">登陆英雄联盟客户端,免费领取LPL纪念图标</p>
<p class="p2">2022-06-20 - 2022-08-14</p>
</div>
</div>
</div>
</div>
</li>
<div class="r">更多<i class="ijt"></i></div>
<div class="chushi">
<div>
<img src="img/热门活动/1.webp">
<p>星之守护者2022</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者2022</h4>
<p class="p2">五位全新星之守护者闪亮登场 为爱与希望而战！</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img/热门活动/2.webp">
<p>星之守护者(2022)通行证</p>
<div class="over">28天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">星之守护者(2022)通行证</h4>
<p class="p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼</p>
<p class="p2">2022-07-15 - 2022-08-16</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\3.jpg">
<p>提百万的赠礼</p>
<div class="over">213天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">提百万的赠礼</h4>
<p class="p2">充值返点券最高30%!</p>
<p class="p2">2022-07-15 - 2022-08-01</p>
</div>
</div>
</div>
<div>
<img src="img\热门活动\4.jpg">
<p>LPL纪念图标领取</p>
<div class="over">26天后结束</div>
<i class="inew"></i>
<div class="hover">
<div class="hover-border-1">
<h4 class="p1">LPL纪念图标领取</h4>
<p class="p2">登陆英雄联盟客户端,免费领取LPL纪念图标</p>
<p class="p2">2022-06-20 - 2022-08-14</p>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<div class="rbox">
<ul>
<li class="video">
<video autoplay loop muted width="366" height="168">
<source src="img\热门活动\btn-download.mp4" type="video/mp4">
</video>
</li>
<li class="btn-flashmen p1">新手必备</li>
<li class="btn-flashmen p2">领取中心</li>
<li class="p3">
<i class="icon-kh"></i>
在线客服
</li>
<li class="p3">
<i class="icon-fhcx"></i>
秩序殿堂
</li>
<li class="p3">
<i class="icon-yxzl"></i>
游戏资料
</li>
<li class="p4">
<i class="icon-xgzd"></i>
峡谷之巅
</li>
<li class="p3">
<i class="inew"></i>
<i class="icon-tft"></i>
云顶之奕
</li>
<li class="p3">
<i class="icon-101"></i>
攻略中心
</li>
<li class="p3">
<i class="icon-yz"></i>
LOL宇宙
</li>
<li class="p4">
<i class="icon-wxbd"></i>
微信绑定
</li>
</ul>
</div>
</div>
<!-- 英雄更新 -->
<div id="yxgx">
<div class="lbox">
<div>
<img src="img\英雄更新\0.jpg">
<a class="tip-gx">英雄更新</a>
<i class="pic-mask-0"></i>
<p class="text-yellow">不羁之悦 尼范</p>
<p class="text-white">新英雄尼菏上线!快乐，永不褪色。与尼范一同散布欢乐!</p>
<div class="hd">
<i class="border"></i>
<p class="p1">新英雄尼菈上线！快乐，永不褪色。与尼菈一同散布欢乐！</p>
<a class="inner-hover-href">查看详情</a>
</div>
</div>
<div>
<img src="img\英雄更新\0 (1).jpg">
<a class="tip-gx1">新皮肤</a>
<i class="pic-mask-01"></i>
<p class="text-yellow1">星之守护者2022</p>
<p class="text-white1">五位全新星之守护者闪亮登场为爱与希望而战!</p>
</div>
</div>
<div class="rbox">
<div class="box1">
<img src="img\英雄更新\0 (2).jpg">
</div>
<div class="box2">
<img src="img\英雄更新\0.png">
</div>
<div class="box3">
<img src="img\英雄更新\0 (3).jpg">
</div>
<div class="box4">
<a class="week-free-a">
<i class="inline-icon-0-left"></i>
周免
<i class="more-arrow-1"></i>
<i class="inline-icon-0-right"></i>
</a>
</div>
</div>
</div>
</div>
<!-- 最新视频 -->
<div id="zxsp-bg">
<!-- 最新视频 -->
<div id="zxsp">
<div class="lbox">
<div class="text">
最新视频
<ul>
<li>推荐
<div class="dc"></div>
</li>
<li>官方
<div class="dc"></div>
</li>
<li>娱乐
<div class="dc"></div>
</li>
<li>赛事
<div class="dc"></div>
</li>
<li>云顶之奕
<div class="dc"></div>
<i class="inew"></i>
</li>
<li>教学
<div class="dc"></div>
</li>
<div class="gd">更多
<i class="ijt"></i>
</div>
<div class="gd">换一批
<i class="icon-hyp"></i>
</div>
</ul>
</div>
<div class="bbox">
<div>
<img src="img\最新视频\1.png">
<div class="sj">05:45</div>
<div class="p">12.14版本环境前瞻，回复系统调整小龙BUFF加强</div>
<div class="p1">1.4万次播放</div>
<div class="p2">3小时</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\2.jpg">
<div class="sj">01:34</div>
<div class="p">群星闪耀，星之守护者2022第一系列皮肤现已上线</div>
<div class="p1">5272次播放</div>
<div class="p2">5小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\3.png">
<div class="sj">03:34</div>
<div class="p">宁王在IG打野第一视角，把TheShy养成个怪物</div>
<div class="p1">3336次播放</div>
<div class="p2">7小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\4.jpg">
<div class="sj">00:15</div>
<div class="p">LOL:尼范一秒叠满征服者!EQ二连瞬间12层怎么</div>
<div class="p1">3648次播放</div>
<div class="p2">9小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\5.png">
<div class="sj">07:25</div>
<div class="p">12.14版本改动:纳尔烈娜塔削弱，皇子妖姬加强</div>
<div class="p1">3199次播放</div>
<div class="p2">10小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\6.jpg">
<div class="sj">04:34</div>
<div class="p">阿乐自爆:只有Kiin能让我替补我已经备战S13找戈队伍</div>
<div class="p1">6038次播放</div>
<div class="p2">2022-07-19</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\7.png">
<div class="sj">02:11</div>
<div class="p">小虎看TheShy纳尔一打二</div>
<div class="p1">2462次播放</div>
<div class="p2">8小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
<div>
<img src="img\最新视频\8.jpg">
<div class="sj">03:50</div>
<div class="p">LPL夏季赛TES vs RA_01</div>
<div class="p1">2058次播放</div>
<div class="p2">1小时前</div>
<div class="ibox">
<i></i>
<a></a>
</div>
</div>
</div>
</div>
<div class="rbox">
<div class="text">
热门专辑
<ul>
<li>周一
<div class="dc"></div>
</li>
<li>周二
<div class="dc"></div>
</li>
<li>周三
<div class="dc"></div>
</li>
<li>周四
<div class="dc"></div>
</li>
<li>周五
<div class="dc"></div>
</li>
<li>周六
<div class="dc"></div>
</li>
<li>周日
<div class="dc"></div>
</li>
</ul>
</div>
<div class="mbox">
<div>
<img class="img" src="img\热门专辑\0.png">
<h4 class="p2">巅峰top5</h4>
<p class="p3">2020-09-18更新</p>
<div class="p">巅峰top5是一档精彩英雄联盟赛事集锦节目,</div>
<div class="p1"><img src="img\热门专辑\0.jpg">飞熊TV英雄联盟</div>
</div>
<div>
<img class="img" src="img\热门专辑\0 (1).jpg">
<h4 class="p2">小鱼TOP5</h4>
<p class="p3">2018-09-11更新</p>
<div class="p">汇集英雄联盟最顶级精彩操作视频。</div>
<div class="p1"><img src="img\热门专辑\0 (1).png">飞熊TV英雄联盟</div>
</div>
<div>
<img class="img" src="img\热门专辑\0 (2).jpg">
<h4 class="p2">鹌鹑云顶锦囊</h4>
<p class="p3">2020-09-09更新</p>
<div class="p">7连鸡，吃鸡霸主，云顶吃鸡小王子的吃鸡秘</div>
<div class="p1"><img src="img\热门专辑\0.webp">东北大鹌鹑</div>
</div>
</div>
<a class="more-hotprogram">
前往视频中心
<i class="more-arrow-2"></i>
</a>
</div>
</div>
</div>
<!-- 赛事中心 -->
<div id="sszx-bg">
<div id="sszx">
<div class="text">
赛事中心
<ul>
<li>春季赛常规赛
<div class="dc"></div>
</li>
<li>春季赛季后赛
<div class="dc"></div>
</li>
<li>夏季赛常规赛
<div class="dc"></div>
</li>
<a class="toptip-event">
2022LPL夏季赛
</a>
<a class="herf-more">更多
<i class="ijt"></i>
</a>
</ul>
</div>
<div class="bbox">
<ul class="u1">
<li>
<p class="gamelist-item-topbar over">
<i></i>
<span class="span1">已结束</span>
<span class="span3">19:00</span>
<span class="span2">3-20</span>
</p>
<div class="gamelist-team-a">
<span>
<img src="img\赛事中心\0 (2).png">
</span>
<a>北京JDG英特尔</a>
</div>
<div class="gamelist-team-b">
<span>
<img src="img\赛事中心\0.png">
</span>
<a>WBG—汽奥迪</a>
</div>
<span class="gamelist-score">
<a>2</a>
<a>:</a>
<a>0</a>
</span>
<a class="gamelist-over">视频回顾</a>
<P class="p1">2022职业联赛</P>
<P class="p2">春季赛常规赛 第九场</P>
</li>
<li>
<p class="gamelist-item-topbar over">
<i></i>
<span class="span1">已结束</span>
<span class="span3">19:00</span>
<span class="span2">3-20</span>
</p>
<div class="gamelist-team-a">
<span>
<img src="img\赛事中心\0 (1).png">
</span>
<a>深圳V5</a>
</div>
<div class="gamelist-team-b">
<span>
<img src="img\赛事中心\0 (3).png">
</span>
<a>AL</a>
</div>
<span class="gamelist-score">
<a>2</a>
<a>:</a>
<a>0</a>
</span>
<a class="gamelist-over">视频回顾</a>
<P class="p1">2022职业联赛</P>
<P class="p2">春季赛常规赛 第九周 BO3</P>
</li>
<li>
<p class="gamelist-item-topbar over">
<i></i>
<span class="span1">已结束</span>
<span class="span3">19:00</span>
<span class="span2">3-23</span>
</p>
<div class="gamelist-team-a">
<span>
<img src="img\赛事中心\0 (4).png">
</span>
<a>FPX</a>
</div>
<div class="gamelist-team-b">
<span>
<img src="img\赛事中心\0 (5).png">
</span>
<a>OMG</a>
</div>
<span class="gamelist-score">
<a>2</a>
<a>:</a>
<a>0</a>
</span>
<a class="gamelist-over">视频回顾</a>
<P class="p1">2022职业联赛</P>
<P class="p2">春季赛常规赛 第九周 BO3</P>
</li>
<li>
<p class="gamelist-item-topbar over">
<i></i>
<span class="span1">已结束</span>
<span class="span3">19:00</span>
<span class="span2">3-24</span>
</p>
<div class="gamelist-team-a">
<span>
<img src="img\赛事中心\0 (6).png">
</span>
<a>苏州LNG</a>
</div>
<div class="gamelist-team-b">
<span>
<img src="img\赛事中心\0 (7).png">
</span>
<a>OMG</a>
</div>
<span class="gamelist-score">
<a>2</a>
<a>:</a>
<a>0</a>
</span>
<a class="gamelist-over">视频回顾</a>
<P class="p1">2022职业联赛</P>
<P class="p2">春季赛常规赛 第九周 BO3</P>
</li>
<li>
<p class="gamelist-item-topbar over">
<i></i>
<span class="span1">已结束</span>
<span class="span3">19:00</span>
<span class="span2">3-25</span>
</p>
<div class="gamelist-team-a">
<span>
<img src="img\赛事中心\0 (8).png">
</span>
<a>OMG</a>
</div>
<div class="gamelist-team-b">
<span>
<img src="img\赛事中心\0 (9).png">
</span>
<a>RNG</a>
</div>
<span class="gamelist-score">
<a>2</a>
<a>:</a>
<a>0</a>
</span>
<a class="gamelist-over">视频回顾</a>
<P class="p1">2022职业联赛</P>
<P class="p2">春季赛常规赛 第十周 BO3</P>
</li>
<i class="icon-left-arrow"></i>
<i class="icon-right-arrow"></i>
</ul>
<div class="lbox">
<div class="top">
<h2>每周最佳阵容</h2>
</div>
<ul class="u2">
<li>
<img src="img\最佳阵容\Snipaste_2022-07-21_11-08-31.png">
</li>
<li>
<img src="img\最佳阵容\Snipaste_2022-07-21_11-09-13.png">
</li>
<li>
<img src="img\最佳阵容\Snipaste_2022-07-21_11-09-24.png">
</li>
<li>
<img src="img\最佳阵容\Snipaste_2022-07-21_11-09-40.png">
</li>
<li>
<img src="img\最佳阵容\Snipaste_2022-07-21_11-10-07.png">
</li>
</ul>
</div>
<div class="rbox">
<div class="top">
<h2>积分榜</h2>
</div>
<div class="d1">
<div class="box1">
<p class="a1">排名</p>
<p class="a2">俱乐部</p>
<p class="a3">胜负</p>
<p class="a4">积分</p>
</div>
<ul>
<li>
<p class="p1">1</p>
<p class="p2">
<img src="img\俱乐部\0 (10).png">TES
</p>
<p class="p3">10/1</p>
<p class="p4">10</p>
</li>
<li>
<p class="p1">2</p>
<p class="p2">
<img src="img\俱乐部\0.png">北京JDG英特尔
</p>
<p class="p3">10/1</p>
<p class="p4">10</p>
</li>
<li>
<p class="p1">3</p>
<p class="p2">
<img src="img\俱乐部\0 (1).png">深圳V5
</p>
<p class="p3">10/1</p>
<p class="p4">10</p>
</li>
<li>
<p class="p1">4</p>
<p class="p2">
<img src="img\俱乐部\0 (2).png">RNG
</p>
<p class="p3">7/1</p>
<p class="p4">7</p>
</li>
<li>
<p class="p1">5</p>
<p class="p2">
<img src="img\俱乐部\0 (3).png">AL
</p>
<p class="p3">7/2</p>
<p class="p4">7</p>
</li>
<li>
<p class="p1">6</p>
<p class="p2">
<img src="img\俱乐部\0 (4).png">EDG
</p>
<p class="p3">6/4</p>
<p class="p4">6</p>
</li>
<li>
<p class="p1">7</p>
<p class="p2">
<img src="img\俱乐部\0 (5).png">WBG—汽奥迪
</p>
<p class="p3">6/4</p>
<p class="p4">6</p>
</li>
<li>
<p class="p1">8</p>
<p class="p2">
<img src="img\俱乐部\0 (6).png">苏州LNG
</p>
<p class="p3">6/5</p>
<p class="p4">6</p>
</li>
<li>
<p class="p1">9</p>
<p class="p2">
<img src="img\俱乐部\0 (7).png">OMG
</p>
<p class="p3">4/5</p>
<p class="p4">4</p>
</li>
<li>
<p class="p1">10</p>
<p class="p2">
<img src="img\俱乐部\0 (8).png">TT
</p>
<p class="p3">4/5</p>
<p class="p4">4</p>
</li>
<li>
<p class="p1">11</p>
<p class="p2">
<img src="img\俱乐部\0 (9).png">FPX
</p>
<p class="p3">4/6</p>
<p class="p4">4</p>
</li>
<li>
<p class="p1">12</p>
<p class="p2">
<img src="img\俱乐部\0 (11).png">BLG平安银行
</p>
<p class="p3">4/7</p>
<p class="p4">4</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 英雄资料 -->
<div id="yxzl-bg">
<div>
<div id="yxzl">
<div class="text">英雄资料
<ul>
<li>所有英雄</li>
<li>战士</li>
<li>法师</li>
<li>刺客</li>
<li>坦克</li>
<li>射手</li>
<li>辅助</li>
</ul>
<div class="r">资料库<i class="ijt"></i></div>
</div>
<div class="bbox">
<div>
<img src="img\英雄图标\images\Annie.png">
<p>黑暗之女</p>
</div>
<div>
<img src="img\英雄图标\images\崔斯特.png">
<p>卡牌大师</p>
</div>
<div>
<img src="img\英雄图标\images\Aatrox.png">
<p>暗裔剑魔</p>
</div>
<div>
<img src="img\英雄图标\images\Ahri.png">
<p>九尾妖狐</p>
</div>
<div>
<img src="img\英雄图标\images\Akali.png">
<p>离群之刺</p>
</div>
<div>
<img src="img\英雄图标\images\Amumu.png">
<p>觞之木乃伊</p>
</div>
<div>
<img src="img\英雄图标\images\Anivia.png">
<p>冰晶凤凰</p>
</div>
<div>
<img src="img\英雄图标\images\Aphelios.png">
<p>残月之肃</p>
</div>
<div>
<img src="img\英雄图标\images\Ashe.png">
<p>寒冰射手</p>
</div>
<div>
<img src="img\英雄图标\images\AurelionSol.png">
<p>铸星龙王</p>
</div>
<div>
<img src="img\英雄图标\images\Azir.png">
<p>沙漠皇帝</p>
</div>
<div>
<img src="img\英雄图标\images\Bard.png">
<p>星界游神</p>
</div>
<div>
<img src="img\英雄图标\images\Belveth.png">
<p>虚空女皇</p>
</div>
<div>
<img src="img\英雄图标\images\Blitzcrank.png">
<p>蒸汽机器人</p>
</div>
<div>
<img src="img\英雄图标\images\Brand.png">
<p>复仇焰魂</p>
</div>
<div>
<img src="img\英雄图标\images\Braum.png">
<p>弗雷尔卓德之心</p>
</div>
<div>
<img src="img\英雄图标\images\Caitlyn.png">
<p>皮城女警</p>
</div>
<div>
<img src="img\英雄图标\images\Camille.png">
<p>青钢影</p>
</div>
<div>
<img src="img\英雄图标\images\Cassiopeia.png">
<p>魔蛇之拥</p>
</div>
<div>
<img src="img\英雄图标\images\Chogath.png">
<p>虚空恐惧</p>
</div>
<div>
<img src="img\英雄图标\images\Corki.png">
<p>英勇投弹手</p>
</div>
<div>
<img src="img\英雄图标\images\Darius.png">
<p>诺克萨斯之手</p>
</div>
<div>
<img src="img\英雄图标\images\Diana.png">
<p>皎月女神</p>
</div>
<div>
<img src="img\英雄图标\images\Draven.png">
<p>荣耀执法官</p>
</div>
<div>
<img src="img\英雄图标\images\DrMundo.png">
<p>祖安狂人</p>
</div>
<div>
<img src="img\英雄图标\images\Ekko.png">
<p>时间刺客</p>
</div>
<div>
<img src="img\英雄图标\images\Elise.png">
<p>蜘蛛女皇</p>
</div>
<div>
<img src="img\英雄图标\images\Evelynn.png">
<p>寡妇制造者</p>
</div>
<div>
<img src="img\英雄图标\images\Ezreal.png">
<p>探险家</p>
</div>
<div>
<img src="img\英雄图标\images\FiddleSticks.png">
<p>远古恐惧</p>
</div>
<div>
<img src="img\英雄图标\images\Fiora.png">
<p>无双剑姬</p>
</div>
<div>
<img src="img\英雄图标\images\Fizz.png">
<p>潮汐海灵</p>
</div>
<div>
<img src="img\英雄图标\images\Galio.png">
<p>正义石像</p>
</div>
<div>
<img src="img\英雄图标\images\Gangplank.png">
<p>海洋之灾</p>
</div>
<div>
<img src="img\英雄图标\images\Garen.png">
<p>德玛西亚之力</p>
</div>
<div>
<img src="img\英雄图标\images\Gwen.png">
<p>灵罗娃娃</p>
</div>
<div>
<img src="img\英雄图标\images\Hecarim.png">
<p>战争之影</p>
</div>
<div>
<img src="img\英雄图标\images\Heimerdinger.png">
<p>大发明家</p>
</div>
<div>
<img src="img\英雄图标\images\Illaoi.png">
<p>海兽祭祀</p>
</div>
<div>
<img src="img\英雄图标\images\Irelia.png">
<p>刀锋舞者</p>
</div>
<div>
<img src="img\英雄图标\images\Ivern.png">
<p>翠神</p>
</div>
<div>
<img src="img\英雄图标\images\Janna.png">
<p>风暴之怒</p>
</div>
<div>
<img src="img\英雄图标\images\JarvanIV.png">
<p>嘉文四世</p>
</div><div>
<img src="img\英雄图标\images\Jax.png">
<p>武器大师</p>
</div><div>
<img src="img\英雄图标\images\Jayce.png">
<p>未来守护者</p>
</div><div>
<img src="img\英雄图标\images\Jhin.png">
<p>戏命师</p>
</div><div>
<img src="img\英雄图标\images\Kaisa.png">
<p>虚空之女</p>
</div><div>
<img src="img\英雄图标\images\Kalista.png">
<p>复仇之矛</p>
</div><div>
<img src="img\英雄图标\images\Kassadin.png">
<p>虚空行者</p>
</div><div>
<img src="img\英雄图标\images\Karma.png">
<p>天启者</p>
</div><div>
<img src="img\英雄图标\images\Karthus.png">
<p死亡歌颂者</p>
</div><div>
<img src="img\英雄图标\images\Katarina.png">
<p>不祥之刃</p>
</div><div>
<img src="img\英雄图标\images\Kayle.png">
<p>审判天使</p>
</div><div>
<img src="img\英雄图标\images\Kayn.png">
<p>影流之镰</p>
</div><div>
<img src="img\英雄图标\images\Kennen.png">
<p>狂暴之心</p>
</div><div>
<img src="img\英雄图标\images\Khazix.png">
<p>虚空掠夺者</p>
</div><div>
<img src="img\英雄图标\images\Kindred.png">
<p>永猎双子</p>
</div><div>
<img src="img\英雄图标\images\Kled.png">
<p>暴怒战士</p>
</div><div>
<img src="img\英雄图标\images\KogMaw.png">
<p>深渊巨口</p>
</div>
</div>
</div>
</div>
</div>
<!-- 创作馆 -->
<div id="czg-bg">
<div id="czg">
<div class="lbox">
<div class="text">FANART创作馆<p class="r">更多<i class="ijt"></i></p></div>
<div class="bbox">
<div>
<img src="img\创作馆\258 (3).jpg">
</div>
<div>
<img src="img\创作馆\258.jpg">
</div>
<div>
<img src="img\创作馆\258 (1).jpg">
</div>
<div>
<img src="img\创作馆\258 (2).jpg">
</div>
<div>
<img src="img\创作馆\258 (4).jpg">
</div>
<div>
<img src="img\创作馆\258 (5).jpg">
</div>
<div>
<img src="img\创作馆\258 (6).jpg">
</div>
<div>
<img src="img\创作馆\258 (7).jpg">
</div>
</div>
</div>
<div class="rbox">
<div class="md">
<img src="img\创作馆\0.png">
<span class="p1">
<i class="inline-icon-1"></i>
精品专栏
<i class="inline-icon-1"></i>
</span>
</div>
<ul>
<li>
<img src="img\创作馆\href-bg-2.webp">
<span class="p2">
<i class="inline-icon-1"></i>
英雄联盟用户调查
</span>
</li>
<li>
<img src="img\创作馆\href-bg-3.webp">
<span class="p2">
<i class="inline-icon-1"></i>
见证版本历史
</span>
</li>
<li>
<img src="img\创作馆\href-bg-4.webp">
<span class="p2">
<i class="inline-icon-1"></i>
年度品牌展示
</span>
</li>
<li>
<img src="img\创作馆\Snipaste_2022-07-22_14-52-46.png">
</li>
</ul>
</div>
</div>
</div>
<div id="db-bg">
<div id="db">
<div class="lbox">
<div class="foot_ieg_logo"></div>
<div class="logo-riot"></div>
</div>
<ul>
<li><span>腾讯互动娱乐</span>|
<span>服务条例</span>|
<span>隐私保护指引</span>|
<span>儿童隐私保护指引</span>|
<span>腾讯游戏招聘</span>|
<span>腾讯游戏客服</span>|
<span>游戏列表</span>|
<span>广告服务及商务合作</span>
</li>
<li>
<span>腾讯公版权所有</span>
<span>网络游戏行业防沉迷自律公约</span>
</li>
<li>
COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.
</li>
<li>
COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.
</li>
<li>本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。</li>
<li>
<img src="img\底部\gswj.png">
<span>工商网电子标识</span>|
<span>粤网文[2022]3396-195号</span>|
<span>(署)网出证(粤)字第054号</span>
</li>
<li>
<span>批准文号：新出审字[2011]310号 </span>|
<span>文网进字[2011] 004号 </span>|
<span> 出版物号：ISBN 978-7-89989-145-2</span>|
<span>全国文化市场统一举报电话：12318 </span>
</li>
</ul>
</div>
</div>
<div class="cbl">
<ul>
<li class="rn-rmhd">
<span>
<i></i>
</span>
<p>热门活动</p>
</li>
<li class="rn-spzx">
<span><i></i></span>
<p>视频中心</p>
</li>
<li class="rn-sszx">
<span><i></i></span>
<p>赛事中心</p>
</li>
<li class="rn-yxtj">
<span><i></i></span>
<p>英雄资料</p>
</li>
<li class="rn-fanart">
<span><i></i></span>
<p>FANART</p>
</li>
<li class="rn-polo">
<span>
<i></i>
<img src="img\底部\polo.gif">
</span>
<p>顶部</p>
</li>
</ul>
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: rgb(238, 238, 238);
}
a{
text-decoration: none;
}
li{
list-style: none;
}
#all-bg{
width: 100%;
height: auto;
overflow: hidden;
}
#head-bg{
width: 100%;
height: 78px;
overflow: visible;
position:absolute;
top:0;
left: 0;
z-index: 11;
}
#head-bg .bg{
width: 100%;
height: 78px;
overflow: visible;
position:relative;
top:0;
left: 0;
z-index: 11;
}
#head-bg .head{
width: 100%;
max-width: 1358px;
min-width: 1230px;
height: 78px;
margin: auto;
z-index: 10;
}
#head-bg .head>img{
float: left;
margin-top: 10px;
width: 167px;
height: 60px;
cursor: pointer;
}
#head-bg .head>ul{
float: left;
width: 55%;
height: 78px;
box-sizing: border-box;
padding-top: 16px;
}
#head-bg .head>ul>.xll{
position: absolute;
width: 100%;
left: 0px;
top: 0;
height:400px;
visibility: hidden;
background-color: rgb(0,0,0,0.6);
height: 352px;
opacity: 0;
transition: all 0.1s linear 0.5s;
}
#head-bg .head>ul>.xll>.text{
width: 100%;
max-width: 1358px;
min-width: 1230px;
height: auto;
margin: auto;
padding: 88px 0px 32px;
}
#head-bg .head>ul>.xll>.text>ul{
width: 55%;
margin-left: 161px;
}
#head-bg .head>ul>.xll>.text>ul>li{
width: 20%;
float: left;
height: auto;
}
#head-bg .head>ul>.xll>.text>ul>li>a{
display: block;
width: 100%;
height: 29px;
overflow: visible;
line-height: 29px;
color: #e1e1e1;
font-size: 14px;
text-align: center;
position: relative;
}
#head-bg .head>ul>.xll>.text>ul>li>a:hover{
color: #e9c06c;
}
#head-bg .head>ul:hover .xll{
visibility: visible;
opacity: 1;
}
#head-bg .head .wj{
float: right;
width: 244px;
height: 78px;
position: relative;
z-index: 3;
}
/* 定义精灵图 */
#head-bg .head .wj .tx{
float: left;
position: relative;
margin-top: 14px;
line-height: 48px;
text-align: center;
width: 48px;
height: 48px;
}
#head-bg .head .wj .tx>img{
width: 36px;
height: 36px;
border-radius: 50%;
vertical-align: middle;
}
/* 精灵图 */
#head-bg .head .wj span,
#head-bg .head>.zm span,
#head-bg .head>.sousuo span,
#head-bg .head>ul>.xll>.text>ul>li>a>.icon,
#head-bg .head>ul>.xll>.text>ul>li>a>.icon1,
#big-img-bg .ckxq{
background-image: url('img/头部图/精灵图.png');
background-size: 405px 178px;
background-repeat: no-repeat;
}
#head-bg .head .wj span{
display: block;
background-position: -216px -117px;
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 0;
}
#head-bg .head>.zm span{
display: block;
background-position: -303px -84px;
width: 16px;
height: 24px;
margin: 7px auto 0;
cursor: pointer;
}
#head-bg .head>.sousuo span{
display: block;
background-position: -381px -39px;
width: 21px;
height: 21px;
margin: 8.5px auto 0;
cursor: pointer;
}
#head-bg .head>ul>.xll>.text>ul>li>a>.icon{
display: inline-block;
background-position: -381px -65px;
width: 14px;
height: 14px;
margin-right: 5px;
vertical-align: middle;
}
#head-bg .head>ul>.xll>.text>ul>li>a>.icon1{
display: inline-block;
background-position: -347px -84px;
width: 14px;
height: 14px;
margin-right: 5px;
vertical-align: middle;
}
#head-bg .head .wj .wz{
float: left;
width: 176px;
height: 78px;
margin-left: 10px;
}
/* 掌盟 */
#head-bg .head>.zm{
float: right;
width: 40px;
height: 40px;
margin: 17px 31px 0 0;
text-align: center;
}
#head-bg .head>.sousuo{
float: right;
width: 40px;
height: 40px;
margin: 17px 12px 0 0;
text-align: center;
}
#head-bg .head .wj p{
color: #fefefe;
font-size: 16px;
line-height: 78px;
}
#head-bg .head .wj p a{
color: #fff3d0;
text-decoration: none;
}
#head-bg .head ul>li{
float: left;
list-style: none;
width: 20%;
height: 78px;
text-align: center;
cursor: pointer;
}
#head-bg .head ul>li .span1{
display: block;
color: #fff;
font-size: 18px;
/* 字母间距 */
letter-spacing: 1px;
}
#head-bg .head ul>li .span2{
display: block;
color: #aeaeae;
font-size: 11px;
margin-top: -1px;
/* 字母间距 */
letter-spacing: 1px;
}
#big-img-bg{
width: 100%;
min-width: 1230px;
height: 360px;
overflow: hidden;
position: relative;
}
/* 查看详情 */
#big-img-bg .ckxq{
width: 160px;
height: 40px;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -77px;
bottom: 32px;
background-position: -216px -39px;
cursor: pointer;
}
#big-img-bg .big-img{
position: absolute;
left: 50%;
top: 0;
width: 1920px;
height: 100%;
margin-left: -960px;
}
#big-img-bg .yy{
width: 100%;
height: 131px;
position: absolute;
left: 0;
top: 0;
background-image: url('img/头部图/阴影.png');
z-index: 1;
}
#big-img-bg .bbxq{
position: absolute;
display: flex;
z-index: 2;
right: 0;
bottom: 28px;
font-size: 14px;
color: #888787;
}
#big-img-bg .box{
width: auto;
max-width: 1358px;
min-width: 1230px;
height: 100%;
position: relative;
margin: auto;
}
#big-img-bg .box em{
color: #ffd185;
font-size: 14px;
font-family: "微软雅黑";
margin-right: 10px;
}
#big-img-bg .bbxq>.ckxqt{
padding: 0 15px;
height: 22px;
border: 1px solid #f5d185;
text-align: center;
line-height: 22px;
background-color: rgb(0,0,0,0.65);
font-size:12px;
color: #f5d185;
}
#big-img-bg .bbxq>.ckxqt:hover{
background-color: rgb(0,0,0);
}
#lbt-bg{
width: 1358px;
min-height: 1071px;
padding: 40px 0 80px 0;
margin: auto;
background-color: rgb(238, 238, 238);
}
#lbt-bg .lbtbox{
width: 100%;
height: 380px;
display: flex;
/* flex-wrap: wrap; */
justify-content: space-between;
}
#lbt-bg .lbtbox>.lbox{
width: 820px;
height: 380px;
}
#lbt-bg .lbtbox>.lbox>.lbt{
width: 820px;
height: 340px;
overflow: hidden;
}
#lbt-bg .lbtbox>.lbox>.lbt>ul{
width: 4100px;
height: 340px;
display: flex;
animation: lbt 10s infinite;
}
#lbt-bg .lbtbox>.lbox>.lbt>ul>li{
width: 820px;
height: 340px;
}
#lbt-bg .lbtbox>.lbox>.lbt>ul>li>img{
width: 100%;
height: 100%;
}
@keyframes lbt{
0%,19%{
margin-left: 0;
}
20%,39%{
margin-left: -820px;
}
40%,59%{
margin-left: -1640px;
}
60%,79%{
margin-left: -2460px;
}
80%,99%{
margin-left: -3280px;
}
}
#lbt-bg .lbtbox>.lbox>.lbt>.bott{
width: 820px;
height: 40px;
display: flex;
}
#lbt-bg .lbtbox>.lbox>.lb{
width: 820px;
height: 40px;
display: flex;
}
#lbt-bg .lbtbox>.lbox>.lb>.dg{
width: 164px;
height: 40px;
color: #424242;
font-size: 14px;
line-height: 40px;
text-align: center;
font-family: "微软雅黑 sans-serif";
background-color: #e3e2e2;
flex: 1;
}
#lbt-bg .lbtbox>.lbox>.lb>.dg:hover{
color: #ab8e66;
font-size: 14px;
background-color: #f7f6f6;
border-bottom: 2px #cea861 solid;
height: 38px;
}
#lbt-bg .lbtbox>.lbox>.lbt>.bott>span{
height: 40px;
background-color: #e3e2e2;
font-size: 14px;
text-align: center;
line-height: 40px;
color: #424242;
letter-spacing: 1px;
}
#lbt-bg .lbtbox>.rbox{
position: relative;
width: 496px;
height: 380px;
}
#lbt-bg .lbtbox>.rbox>.lb{
width: 496px;
height: 35px;
display: flex;
position: relative;
overflow: visible;
}
#lbt-bg .lbtbox>.rbox>.lb>li{
width: auto;
min-width: 40px;
height: 37px;
line-height: 24px;
/* font-weight: 700; */
text-align: center;
color: #676767;
font-size: 18px;
margin-right: 74px;
letter-spacing: 1px;
font-family: "tahoma";
box-sizing: border-box;
}
.dc{
visibility: hidden;
width: 100%;
height: 7px;
margin-top: 6px;
background-image: url('img/轮播图/底部.png');
background-position: center center;
box-sizing: border-box;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u{
visibility: hidden;
width: 496px;
height: 305px;
position: absolute;
top: 100%;
left: 0;
background-color: rgb(238, 238, 238);
}
#lbt-bg .lbtbox>.rbox>.lb>li:nth-child(1)>.u{
visibility: visible;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li{
display: flex;
width: 496px;
height: 40px;
padding: 0 12px;
font-size: 22px;
font-weight: 700;
text-align: center;
line-height: 39px;
overflow: hidden;
text-align: left;
border-top: 1px #e0e2e2 solid;
cursor: pointer;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.bq{
color: #e9852d;
border: 1px #e9852d solid;
width: 36px;
height: 18px;
display: inline-block;
line-height: 18px;
text-align: center;
font-size: 12px;
font-weight: 500;
margin-top: 10.5px;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.bqlv{
color: #4ba36a;
border: 1px #4ba36a solid;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.bqtu{
color: #bb9a6c;
border: 1px #bb9a6c solid;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.bqlan{
color: #1da6ba;
border: 1px #1da6ba solid;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.t{
display: inline-block;
width: 370px;
height: 39px;
overflow: hidden;
margin-left: 20px;
color: #424242;
font-size: 14px;
letter-spacing: 1px;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li>.r{
width: 50px;
height: 39px;
text-align: right;
font-size: 14px;
letter-spacing: 1px;
color: #9d9d9d;
margin-left: 18px;
font-weight: 500;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li:nth-child(1){
background-image: url(img/轮播图/精灵图.png);
background-size: 638px 572px;
background-repeat: no-repeat;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li:nth-child(1){
display: block;
width: 472px;
height: 59px;
padding: 0 12px;
font-size: 22px;
font-weight: 700;
text-align: center;
line-height: 59px;
color: #0da0b4;
background-position: 0 -458px;
}
#lbt-bg .lbtbox>.rbox>.lb>li>.u>li:nth-child(1):hover{
color: #bb9a6c;
}
#lbt-bg .lbtbox>.rbox>.lb>li:hover{
color: #1da6ba;
font-weight: 700;
}
#lbt-bg .lbtbox>.rbox>.lb>li:hover .dc{
visibility: visible;
}
#lbt-bg .lbtbox>.rbox>.lb>li:hover .u{
visibility: visible;
}
#lbt-bg .lbtbox>.rbox>.lb>li:nth-child(5){
margin-right: 0;
}
#lbt-bg .lbtbox>.rbox>.bbox{
width: 496px;
height: 40px;
background: #e3e2e2;
font-size: 12px;
position: absolute;
bottom: 0;
left: 12px;
text-align: center;
line-height: 40px;
}
#lbt-bg .lbtbox>.rbox>.bbox>.span1{
color: #676767;
font-size: 14px;
}
#lbt-bg .lbtbox>.rbox>.bbox>.span2{
color:#7ea1a6;
font-size: 14px;
}
.ijt,
.inew,
.hover-border-1,
.icon-kh,
.icon-wjsq,
.icon-fhcx,
.icon-yxzl,
.icon-xgzd,
.icon-tft,
.icon-101,
.icon-yz,
.icon-wxbd,
.more-arrow-1,
.icon-hyp,
.more-arrow-2,
.rn-rmhd i,
.rn-spzx i,
.rn-sszx i,
.rn-yxtj i,
.rn-fanart i,
.rn-polo i{
background-image: url(img/精灵图/comm-spr.png);
background-size: 393px 200px;
background-repeat: no-repeat;
}
.more-arrow-2 {
position: relative;
display: inline-block;
background-position: -362px -99px;
width: 15px;
height: 9px;
}
@keyframes more-arrow-2{
0%{
left: 0;
}
50%{
left: 5px;
}
65%{
left: 2.5px;
}
80%{
left: 5px;
}
100%{
left: 0px;
}
}
.icon-hyp {
display: inline-block;
background-position: -369px -46px;
width: 13px;
height: 12px;
}
.icon-wxbd {
background-position: -193px -46px;
width: 22px;
height: 21px;
}
.icon-yz {
background-position: -274px -46px;
width: 22px;
height: 19px;
}
.icon-101 {
background-position: -371px -12px;
width: 22px;
height: 19px;
}
.icon-tft {
background-position: -280px -125px;
width: 22px;
height: 19px;
}
.icon-xgzd {
background-position: -193px -72px;
width: 21px;
height: 22px;
}
.icon-yxzl {
background-position: -343px -12px;
width: 23px;
height: 19px;
}
.icon-fhcx {
background-position: -219px -72px;
width: 20px;
height: 22px;
}
.ijt{
position: relative;
display: inline-block;
vertical-align: middle;
background-position: -213px -126px;
width: 15px;
height: 9px;
}
.inew{
background-position: -301px -46px;
width: 29px;
height: 14px;
}
.hover-border-1{
background-position: 0 0;
width: 188px;
height: 200px;
}
.icon-kh, .icon-wjsq {
margin-top: -4px;
}
.icon-101, .icon-666, .icon-ax, .icon-fhcx, .icon-kh, .icon-wjsq, .icon-wxbd, .icon-xgzd, .icon-yxzl, .icon-yz, .icon-tft {
display: inline-block;
vertical-align: middle;
*zoom: 1;
*display: inline;
margin: -2px 4px 0 4px;
}
.icon-kh{
background-position: -316px -12px;
width: 22px;
height: 20px;
}
#lbt-bg .lbtbox>.rbox>.bbox:hover .ijt{
animation: ijt 1s infinite;
}
@keyframes ijt{
0%{
left: 0;
}
50%{
left: 5px;
}
65%{
left: 2.5px;
}
80%{
left: 5px;
}
100%{
left: 0px;
}
}
#rmhd{
width: 1358px;
height: 335px;
margin-top: 50px;
display: flex;
justify-content: space-between;
}
#rmhd>.lbox{
width: 820px;
height: 335px;
position: relative;
}
#rmhd>.lbox>.text,
#zxsp .text,
#sszx .text,
#yxzl .text,
#czg .text{
display: flex;
position: relative;
width: 100%;
height: 35px;
color: #0b0b0b;
font-size: 24px;
justify-content: space-between;
}
#rmhd>.lbox>.text:before,
#zxsp .text:before,
#sszx .text:before,
#yxzl .text:before,
#czg .text:before{
position: absolute;
content: "\0020";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -10px;
top: 3.5px;
}
#rmhd>.lbox>.text>.u{
width: 692px;
height: 35px;
color: #000000;
font-size: 12px;
overflow: visible;
display: flex;
border-bottom: 1px #d6d7d8 solid;
}
#rmhd>.lbox>.text>.u>li{
width: 68px;
height: 35px;
margin-right: 40px;
color: #676767;
font-size: 16px;
line-height: 35px;
cursor: pointer;
}
#rmhd>.lbox>.text>.u>.r{
color: #7ea1a6;
font-size: 12px;
width: 44px;
height: 35px;
line-height: 35px;
flex: 1;
text-align: right;
}
#rmhd>.lbox>.text>.u>.chushi{
position: absolute;
top:60px;
left: 0;
width: 820px;
height: 278px;
display: flex;
justify-content: space-between;
}
#rmhd>.lbox>.text>.u>li>.chushi{
visibility: hidden;
position: absolute;
top:60px;
left: 0;
width: 820px;
height: 278px;
display: flex;
justify-content: space-between;
}
#rmhd>.lbox>.text>.u>li:hover .chushi{
visibility: visible;
}
#rmhd>.lbox>.text>.u>li:hover~.chushi{
visibility: hidden;
}
#rmhd>.lbox>.text>.u .chushi>div{
width: 193px;
height: 278px;
background-color: #fefefe;
position: relative;
cursor: pointer;
top: 0;
transition: all 0.1s linear;
}
#rmhd>.lbox>.text>.u li:hover .dc{
visibility: visible;
position: relative;
top: -10px;
}
#rmhd>.lbox>.text>.u .chushi>div:hover{
top:-8px;
}
#rmhd>.lbox>.text>.u .chushi>div>img{
width: 100%;
height: 207px;
}
#rmhd>.lbox>.text>.u .chushi>div>p{
display: block;
width: 100%;
box-sizing: border-box;
padding: 6px 10px 4px 10px;
font-size: 14px;
color: #424242;
line-height: 18px;
text-align: left;
position: absolute;
bottom: 40px;
}
#rmhd>.lbox>.text>.u .chushi>div>.inew{
position: absolute;
right: 10px;
bottom: 8px;
}
#rmhd>.lbox>.text>.u .chushi>div>.over{
position: absolute;
font-size: 12px;
color: #1da6ba;
left: 10px;
bottom: 6px;
line-height: 16px;
}
#rmhd>.lbox>.text>.u .chushi>div>.hover{
visibility: hidden;
width: 100%;
height: 207px;
position: absolute;
top: 0;
left: 0;
background-color: rgb(0,0,0,0.6);
}
#rmhd>.lbox>.text>.u .chushi>div>.hover>.hover-border-1{
vertical-align: middle;
display: table-cell;
text-align: center;
}
#rmhd>.lbox>.text>.u .chushi>div>.hover>.hover-border-1>.p1{
font-size: 16px;
font-weight: 400;
color: #cdbe91;
}
#rmhd>.lbox>.text>.u .chushi>div>.hover>.hover-border-1>.p2{
font-size: 12px;
color: #9d9c9c;
overflow: hidden;
}
#rmhd>.lbox>.text>.u .chushi>div:hover .hover{
visibility: visible;
}
#rmhd>.lbox>.text>.u .chushi>div:hover>p{
color: #1da6ba;
}
#rmhd>.lbox>.text>.u .r:hover{
color: rgb(29, 166, 186);
text-decoration: underline;
font-weight: 700;
}
#rmhd>.lbox>.text>.u .r:hover .ijt{
animation: ijt 1s infinite;
}
#rmhd>.rbox{
width: 496px;
height: 335px;
}
#rmhd>.rbox>ul{
width: 100%;
height: 100%;
/* display: flex;
flex-wrap: wrap; */
}
#rmhd>.rbox>ul>.video{
float: left;
width: 366px;
height: 168px;
transition: all 0.2s;
}
#rmhd>.rbox>ul>.video:hover{
-webkit-filter: brightness(1.15);
}
#rmhd>.rbox>ul>.p1{
float: left;
width: 118px;
height: 76px;
margin-left: 12px;
}
#rmhd>.rbox>ul>.p2{
float: left;
width: 118px;
height: 76px;
margin-left: 12px;
margin-top: 17px;
}
#rmhd>.rbox>ul>.p3{
position: relative;
float: left;
width: 112px;
height: 68px;
margin-right: 16px;
margin-top: 15px;
font-size: 8px;
text-align: center;
line-height: 68px;
background-color: #fefefe;
-webkit-transition: box-shadow .2s;
transition: box-shadow .2s;
color: #424242;
}
#rmhd>.rbox>ul>.p3:hover{
border-radius: 4px;
box-shadow: 0 0 10px #ccc;
color: #0da0b4;
}
#rmhd>.rbox .inew{
position: absolute;
left: 0;
}
#rmhd>.rbox>ul>.p4:hover{
border-radius: 4px;
box-shadow: 0 0 10px #ccc;
color: #0da0b4;
}
#rmhd>.rbox>ul>.p4{
float: left;
width: 112px;
height: 68px;
margin-top: 15px;
font-size: 8px;
color: #424242;
text-align: center;
line-height: 68px;
background-color: #fefefe;
-webkit-transition: box-shadow .2s;
transition: box-shadow .2s;
}
.btn-flashmen,
.week-free-a,
.inline-icon-0-left,
.inline-icon-0-right,
.border,
.inner-hover-href,
i,
#zxsp a,
.more-hotprogram,
.icon-left-arrow,
.icon-right-arrow,
#yxzl>.text>ul>li:before,
.inline-icon-1{
background-image: url(img/精灵图/index-spr.png);
background-size: 638px 572px;
background-repeat: no-repeat;
}
.btn-flashmen{
float: left;
background-position: -193px -316px;
width: 118px;
height: 76px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
line-height: 76px;
overflow: hidden;
position: relative;
}
#yxgx{
position: relative;
width: 1358px;
height: 254px;
margin-top: 51px;
display: flex;
justify-content: space-between;
}
#yxgx>.lbox{
width: 820px;
height: 254px;
display: flex;
justify-content: space-between;
}
#yxgx>.lbox>div{
width: 402px;
height: 254px;
}
#yxgx>.lbox>div:nth-child(1)>.hd{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 402px;
height: 254px;
background: url(img/dark70-bg-repeat.png) repeat;
z-index: 11;
}
#yxgx>.lbox>div:nth-child(1):hover .hd{
visibility: visible;
}
#yxgx>.lbox>div:nth-child(1)>.hd>.p1{
color: #cdbe91;
font-size: 18px;
position: absolute;
left: 27px;
top: 20px;
}
#yxgx>.lbox>div:nth-child(1):hover .border{
display: block;
position: absolute;
left: 3px;
top: 3px;
background-position: 0 0;
width: 396px;
height: 248px;
}
#yxgx>.lbox>div:nth-child(1)>.hd>.inner-hover-href{
position: absolute;
left: 25px;
bottom: 18px;
display: block;
background-position: -401px -179px;
width: 154px;
height: 42px;
color: #ffdb8b;
font-size: 14px;
text-align: center;
line-height: 42px;
transition: filter .5s;
filter: brightness(1);
}
#yxgx>.lbox>div:nth-child(1)>.hd>.inner-hover-href:hover {
filter: brightness(1.15);
}
#yxgx>.lbox>div>img{
width: 402px;
height: 254px;
}
#yxgx>.rbox{
width: 496px;
height: 255px;
}
.tip-gx{
position: absolute;
display: block;
left: 9px;
top: 9px;
width: auto;
height: 20px;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
text-align: center;
color: #cdbe91;
line-height: 19px;
background-color: #000;
}
.tip-gx1{
position: absolute;
display: block;
left: 427px;
top: 9px;
width: auto;
height: 20px;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
text-align: center;
color: #cdbe91;
line-height: 19px;
background-color: #000;
}
.text-yellow {
width: 100%;
padding: 0 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 33px;
font-size: 16px;
font-weight: 700;
color: #cdbe91;
}
.text-yellow1 {
width: 100%;
padding: 0 17px;
box-sizing: border-box;
position: absolute;
left: 418px;
bottom: 33px;
font-size: 16px;
font-weight: 700;
color: #cdbe91;
}
.text-white {
width: 100%;
padding-left: 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 12px;
font-size: 14px;
color: #cfcfcf;
}
.text-white1 {
width: 100%;
padding-left: 17px;
box-sizing: border-box;
position: absolute;
left: 418px;
bottom: 12px;
font-size: 14px;
color: #cfcfcf;
}
.pic-mask-0 {
position: absolute;
bottom: 0;
left: 0;
background: url(img/pic-mask-0.png) repeat;
width: 402px;
height: 133px;
}
.pic-mask-01 {
position: absolute;
bottom: 0;
left: 418px;
background: url(img/pic-mask-0.png) repeat;
width: 402px;
height: 133px;
}
#yxgx>.rbox>.box1{
position: relative;
float: left;
width: 240px;
height: 120px;
overflow: visible;
margin-bottom: 15px;
}
#yxgx>.rbox>.box2{
position: relative;
float: right;
width: 242px;
height: 180px;
overflow: visible;
}
#yxgx>.rbox>.box3{
position: relative;
float: left;
width: 240px;
height: 120px;
overflow: visible;
margin-bottom: 15px;
}
#yxgx>.rbox>.box4{
float: right;
width: 239px;
height: 58px;
position: relative;
margin-top: 17px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 58px;
}
#yxgx>.rbox>.box4>a{
display: block;
background-position: -193px -253px;
width: 239px;
height: 58px;
line-height: 58px;
text-align: center;
font-size: 16px;
color: #fff;
-webkit-transition: filter .5s;
transition: filter .5s;
filter: brightness(1);
-webkit-filter: brightness(1);
}
.week-free-a {
display: block;
background-position: -193px -253px;
width: 239px;
height: 58px;
line-height: 58px;
text-align: center;
font-size: 16px;
color: #fff;
-webkit-transition: filter .5s;
transition: filter .5s;
filter: brightness(1);
-webkit-filter: brightness(1);
}
.inline-icon-0-left {
background-position: -531px -226px;
width: 20px;
height: 9px;
}
.inline-icon-0-right {
background-position: -506px -226px;
width: 20px;
height: 9px;
}
.inline-icon-0-left, .inline-icon-0-right {
display: inline-block;
vertical-align: middle;
margin: -1px 12px 0 12px;
opacity: .7;
}
.more-arrow, .more-arrow-1, .more-arrow-2 {
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.more-arrow-1 {
background-position: -342px -99px;
width: 15px;
height: 9px;
}
#zxsp-bg{
padding: 64px 0 66px 0;
min-width: 1500px;
height: 463px;
background-color: rgb(227, 226, 226);
}
#zxsp{
display: flex;
justify-content: space-between;
margin: auto;
width: 1358px;
height: 463px;
}
#zxsp>.lbox>.text>ul{
width: 694px;
border-bottom: 1px #d6d7d8 solid;
}
#zxsp>.lbox>.text>ul>.gd{
float: right;
display: block;
height: 35px;
font-size: 12px;
color: #7ea1a6;
line-height: 35px;
margin-right: 2px;
margin-left: 20px;
cursor: pointer;
}
#zxsp>.lbox>.text>ul>.gd:hover{
font-weight: 700;
color: #1da6ba;
}
#zxsp>.lbox>.text>ul>li{
list-style: none;
position: relative;
cursor: pointer;
float: left;
width: auto;
min-width: 40px;
height: 37px;
overflow: visible;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
margin-right: 40px;
}
#zxsp>.lbox>.bbox{
width: 820px;
height: 402px;
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4,193px);
grid-template-rows: repeat(2,185px);
place-content: space-between;
}
#zxsp>.lbox>.bbox>div{
position: relative;
}
#zxsp>.lbox>.bbox>div>img{
width: 100%;
height: 107px;
}
#zxsp>.lbox>.bbox>div>.sj{
position: absolute;
right: 10px;
top: 85px;
color: #ffffff;
font-size: 12px;
}
#zxsp>.lbox>.bbox>div>.ibox{
visibility: hidden;
width: 54px;
height: 54px;
position: absolute;
left: 69.5px;
top: 26.5px;
}
#zxsp>.lbox>.bbox>div:hover .ibox{
visibility: visible;
}
#zxsp>.lbox>.bbox>div>.ibox>i{
display: block;
background-position: -437px -253px;
width: 54px;
height: 54px;
animation: zq 2s linear infinite;
}
@keyframes zq{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
#zxsp>.lbox>.bbox>div>.ibox>a{
position: relative;
display: block;
background-position: -456px -316px;
width: 11px;
height: 13px;
top:-33px;
right: -24px;
}
#zxsp>.lbox>.bbox>div>.p{
left: 0;
top: 118px;
width: 100%;
height: 42px;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 21px;
color: #424242;
}
#zxsp>.lbox>.bbox>div>.p1{
position: absolute;
left: 9px;
bottom: 4px;
font-size: 12px;
color: #919091;
}
#zxsp>.lbox>.bbox>div>.p2{
position: absolute;
right: 13px;
bottom: 4px;
font-size: 12px;
color: #919091;
}
#zxsp>.lbox>.text>ul>li>.inew{
position: absolute;
left: 100%;
top: 10px;
}
#zxsp>.lbox>.text>ul>li:hover{
font-weight: 700;
color: #1da6ba;
}
#zxsp>.lbox>.text>ul>.gd:hover .ijt{
animation: ijt 1s infinite;
}
#zxsp>.lbox>.text>ul>li>.dc{
position: absolute;
bottom: 0;
}
#zxsp>.lbox>.text>ul>li:hover .dc{
visibility: visible;
}
.lbox{
position: relative;
width: 820px;
height: 100%;
}
.rbox{
width: 496px;
height: 100%;
}
#zxsp>.rbox>.text>ul{
width: 367px;
height: 35px;
border-bottom: 1px #d6d7d8 solid;
}
#zxsp>.rbox>.text>ul>li{
width: 40px;
height: 37px;
margin-right: 14px;
list-style: none;
position: relative;
cursor: pointer;
float: left;
width: auto;
min-width: 40px;
height: 37px;
overflow: visible;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
}
#zxsp>.lbox>.bbox>div:hover .p{
color: #0da0b4;
}
#zxsp>.rbox>.text>ul>li:nth-child(7){
margin-right: 0;
}
#zxsp>.rbox>.text>ul>li:hover{
color: #1da6ba;
}
#zxsp>.rbox>.text>ul>li .dc{
position: absolute;
bottom: 0;
}
#zxsp>.rbox>.text>ul>li:hover .dc{
visibility: visible;
}
#zxsp>.rbox>.mbox{
width: 100%;
height: 337px;
margin-top: 32px;
display: flex;
justify-content: space-between;
}
#zxsp>.rbox>.mbox>div{
width: 156px;
height: 337px;
position: relative;
}
#zxsp>.rbox>.mbox>div>.img{
width: 156px;
height: 212px;
cursor: pointer;
}
#zxsp>.rbox>.mbox>div>.p{
font-size: 14px;
text-align: left;
color: #919091;
width: 100%;
height: 42px;
line-height: 21px;
overflow: hidden;
position: absolute;
left: 0;
top: 224px;
box-sizing: border-box;
padding: 0 7px;
cursor: pointer;
}
#zxsp>.rbox>.mbox>div>.p2{
font-size: 16px;
font-weight: 700;
text-align: center;
color: #fff;
width: 100%;
height: 30px;
line-height: 30px;
overflow: hidden;
position: absolute;
left: 0;
top: 140px;
}
#zxsp>.rbox>.mbox>div>.p3{
font-size: 12px;
text-align: center;
color: #fff;
width: 100%;
height: 36px;
line-height: 18px;
overflow: hidden;
position: absolute;
left: 0;
top: 169px;
box-sizing: border-box;
padding: 0 7px;
}
#zxsp>.rbox>.mbox>div>.p:hover{
color: #0da0b4;
}
#zxsp>.rbox>.mbox>div>.p1{
display: block;
width: 100%;
height: 30px;
line-height: 30px;
box-sizing: border-box;
padding-left: 4px;
color: #919091;
font-size: 12px;
position: absolute;
left: 0;
top: 280px;
cursor: pointer;
}
#zxsp>.rbox>.mbox>div>.p1:hover{
color: #0da0b4;
}
#zxsp>.rbox>.mbox>div>.p1>img{
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
margin: -2px 2px 0 0;
cursor: pointer;
}
.more-hotprogram {
display: block;
background-position: 0 -522px;
width: 506px;
height: 50px;
font-size: 16px;
color: #ab8e66;
text-align: center;
line-height: 50px;
margin-left: -5px;
transition: brightness .3s;
}
.more-hotprogram:hover {
filter: brightness(1.08);
}
.more-hotprogram:hover .more-arrow-2{
animation: more-arrow-2 1s infinite;;
}
#sszx-bg{
min-width: 1500px;
height: 610px;
padding: 64px 0 80px 0;
}
#sszx{
width: 1358px;
height: 610px;
margin: auto;
}
#sszx>.text>ul{
width: 1230px;
height: 35px;
position: absolute;
height: 35px;
left: 128px;
box-sizing: border-box;
border-bottom: 1px #e0e2e2 solid;
}
#sszx>.text>ul>li{
list-style: none;
position: relative;
cursor: pointer;
float: left;
width: auto;
min-width: 40px;
height: 37px;
overflow: visible;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
margin-right: 54px;
}
#sszx>.text>ul>li .dc{
position: absolute;
bottom: 0;
}
#sszx>.text>ul>li:hover .dc{
visibility: visible;
}
.herf-more {
position: absolute;
top: 0;
right: 2px;
display: block;
width: auto;
height: 35px;
font-size: 12px;
color: #7ea1a6;
line-height: 35px;
z-index: 1;
}
.herf-more:hover{
text-decoration: underline;
}
.herf-more:hover .ijt{
animation: ijt 1s infinite;
}
.toptip-event {
position: absolute;
top: 0;
right: 61px;
width: auto;
height: 35px;
line-height: 35px;
font-size: 16px;
font-weight: 700;
color: #676767;
}
.toptip-event:hover{
text-decoration: underline;
}
#sszx>.bbox{
width: 1358px;
height: 549px;
padding-top: 26px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sszx>.bbox>.u1{
position: relative;
width: 100%;
height: 198px;
display: flex;
justify-content: space-between;
}
#sszx>.bbox>.u1>li{
width: 259px;
height: 198px;
position: relative;
background-color: #fefefe;
}
.gamelist-item-topbar{
width: 100%;
height: 28px;
box-sizing: border-box;
font-size: 16px;
color: #fff;
line-height: 28px;
position: absolute;
left: 0;
top: 0;
background: -webkit-linear-gradient(left,#adadad,#c1c0c0);
}
.gamelist-item-topbar>i {
display: block;
background: url(//ossweb-img.qq.com/images/lol/v3/gamelist-top-ware.png) repeat-x 0 0;
width: 285px;
height: 28px;
position: absolute;
left: 0;
top: 0;
}
.gamelist-item-topbar>.span1 {
float: left;
font-weight: 700;
margin-left: 12px;
position: relative;
}
.gamelist-item-topbar>.span3 {
float: right;
margin-right: 12px;
position: relative;
}
.gamelist-item-topbar>.span2 {
float: right;
margin-right: 14px;
position: relative;
}
.gamelist-team-a, .gamelist-team-b {
position: absolute;
width: 85px;
height: 85px;
overflow: hidden;
text-align: center;
}
.gamelist-team-a>span>img, .gamelist-team-b>span>img {
display: inline-block;
vertical-align: middle;
max-width: 50px;
width: auto;
height: auto;
}
.gamelist-team-a{
left: 0;
top: 38px;
}
.gamelist-team-b{
right: 0;
top: 38px;
}
.gamelist-team-a>span, .gamelist-team-b>span {
display: block;
width: 85px;
height: 65px;
line-height: 65px;
text-align: center;
}
.gamelist-team-a>a, .gamelist-team-b>a {
color: #385155;
font-size: 12px;
line-height: 20px;
}
.gamelist-score {
display: block;
width: 86px;
height: 40px;
color: #171717;
font-weight: 700;
text-align: center;
line-height: 40px;
position: absolute;
top: 54px;
left: 50%;
font-size: 0;
margin-left: -43px;
}
.gamelist-score>a {
font-size: 34px;
margin: 0 2px;
}
.gamelist-over {
font-size: 8px;
display: block;
width: 86px;
height: 29px;
line-height: 29px;
text-align: center;
box-sizing: border-box;
border: 1px #727272 solid;
color: #727272;
margin: 105px auto 0 auto;
-webkit-transition: background-color .2s;
transition: background-color .2s;
}
#sszx>.bbox>ul>li>.p1, #sszx>.bbox>ul>li>.p2 {
width: 100%;
line-height: 1.5;
font-size: 12px;
text-align: center;
color: #727272;
}
#sszx>.bbox>ul>li>.p1 {
margin-top: 12px;
}
.gamelist-over:hover {
background-color: #727272;
color: #fff;
}
.icon-left-arrow {
background-position: -221px -397px;
width: 23px;
height: 51px;
position: absolute;
left: -30px;
bottom: 74px;
z-index: 1;
filter: brightness(1);
-webkit-filter: brightness(1);
-webkit-transition: filter .2s;
transition: filter .2s;
}
.icon-right-arrow {
background-position: -193px -397px;
width: 23px;
height: 51px;
position: absolute;
bottom: 74px;
right: -30px;
z-index: 1;
filter: brightness(1);
-webkit-filter: brightness(1);
-webkit-transition: filter .2s;
transition: filter .2s;
}
#sszx>.bbox>.lbox>.top{
width: 100%;
height: 35px;
}
#sszx>.bbox>.lbox{
margin-top: 38px;
}
#sszx>.bbox>.lbox>.top>h2{
font-size: 18px;
font-weight: bold;
color: #0b0b0b;
display: inline-block;
margin-top: 5px;
}
#sszx>.bbox>.lbox>.u2{
width: 100%;
height: 257px;
margin-top: 21px;
display: flex;
justify-content: space-between;
}
#sszx>.bbox>.lbox>.u2>li{
width: 151px;
height: 257px;
}
#sszx>.bbox>.lbox>.u2>li>img{
width: 100%;
height: 100%;
}
#sszx>.bbox>.rbox>.top{
width: 100%;
height: 35px;
}
#sszx>.bbox>.rbox{
margin-top: 38px;
}
#sszx>.bbox>.rbox>.top>h2{
font-size: 18px;
font-weight: bold;
color: #0b0b0b;
display: inline-block;
margin-top: 5px;
}
#sszx>.bbox>.rbox>.d1{
margin-top: 21px;
width: 496px;
height: 257px;
}
#sszx>.bbox>.rbox>.d1>.box1{
width: 460px;
padding: 0 18px;
height: 32px;
line-height: 32px;
color: #151517;
font-size: 16px;
font-weight: 400;
background-color: #e0e0e0;
}
#sszx>.bbox>.rbox>.d1>.box1>p{
float: left;
text-align: center;
}
#sszx>.bbox>.rbox>.d1>.box1>.a1{
width: 44px;
}
#sszx>.bbox>.rbox>.d1>.box1>.a2{
width: 124px;
margin-left: 69px;
text-align: left;
}
#sszx>.bbox>.rbox>.d1>.box1>.a3{
width: 100px;
text-align: center;
margin-left: 45px;
}
#sszx>.bbox>.rbox>.d1>.box1>.a4{
width: 44px;
float: right;
}
#sszx>.bbox>.rbox>.d1>ul{
width: 460px;
padding: 0 18px;
height: 225px;
overflow: auto;
background-color: rgb(254, 254, 254);
}
#sszx>.bbox>.rbox>.d1>ul::-webkit-scrollbar {
width: 10px;
height: 10px;
border-radius: 10px;
background-color: rgba(240, 240, 240, 0.1);
}
#sszx>.bbox>.rbox>.d1>ul::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
background-color: #abc0c3;
}
#sszx>.bbox>.rbox>.d1>ul>li{
width: 100%;
height: 45px;
border-bottom: 1px #e0e2e2 solid;
}
#sszx>.bbox>.rbox>.d1>ul>li>.p1{
float: left;
width: 44px;
height: 46px;
text-align: center;
font-size: 18px;
color: #7b7b7b;
line-height: 46px;
}
#sszx>.bbox>.rbox>.d1>ul>li>.p2{
float: left;
font-size: 13px;
width: 130px;
margin-left: 63px;
color: #151517;
line-height: 46px;
}
#sszx>.bbox>.rbox>.d1>ul>li>.p2>img{
display: inline-block;
vertical-align: middle;
width: 25px;
height: auto;
margin: -2px 12px 0 0;
}
#sszx>.bbox>.rbox>.d1>ul>li>.p3{
float: left;
font-size: 16px;
width: 100px;
margin-left: 45px;
color:#5f8d94;
text-align: center;
line-height: 46px;
}
#sszx>.bbox>.rbox>.d1>ul>li>.p4{
float: right;
width: 44px;
text-align: center;
font-size: 16px;
color: #5f8d94;
line-height: 46px;
}
#yxzl-bg{
min-width: 1500px;
background-color: rgb(227, 226, 226);
height: 494px;
padding: 66px;
}
#yxzl{
margin: auto;
width: 1358px;
height: 494px;
}
#yxzl>.text>ul{
position: absolute;
height: 35px;
left: 128px;
box-sizing: border-box;
}
#yxzl>.text>ul>li{
padding-left: 28px;
line-height: 42px;
margin-right: 40px;
list-style: none;
position: relative;
cursor: pointer;
float: left;
width: auto;
min-width: 40px;
height: 37px;
overflow: visible;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
}
#yxzl>.text>ul>li:before{
content: "";
position: absolute;
display: block;
top: 8px;
left: 2px;
margin-left: 0;
background-position: -406px -316px;
width: 20px;
height: 19px;
}
#yxzl>.text>ul>li:hover:before{
content: "";
position: absolute;
display: block;
top: 8px;
left: 2px;
margin-left: 0;
background-position: -431px -316px;
width: 20px;
height: 19px;
}
#yxzl>.text>ul>li:hover{
font-weight: 700;
color: #1da6ba;
}
#yxzl>.text>.r{
font-size: 12px;
float: right;
width: 56px;
height: 35px;
color: #7ea1a6;
position: absolute;
top: 0px;
right: 2px;
display: block;
width: auto;
line-height: 35px;
}
#yxzl>.text>.r:hover{
font-weight: 700;
color: #1da6ba;
text-decoration: underline;
}
#yxzl>.text>.r:hover .ijt{
animation: ijt 1s infinite;
}
#yxzl>.bbox{
height: 400px;
width: 100%;
margin-top: 21px;
overflow: auto;
}
#yxzl>.bbox>div{
width: 90px;
float: left;
height: 100px;
margin-right: 16px;
margin-bottom: 12px;
}
#yxzl>.bbox>div>img{
width: 66px;
height: 66px;
margin: 0 12px 0 12px;
}
#yxzl>.bbox>div>p{
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #333;
}
#czg-bg{
min-width: 1500px;
height: 424px;
padding: 66px 0 82px 0;
}
#czg{
width: 1358px;
height: 424px;
margin: auto;
扫一扫
7518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
