html+css实现京东、英雄联盟静态页面
效果展示
真高仿，像真的一样，页面的效果几乎都做出来了。
京东
刚接触html css的时候写第一个页面，由于当时布局不太熟练，写了将近一个月…
英雄联盟
实现功能
- 京东点击切换轮播图
- 京东自动轮播图
- 京东自动轮播图+获取鼠标焦点暂停移动
- 京东实现右侧导航栏点击跳转，英雄联盟实现右侧导航栏动画
- 京东、英雄联盟官网有的，基本都有
源码
html+css实现京东商城
html+css实现 英雄联盟（lol）页面
代码实现
京东
html
"utf-8">
京东<span class="token punctuation">(</span>JD.COM<span class="token punctuation">)</span>-正品低价、品质保障、配送及时、轻松购物！
" icon" href="image\logo.png">
"stylesheet" type="text/css" href="jd.css">
"stylesheet" href="download\iconfont.css">
"stylesheet" href="download2/iconfont.css">
"stylesheet" href="downloadgd\iconfont.css">
"stylesheet" href="悬浮栏\iconfont.css">
"stylesheet" href="悬浮栏\顶部\iconfont.css">
"stylesheet" href="眼睛\iconfont.css">
"fixed">
-
"li1">"a" href="#a">京东秒杀
-
"li2">"a" href="#b">特色优选
-
"li2">"a" href="#pdgcbg">频道广场
-
"li2">"a" href="#pdgcbg1">为你推荐
-
"i">"iconfont a">;
"li3">"a" href="#a">客服
-
"i">"iconfont a">;
"li3">"a" href="#a">反馈
-
"i">"iconfont a">;
"li1">"a" href="#header">顶部
"bg">
"box">
"grid-container">
"black active l dq" href="">
"image\地区.png " height="12" width="10"> 河南
"tooltiptext1">
- 北京
- 上海
- 天津
- 重庆
- 河北
- 山西
- 河南
- 辽宁
- 吉林
- 黑龙江
- 内蒙古
- 江苏
- 山东
- 安徽
- 浙江
- 福建
- 湖北
- 湖南
- 广东
- 安徽
- 浙江
- 福建
- 湖北
- 湖南
- 广西
- 江西
- 四川
- 海南
- 贵州
- 云南
- 西藏
- 陕西
- 甘肃
- 青海
- 宁夏
- 新疆
- 港澳
- 台湾
- 钓鱼岛
- 海外
地区专享版本
- "active">中國港澳
-
- "active">中國台灣
- "active">京东全球
-
- "active">
"active l" href="">
"active l" href="">
"active l" href="">
"active l" href="">
"active l" href="">你好，请登录
"red l" href=""> 免费注册
"active r" href=""> 我的订单
"black active r dq" href=""> 我的京东
"tooltiptext2">
- "active">待处理订单
- "active">我的问答
- "active">返修退换货
- "active">我的关注
- "active">降价商品
- "active">
- "active">我的京东
- "active">我的优惠卷
- "active">我的白条
- "active">我的理财
"active r" href=""> 京东会员
"red black r active dq" href=""> 企业采购
"tooltiptext3">
- "jdg">企业购
- "jdg">公共频道
- "jdg">工业品
- "jdg">商用场景馆
- "jdg">礼品卡
- "jdg">企业微信购
- "jdg">工品优选
- "jdg">京东锦礼
- "jdg a">大中型客户采购
"black r ac" href=""> 客户服务
"black r" href=""> 网站导航
"hover r" href=""> 手机京东
"active r" href=""> 网站无障碍
"header" class="w ">
"hbody">
"search-m">
"from">
"text" class="ssk">
"image\ss.png">
"gwc">我的购物车
"hotwords">
"one">红魔热销中
女鞋
低至95折
小米新品
珠宝饰品
耳机音箱
游戏电视
游戏新品
电脑整机
"img">
"image\jd.png">
"hbottom">
"one">秒杀
"one">优惠卷
PLUS会员
品牌闪购
拍卖
京东家电
京东超市
京东生鲜
京东国际
京东云
"fs">
"fsbody">
"fsone">
家用电器
"hd">
"hdbody">
"box1">
家电馆"iconfontgdd">;
开店设备一站购"iconfontgdd">;
"box2">
"sbox">
"l">电视"iconfontgdd">;
"r">全面屏电视
"r">教育电视
"r">DLED电视
"r">智慧屏
"r">4K超清电视
"r">55英寸
"r">65英寸
"r">电视配件
"sbox">
"l">空调"iconfontgdd">;
"r">新风空调
"r">以旧换新
"r">空调挂机
"r">空调柜机
"r">空调套装
"r">新一级能效
"r">挂机1.5匹
"r">柜机3匹
"r">变频空调
"r">中央空调
"r">移动空调
"sbox">
"l">洗衣机"iconfontgdd">;
"r">滚筒洗衣机
"r">洗烘一体机
"r">波轮洗衣机
"r">洗烘套装
"r">迷你洗衣机
"r">洗衣机配件
"r">烘干机
"sbox">
"l">冰箱"iconfontgdd">;
"r">多门
"r">对开门
"r">三门
"r">双门
"r">冰洗套装
"r">冷柜/冰吧
"r">酒柜
"r">冰箱配件
"sbox">
"l">厨卫大电"iconfontgdd">;
"r">油烟机
"r">灶具
"r">烟灶套装
"r">集成灶
"r">集成水槽
"r">消毒柜
"r">洗碗机
"r">电热水器
"r">燃气热水器
"r">壁挂率
"r">空气能热水器
"r">嵌入式厨电
"r">太阳能热水器
"r">烟机灶具配件
"sbox">
"l">厨卫小电"iconfontgdd">;
"r">破壁机
"r">咖啡机
"r">榨汁机
"r">电炖锅
"r">果蔬净化清洗机
"r">三明治机/早餐机
"r">电烤箱
"r">厨师机/和面机
"r">料理机
"r">电饼铛
"r">电水壶/热水瓶
"r">面包机
"r">电火锅
"r">空气炸锅
"r">养生壶
"r">电磁炉
"r">电饭煲
"r">电压力锅
"r">微波炉
"r">面条机
"r">电陶炉
"r">电烧烤炉
"r">煮蛋器
"r">电热饭盒
"r">豆浆机
"sbox">
"l">生活电器"iconfontgdd">;
"r">电风扇
"r">冷风扇
"r">空气净化器
"r">加湿器
"r">净水器
"r">饮水机
"r">吸尘器
"r">扫地机器人
"r">茶吧机
"r">蒸汽/电动拖把
"r">除螨仪
"r">洗地机
"r">挂烫机/熨斗
"r">干衣机
"r">除湿机
"r">电话机
"r">擦地/擦窗机器人
"r">取暖器
"r">毛球修剪器
"r">生活电器配件
"sbox">
"l">个护健康"iconfontgdd">;
"r">剃须刀
"r">电动牙刷
"r">冲牙器
"r">电吹风
"r">卷/直发器
"r">理发器
"r">美容仪
"r">剃/脱毛器
"r">洁面仪
"r">按摩器
"r">按摩椅
"r">足浴盆
"r">电动牙刷头
"sbox">
"l">视听影音"iconfontgdd">;
"r">家庭影院
"r">KTV音响
"r">迷你音响
"r">DVD
"r">功放
"r">回音壁
"r">麦克风
![]()
"gg1" src="image\a\Snipaste_2022-07-11_17-02-07.png">
![]()
"gg2" src="image\a\c8708a4338dad41f.jpg.webp">
手机/运营商/数码
"hd">
"hdbody">
"box1">
家电馆"iconfontgdd">;
开店设备一站购"iconfontgdd">;
"box2">
"sbox">
"l">电视"iconfontgdd">;
"r">全面屏电视
"r">教育电视
"r">DLED电视
"r">智慧屏
"r">4K超清电视
"r">55英寸
"r">65英寸
"r">电视配件
"sbox">
"l">空调"iconfontgdd">;
"r">新风空调
"r">以旧换新
"r">空调挂机
"r">空调柜机
"r">空调套装
"r">新一级能效
"r">挂机1.5匹
"r">柜机3匹
"r">变频空调
"r">中央空调
"r">移动空调
"sbox">
"l">洗衣机"iconfontgdd">;
"r">滚筒洗衣机
"r">洗烘一体机
"r">波轮洗衣机
"r">洗烘套装
"r">迷你洗衣机
"r">洗衣机配件
"r">烘干机
"sbox">
"l">冰箱"iconfontgdd">;
"r">多门
"r">对开门
"r">三门
"r">双门
"r">冰洗套装
"r">冷柜/冰吧
"r">酒柜
"r">冰箱配件
"sbox">
"l">厨卫大电"iconfontgdd">;
"r">油烟机
"r">灶具
"r">烟灶套装
"r">集成灶
"r">集成水槽
"r">消毒柜
"r">洗碗机
"r">电热水器
"r">燃气热水器
"r">壁挂率
"r">空气能热水器
"r">嵌入式厨电
"r">太阳能热水器
"r">烟机灶具配件
"sbox">
"l">厨卫小电"iconfontgdd">;
"r">破壁机
"r">咖啡机
"r">榨汁机
"r">电炖锅
"r">果蔬净化清洗机
"r">三明治机/早餐机
"r">电烤箱
"r">厨师机/和面机
"r">料理机
"r">电饼铛
"r">电水壶/热水瓶
"r">面包机
"r">电火锅
"r">空气炸锅
"r">养生壶
"r">电磁炉
"r">电饭煲
"r">电压力锅
"r">微波炉
"r">面条机
"r">电陶炉
"r">电烧烤炉
"r">煮蛋器
"r">电热饭盒
"r">豆浆机
"sbox">
"l">生活电器"iconfontgdd">;
"r">电风扇
"r">冷风扇
"r">空气净化器
"r">加湿器
"r">净水器
"r">饮水机
"r">吸尘器
"r">扫地机器人
"r">茶吧机
"r">蒸汽/电动拖把
"r">除螨仪
"r">洗地机
"r">挂烫机/熨斗
"r">干衣机
"r">除湿机
"r">电话机
"r">擦地/擦窗机器人
"r">取暖器
"r">毛球修剪器
"r">生活电器配件
"sbox">
"l">个护健康"iconfontgdd">;
"r">剃须刀
"r">电动牙刷
"r">冲牙器
"r">电吹风
"r">卷/直发器
"r">理发器
"r">美容仪
"r">剃/脱毛器
"r">洁面仪
"r">按摩器
"r">按摩椅
"r">足浴盆
"r">电动牙刷头
"sbox">
"l">视听影音"iconfontgdd">;
"r">家庭影院
"r">KTV音响
"r">迷你音响
"r">DVD
"r">功放
"r">回音壁
"r">麦克风
![]()
"gg1" src="image\a\Snipaste_2022-07-11_17-02-07.png">
![]()
"gg2" src="image\a\c8708a4338dad41f.jpg.webp">
家居/家具/家装/厨具
男装/女装/童装/内衣
美妆/个护清洁/宠物/
女鞋/箱包/钟表/珠宝
男鞋/运动/户外
房产/汽车/汽车用品
母婴/玩具乐器
食品/酒类/生鲜/特产
艺术/礼品鲜花/农资绿植
医疗保健/计生情趣
图书/文娱/教育/电子书
机票/酒店/旅游/生活
理财/众筹/白条/保险
安装/维修/清洗/二手
工业品
"banner">
"radio" id="put1" checked name="put" hidden>
"radio" id="put2" name="put" hidden>
"radio" id="put3" name="put" hidden>
- "image/dem/d1.jpg">
- "image\dem\d2.jpg">
- "image\dem\d3.jpg">
"circle">
"left_arrow">
"right_arrow">
"fsthree">
"a">
"demo3">
"image\demo3\1\1.webp">
"image\demo3\1\2.webp">
"image\demo3\1\3.webp">
"a">
"demo3">
"image\demo3\2\1.webp">
"image\demo3\2\2.jpg.webp">
"image\demo3\2\3.png.webp">
"a">
"a">
"demo3">
"image\demo3\3\1.webp">
"image\demo3\3\2.jpg.webp">
"image\demo3\3\3.webp">
"fsfour">
"one">
"o">
![]()
"img1" src="image\touxiang.png">
"t">
Hi~欢迎逛京东！
登录|注册
"bottom">
"left">新人福利
"right">PLUS会员
"two">
"o"> 京东快报 "">更多
"t">
- "a">热门孕期腿脚抽筋古娜拉黑暗之神
- "a">最新智慧便捷功能全，物灵智能点读笔
- "a">最新我是渣渣灰，是兄弟就来砍我
- "a">推荐挖掘机技术哪家强，中国山东找蓝翔
"three">
"bb">
"image\话费\话费.png"> 话费
"image\话费\游戏.png"> 游戏
"image\话费\众筹.png"> 众筹
"image\话费\电影票.png">电影票
"bb">
"image\话费\机票.png">机票
"image\话费\加油卡.png">加油卡
"image\话费\理财.png">理财
"image\话费\企业购.png">企业购
"bb">
"image\话费\酒店.png">酒店
"image\话费\火车票.png">火车票
"image\话费\白条.png">白条
"image\话费\礼品卡.png">礼品卡
"a">
"bd">
![]()
"100%" height="100%" src="Snipaste_2022-07-22_22-11-18.png">
-
"image\京东秒杀\艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能.png">"艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能">艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能
"b">"iconfont">;99.99
-
"image\京东秒杀\百威Budweiser淡色拉格啤酒450ml18听整箱装.jpg">"百威Budweiser淡色拉格啤酒450ml18听整箱装">百威Budweiser淡色拉格啤酒450ml18听整箱装
"b">"iconfont">;33.00
-
"image\京东秒杀\格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿.jpg">"格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿">格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿
"b">"iconfont">;999.99
-
"image\京东秒杀\海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G101.jpg">
"海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10">海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10
"b">"iconfont">;765.88
-
"image\京东秒杀\华硕天选3锐龙版15.6英寸游戏本笔记本电脑.jpg">"华硕天选3锐龙版15.6英寸游戏本笔记本电脑">华硕天选3锐龙版15.6英寸游戏本笔记本电脑
"b">"iconfont">;6999.90
-
"image\京东秒杀\乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物.jpg">"乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物">乐高积木城市系列CITY 60350月球研究基地7岁儿童玩具男孩生日礼物
"b">"iconfont">;520.00
-
"image\京东秒杀\乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏.jpg">"乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏">乐视电视G75S75英寸4K超高清护眼智慧屏金属全面屏
"b">"iconfont">;890.90
-
"image\京东秒杀\舒肤佳泡沫洗手液樱花白茶.jpg">"舒肤佳泡沫洗手液樱花白茶">舒肤佳泡沫洗手液樱花白茶
"b">"iconfont">;39.00
-
"image\京东秒杀\艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能.png">"艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能">艾美特Airmate七叶家用遥控风扇大风量摇头落地扇节能
"b">"iconfont">;99.99
-
"image\京东秒杀\百威Budweiser淡色拉格啤酒450ml18听整箱装.jpg">"百威Budweiser淡色拉格啤酒450ml18听整箱装">百威Budweiser淡色拉格啤酒450ml18听整箱装
"b">"iconfont">;33.00
-
"image\京东秒杀\格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿.jpg">"格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿">格力移动空调冷暖一体机1.5匹家用厨房客厅便携立式空调可除湿
"b">"iconfont">;999.99
-
"image\京东秒杀\海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G101.jpg">
"海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10">海尔218升风冷无霜双变频三门小型家用冰箱一级能效纤薄全变温净味租房节能BCD-218WGHC3E9G10
"b">"iconfont">;765.88
"image\a\点读笔.jpg.webp">
"one">平板电脑秒杀专场
"two">下单赠磁吸皮套
"three">品类秒杀
"b">
"bd">
"l">
"head">
"left">每日特价"gd">"iconfont1">;
"ch">
"a">298天最低价
"a">"image\每日特价\奥克斯家用双门迷你小.jpg.webp">
奥克斯双门迷你小
"q">"iconfont">;478
"b">
"b">
"dw">"image\每日特价\戴尔T3650塔式图形工作站.jpg.webp">"mr">354天最低价
"c">戴尔T3650塔式图形工作站"rmb">"iconfont">;3950
"b">
"dw">"image\每日特价\LRKER Type-C快充充电线.jpg.webp">"mr">1年最低价
"c">LRKER Type-C快充充电线"rmb">"iconfont">;4.9
"d">
"dw">"image\每日特价\荣耀Play6T全网通手机.jpg.webp">"mr">20天最低价
"c">荣耀Play6T全网通手机"rmb">"iconfont">;1259
"d">
"dw">"image\每日特价\买3送1碗莲种子【30粒套.jpg.webp">"mr">1年最低价
"c">买3送1碗莲种子【30粒套"rmb">"iconfont">;8.8
- 精选
"ts">
"a">298天最低价
"a">"image\每日特价\奥克斯家用双门迷你小.jpg.webp">
奥克斯双门迷你小
"q">"iconfont">;478
"b">
"b">
"dw">"image\每日特价\戴尔T3650塔式图形工作站.jpg.webp">"mr">354天最低价
"c">戴尔T3650塔式图形工作站"rmb">"iconfont">;3950
"b">
"dw">"image\每日特价\LRKER Type-C快充充电线.jpg.webp">"mr">1年最低价
"c">LRKER Type-C快充充电线"rmb">"iconfont">;4.9
"d">
"dw">"image\每日特价\荣耀Play6T全网通手机.jpg.webp">"mr">20天最低价
"c">荣耀Play6T全网通手机"rmb">"iconfont">;1259
"d">
"dw">"image\每日特价\买3送1碗莲种子【30粒套.jpg.webp">"mr">1年最低价
"c">买3送1碗莲种子【30粒套"rmb">"iconfont">;8.8
- 美食
"ts">
"a">75天最低价
"a">"image\每日特价\陕西精选新鲜大黄杏5斤.jpg.webp">
陕西精选新鲜大黄杏5斤
"q">"iconfont">;22.8
"b">
"b">
"dw">"image\每日特价\正宗苹果蕉净重3斤.jpg.webp">"mr">86天最低价
"c">正宗苹果蕉净重3斤"rmb">"iconfont">;11.8
"yq">已抢125件
"b">
"dw">"image\每日特价\星华源麻辣牛肉100g.jpg.webp">"mr">1年最低价
"c">星华源麻辣牛肉100g"rmb">"iconfont">;17.5
"d">
"dw">"image\每日特价\呈香记麻椒鸡真空包装开袋.jpg.webp">"mr">206天最低价
"c">呈香记麻椒鸡真空包装开袋"rmb">"iconfont">;17.9
"yq">已抢150件
"d">
"dw">"image\每日特价\冷冻扇贝肉500g袋装.jpg.webp">"mr">1年最低价
"c">冷冻扇贝肉500g袋装"rmb">"iconfont">;39
"yq">已抢134件
- 百货
"ts">
"a">75天最低价
"a">"image\每日特价\日本进口三格雪糕模具.jpg.webp">
日本进口三格雪糕模具
"q">"iconfont">;15.2
"b">
"b">
"dw">"image\每日特价\心相印婴儿抽纸M码110抽.jpg.webp">"mr">339天最低价
"c">心相印婴儿抽纸M码110抽"rmb">"iconfont">;44.9
"b">
"dw">"image\每日特价\吨顿桶运动水壶超大容量耐.jpg.webp">"mr">51天最低价
"c">吨顿桶运动水壶超大容量耐"rmb">"iconfont">;26.9
"d">
"dw">"image\每日特价\卡通静音门把手防撞垫保护.jpg.webp">"mr">1年最低价
"c">卡通静音门把手防撞垫保护"rmb">"iconfont">;9.9
"d">
"dw">"image\每日特价\兜市精选全自动雨伞2骨.jpg.webp">"mr">1年最低价
"c">兜市精选全自动雨伞2骨"rmb">"iconfont">;35.9
"yq">已抢234件
- 个护
"ts">
"a">129天最低价
"a">"image\每日特价\敬修堂牙膏黄金版香口.jpg.webp">
敬修堂牙膏黄金版香口
"q">"iconfont">;34.8
"b">
"b">
"dw">"image\每日特价\韩方五谷海盐控油除螨洗.jpg.webp">"mr">311天最低价
"c">韩方五谷海盐控油除螨洗"rmb">"iconfont">;26
"b">
"dw">"image\每日特价\苏菲日夜组合126片.jpg.webp">"mr">130天最低价
"c">苏菲日夜组合126片"rmb">"iconfont">;44.9
"d">
"dw">"image\每日特价\康婷瑞倪维儿洁肤护理乳.jpg.webp">"mr">138天最低价
"c">康婷瑞倪维儿洁肤护理乳"rmb">"iconfont">;24
"d">
"dw">"image\每日特价\修正紫花地丁育30g.jpg.webp">"mr">90天最低价
"c">修正紫花地丁育30g"rmb">"iconfont">;29.8
- 预告
"ts">
"a">
"a">"image\每日特价\缤兔美妆冰箱冷藏专业.jpg.webp">
缤兔美妆冰箱冷藏专业
"q">"iconfont">;699
"b">
"b">
"dw">"image\每日特价\米诺地尔酊头皮上药器.jpg.webp">
"c">米诺地尔酊头皮上药器"rmb">"iconfont">;178
"b">
"dw">"image\每日特价\圣元汇力多营养小米米糊米.jpg.webp">
"c">圣元汇力多营养小米米糊米"rmb">"iconfont">;9
"d">
"dw">"image\每日特价\华为智选Hi nova9 se 5G手.jpg.webp">
"c">华为智选Hi nova9 se 5G手"rmb">"iconfont">;24
"d">
"dw">"image\每日特价\修正紫花地丁育30g.jpg.webp">"mr">90天最低价
"c">修正紫花地丁育30g"rmb">"iconfont">;29.8
"r">
"bd">
"bd">
"head">品牌闪购"gd">"iconfont1">;
"sfj">舒福佳
Shufujia
"aa">舒福佳品牌闪购
"aaa">全场低至8.8元免运|仅剩1天
"image\品牌闪购\舒福佳.webp">
"bd">
"body">
"sb">"image\商标\洁丽雅秒杀专场.webp" class="sb1">
"sb2">洁丽雅秒杀专场
"sb">"image\商标\六福珠宝闪购专场.webp" class="sb1">
"sb2">六福珠宝闪购专场
"sb">"image\商标\onlycook闪购专场.webp" class="sb1">
"sb2">onlycook闪购专场
"sb">"image\商标\蒙娜丽莎品牌专场.webp" class="sb1">
"sb2">蒙娜丽莎品牌专场
"sb">"image\商标\大牌童装狂欢购.webp" class="sb1">
"sb2">大牌童装狂欢购
"sb">"image\商标\海昌隐形眼镜闪购.webp" class="sb1">
"sb2">海昌隐形眼镜闪购
"c">
"bd">
"l">
"haohuo">探索新生活 "iconfont2">;
"r">
- "li1">
"name1">小米 至尊纪念版 5G手机"image\发现好货\小米至尊纪念版5G手机.png">
- "li2">"image\发现好货\鲜嫩清甜脆新鲜嫩莲蓬.jpg">
"name2">鲜嫩清甜脆新鲜嫩莲蓬
- "li1">
"name1">DURGOD 三模 机械键盘"image\发现好货\DURGOD三模机械键盘.jpg">
- "li2">"image\发现好货\耐克缓震跑步鞋.jpg">
"name2">耐克 缓震 跑步鞋
- "li1">
"name1">华为WATCH 3鸿蒙智能运动手表"image\发现好货\华为WATCH3鸿蒙智能运动手表.png">
- "li2">"image\发现好货\尤尼克斯方形拍头羽毛.png">
"name2">尤尼克斯 方形拍头 羽毛
- "li1">
"name1">倍护婴 三环动物乐园款"image\发现好货\倍护婴三环动物乐园款.jpg">
- "li2">"image\发现好货\李宁吸湿PU篮球.jpg">
"name2">李宁 吸湿PU 篮球
- "li1">
"name1">众桥 多功能充电式 苍蝇拍"image\发现好货\众桥多功能充电式苍蝇拍.jpg">
- "li2">"image\发现好货\MLB 男女通用棒球帽.jpg">
"name2">MLB 男女通用 棒球帽
- "li1">
"name1">小米 至尊纪念版 5G手机"image\发现好货\小米至尊纪念版5G手机.png">
- "li2">"image\发现好货\鲜嫩清甜脆新鲜嫩莲蓬.jpg">
"name2">鲜嫩清甜脆新鲜嫩莲蓬
- "li1">
"name1">DURGOD 三模 机械键盘"image\发现好货\DURGOD三模机械键盘.jpg">
- "li2">"image\发现好货\耐克缓震跑步鞋.jpg">
"name2">耐克 缓震 跑步鞋
- "li1">
"name1">华为WATCH 3鸿蒙智能运动手表"image\发现好货\华为WATCH3鸿蒙智能运动手表.png">
"d">
"bd">
"head">
"text">新品首发"iconfont1">;
"D:\VS\vscode_date\jd\image\新品首发\Snipaste_2022-07-11_15-22-04.png">
"head">
"text">JOY寻宝"iconfont1">;
"header">
-
换个新机
"yc">
"bbsb">
"image\新品首发\8848.webp">
"text">
8848 钛金手机M5尊享版智能商务加密轻奢手机双卡双
"price">"iconfont3">;4999.00
"bbsb">
"image\新品首发\其他故障定金.webp">
"text">
其他故障定金
"price">"iconfont3">;30.00
"bbsb">
"image\新品首发\京东安卓手机2年碎屏保D.webp">
"text">
京东安卓手机2年碎屏保D
"price">"iconfont3">;79.00
- 健身达人
"yc">
"bbsb">
"image\新品首发\GYMGEST力量站多功能肌肉综合训练器家用运动健身.webp">
"text">
GYMGEST力量站多功能肌肉综合训练器家用运动健身
"price">"iconfont3">;13999.00
"bbsb">
"image\新品首发\【健身房级超跑】亿健跑步机家用静音走步机可折叠室.webp">
"text">
【健身房级超跑】亿健跑步机家用静音走步机可折叠室
"price">"iconfont3">;3149.00
"bbsb">
"image\新品首发\贝德拉(BeDL)跑步机家用折叠走步机健身器材510.webp">
"text">
贝德拉(BeDL)跑步机家用折叠走步机健身器材510
"price">"iconfont3">;1549.00
- 掌上书房
"yc">
"bbsb">
"image\新品首发\官方正版盛夏2木苏里著江添VS盛望盛夏TB版.webp">
"text">
官方正版盛夏2木苏里著江添VS盛望盛夏TB版
"price">"iconfont3">;39.60
"bbsb">
"image\新品首发\34dee67188f67639.jpg!q90.webp">
"text">
JDRead2【京东自主研发】电子书阅读器300ppi高清
"price">"iconfont3">;1242.00
"bbsb">
"image\新品首发\京东安卓手机2年碎屏保D.webp">
"text">
京东安卓手机2年碎屏保D
"price">"iconfont3">;39.60
- 乔迁之喜
"yc">
"bbsb">
"image\新品首发\玻妞(HOBOT) 388擦窗机器人波妞超声波自动喷水智.webp">
"text">
玻妞(HOBOT) 388擦窗机器人波妞超声波自动喷水智
"price">"iconfont3">;3680.00
"bbsb">
"image\新品首发\科沃斯(ECOVACS)【自清洁抹布】N9+扫地机器人.webp">
"text">
新品首发\科沃斯(ECOVACS)【自清洁抹布】N9+扫地机
"price">"iconfont3">;3699.00
"bbsb">
"image\新品首发\352 X86C空气净化器家用除甲醛}争化器正负离子消毒除.webp">
"text">
352 X86C空气净化器家用除甲醛}争化器正负离子消毒除
"price">"iconfont3">;4198.00
"bbsb">
"image\新品首发\8848.webp">
"text">
8848 钛金手机M5尊享版智能商务加密轻奢手机双卡双
"price">"iconfont3">;4999.00
"bbsb">
"image\新品首发\其他故障定金.webp">
"text">
其他故障定金
"price">"iconfont3">;30.00
"bbsb">
"image\新品首发\京东安卓手机2年碎屏保D.webp">
"text">
京东安卓手机2年碎屏保D
"price">"iconfont3">;79.00
"head">
"text">逛好店"iconfont1">;
"bd1">
"title">海康威视（HIKVISION）车品京东自营旗舰店
"bd1">
"bq1">自营
"bq2">急速狂飙
"guanzhu">239.3万人关注
"img">"image\新品首发\逛好店1.webp">
"bd2">
"bd1">
"title">格力官方旗舰店
"bq2">家电集结
"guanzhu3">73.0万人关注
"img">"image\新品首发\逛好店1.webp">
"head">
"text">领卷中心"iconfont1">;
"bg">
"bg">
"div">
"ljimg">
![]()
"jimg" src="image\新品首发\领卷1.webp">
"div">
"ljprice">"iconfont3">;5
"limit">满6元可用
"desc">新人专属，尽可购买时使用一次
"inner">更多好劵
"gd">"iconfontgd">;
"div">
"ljimg">
![]()
"jimg" src="image\新品首发\领劵2.webp">
"div">
"ljprice">"iconfont3">;2
"limit">满3元可用
"desc">仅可购买自营文具键鼠标
"inner">更多好劵
"gd">"iconfontgd">;
"div">
"ljimg">
![]()
"jimg" src="image\新品首发\领卷3.webp">
"div">
"ljprice">"iconfont3">;5
"limit">满60.1元可用
"desc">仅可购买内衣部分商品
"inner">更多好劵
"gd">"iconfontgd">;
"pdgcbg">
"pdgc">![]()
"divf" src="image\左.png">频道广场![]()
"divl" src="image\右.png">
"jdcsbg">
"jdcs">
![]()
"jdimg" src="image\频道广场\京东超市大.webp">
![]()
"sximg" src="image\频道广场\生鲜馆大.webp">
"sjimg">
"tbox">京东手机"sbox">一个极客的诞生
"bbox">
![]()
"lbox" src="image\频道广场\京东手机1.webp">
![]()
"lbox" src="image\频道广场\京东手机2.webp">
"esimg">
"tbox">拍拍二手"sbox">大牌1元抢
"bbox">
![]()
"lbox" src="image\频道广场\二手1.webp">
![]()
"lbox" src="image\频道广场\二手2.webp">
"jzimg">
"tbox">家装城"sbox">用心装好家一站式购齐
"bbox">
![]()
"lbox" src="image\频道广场\家装城1.webp">
![]()
"lbox" src="image\频道广场\家装城2.webp">
"dqimg">
"tbox">家装城"sbox">用心装好家一站式购齐
"bbox">
![]()
"lbox" src="image\频道广场\家具1.webp">
![]()
"lbox" src="image\频道广场\家具2.webp">
"qyimg">
"tbox">企业购"sbox">一站式企业采购平台
"bbox">
![]()
"lbox" src="image\频道广场\企业购1.webp">
![]()
"lbox" src="image\频道广场\企业购2.webp">
"csimg">
"tbox">京东超市"sbox">一站式囤生活好物
"bbox">
![]()
"lbox" src="image\频道广场\京东超市1.webp">
![]()
"lbox" src="image\频道广场\京东超市2.webp">
"dzimg">
"tbox">京东京造"sbox">京东自有品牌
"bbox">
![]()
"lbox" src="image\频道广场\京东造1.webp">
![]()
"lbox" src="image\频道广场\京东造2.webp">
"dyimg">
"tbox">大药房"sbox">购正品药 免费换新
"bbox">
![]()
"lbox" src="image\频道广场\药房1.webp">
![]()
"lbox" src="image\频道广场\药房2.webp">
"joyimg">
"tbox">Joy寻宝"sbox">懂你的Joy
"bbox">
![]()
"lbox" src="image\频道广场\寻宝1.webp">
![]()
"lbox" src="image\频道广场\寻宝2.webp">
"sxgimg">
"tbox">生鲜馆"sbox">尝遍天下鲜
"bbox">
![]()
"lbox" src="image\频道广场\生鲜1.webp">
![]()
"lbox" src="image\频道广场\生鲜2.webp">
"mzimg">
"tbox">京东美妆"sbox">京东美妆 懂你的美
"bbox">
![]()
"lbox" src="image\频道广场\美妆1.webp">
![]()
"lbox" src="image\频道广场\美妆2.webp">
"ssimg">
"tbox">京东时尚"sbox">服饰美妆好物
"bbox">
![]()
"lbox" src="image\频道广场\时尚1.webp">
![]()
"lbox" src="image\频道广场\时尚2.webp">
"xjimg">
"tbox">新机发布"sbox">有新机更有范
"bbox">
![]()
"lbox" src="image\频道广场\新机1.webp">
![]()
"lbox" src="image\频道广场\新机2.webp">
"smimg">
"tbox">智能数码"sbox">尽享玩物
"bbox">
![]()
"lbox" src="image\频道广场\数码1.webp">
![]()
"lbox" src="image\频道广场\数码2.webp">
"cwimg">
"tbox">厨卫电器"sbox">百变厨房大焕新
"bbox">
![]()
"lbox" src="image\频道广场\厨卫1.webp">
![]()
"lbox" src="image\频道广场\厨卫2.webp">
"xyjimg">
"tbox">冰箱洗衣机"sbox">品质生活必备
"bbox">
![]()
"lbox" src="image\频道广场\洗衣机1.webp">
![]()
"lbox" src="image\频道广场\洗衣机2.webp">
"pdgcbg1">
"pdgc">![]()
"divf" src="image\左.png">为你推荐![]()
"divl" src="image\右.png">
"wntj">
"header">
-
"tbox">
"tbox1">精选
"bbox1">猜你喜欢
-
"tbox">智能先锋
"bbox">大电器城
-
"tbox">居家优品
"bbox">品质生活
-
"tbox">超市百货
"bbox">百货生鲜
-
"tbox">时尚达人
"bbox">美妆穿搭
- "li">
"tbox">进口好物
"bbox">京东国际
"body">
![]()
"tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
"mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金
"bbox">"iconfont3">;3498.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\【母婴专区+变频一级能效+WIFI操控】海尔冰箱法式多门.webp">
"mbox">【母婴专区+变频一级能效+WIFI操控】海尔冰箱法式多门
"bbox">"iconfont3">;3899.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
"mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金
"bbox">"iconfont3">;3498.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\米家小米冰箱双开门496升十字对开门四门冰箱一级能效...webp">
"mbox">米家小米冰箱双开门496升十字对开门四门冰箱一级能效...
"bbox">"iconfont3">;3189.00
"zxs">"iconfontyj">; 找相似
![]()
"div1" src="image\为你推荐\机不离手.png">
![]()
"tbox" src="image\为你推荐\【多仓速发】海尔(Haier)冰箱法式多门变频超薄嵌入式家...webp">
"mbox">【多仓速发】海尔(Haier)冰箱法式多门变频超薄嵌入式家...
"bbox">"iconfont3">;3099.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\背背佳矫正背部姿势带儿童学生成人男女通用KU矫....webp">
"mbox">背背佳矫正背部姿势带儿童学生成人男女通用KU矫..
"bbox">"iconfont3">;179.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\海尔(Haier)冰箱463升法式多门家用电冰箱四门节能无霜...webp">
"mbox">海尔(Haier)冰箱463升法式多门家用电冰箱四门节能无霜.
"bbox">"iconfont3">;2588.90
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\Aisino企业管理软件+联想(ThinkServer)TS80X服务器….webp">
"mbox">Aisino企业管理软件+联想(ThinkServer)TS80X服务器
"bbox">"iconfont3">;7088.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金.webp">
"mbox">【2022新品】海尔517升冰箱双开对开门大冷冻风冷无霜一级能效双变频家用黑金
"bbox">"iconfont3">;6199.00
"zxs">"iconfontyj">; 找相似
"jxdiv">
"header">精选热点
"bbbox">
电压力锅
移动书架
懒人减肥机
欧式果盘
保温壶
自动波箱油
学习机
薰衣草精油
![]()
"tbox" src="image\为你推荐\新飞(Frestec）三门冰箱家用节能风冷电冰箱小型双开门....webp">
"mbox">新飞(Frestec）三门冰箱家用节能风冷电冰箱小型双开门..
"bbox">"iconfont3">;759.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\【海尔巨能冻】海尔冰箱双开门517升双变频一级能家效风.....webp">
"mbox">【海尔巨能冻】海尔冰箱双开门517升双变频一级能家效风...
"bbox">"iconfont3">;3499.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\Apple iPhone 13(A2634) 128GB星光色支持移动...webp">
"mbox">Apple iPhone 13(A2634) 128GB星光色支持移动...
"bbox">"iconfont3">;6148.00
"zxs">"iconfontyj">; 找相似
![]()
"tbox" src="image\为你推荐\海尔(Haier)349升智能双变频风冷无霜一级能效法式多门....webp">
"mbox">海尔(Haier)349升智能双变频风冷无霜一级能效法式多门...
"bbox">"iconfont3">;3899.00
"zxs">"iconfontyj">; 找相似
"dbbg">
"box1">
"zbox">"image\底部\多.png">品类齐全，轻松购物
"zbox">"image\底部\快.png">多仓直发，极速配送
"zbox">"image\底部\好.png">正品行货，精致服务
"zbox">"image\底部\省.png">天天低价，畅选无忧
"box2">
"lbox">
"lbox1">
"text">购物指南
"text">配送方式
"text">支付方式
"text">售后服务
"text">特色服务
"lbox2">
"text">购物流程
"text">上门自提
"text">货到付款
"text">售后服务
"text">夺宝岛
"text">会员介绍
"text">211限时达到
"text">在线支付
"text">价格保护
"text">DIY装机
"text">生活旅行
"text">配送服务查询
"text">分期付款
"text">退款说明
"text">延保服务
"text">常见问题
"text">配送收费收取标准
"text">公司转账
"text">返修/退换货
"text">京东E卡
"text">大家电
"text">海外配送
"text">
"text">取消订单
"text">京东通信
"text">联系客服
"text">
"text">
"text">
"text">京鱼座智能
"rbox">
"text">京东自营覆盖区县
"bbox">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。"b1box">查看更多"iconfontgdd">;
"box3">
"box31">
- 关于我们
|
- 联系我们
|
- 联系客服
|
- 合作招商
|
- 商家帮助
|
- 营销中心
|
- 手机京东
|
- 友情链接
|
- 销售联盟
|
- 京东社区
|
- 风险监测
|
- 隐私政策
|
- 京东公益
|
- English Site
|
- Media &IR
"box32">
- 京公网安备11000002000088号
|
- 京ICP备11041704号
|
- ICP
|
- 互联网药品信息服务资格证编号(京)-经营性-2014-0008
|
- 新出发京零字第大120007号
|
- 互联网出版许可证编号新出网证(京)字150号
|
- 出版物经营许可证
|
- 网络文化经营许可证京网文[2020]6112-1201号
|
- 违法和不良信息举报电话:4006561155
- Copyright c 2004 - 2022京东JD.com版权所有
|
- 消费者维权热线:4006067733
|
- 经营证照
|
- (京)网械平台备字(2018)第00003号
|
- 营业执照
|
- 增值电信业务经营许可证
- Global Site
|
- CainT PoCCMM
|
- Situs Indonesia
|
- Sitio de Espana
|
- 51laf6iss114l
- 京东旗下网站:京东钱包
|
- 京东云
|
- 网络内容从业人员违法违规行为举报电话:4006561155-3
"box4">
"image\底部\可信网站.png">
"image\底部\网络警察.png">
"image\底部\诚信网站.png">
"image\底部\网上有害信息.png">
"image\底部\网络举报.png">
"image\底部\扫黄.png">
![]()
"img1" src="image\底部\适老化.png">
![]()
"img2" src="image\底部\国家知识.png">
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
"en">
"UTF-8">
"X-UA-Compatible" content="IE=edge">
"viewport" content="width=device-width, initial-scale=1.0">
英雄联盟全新官方网站-腾讯游戏
"stylesheet" type="text/css" href="lol.css">
"icon" href="img\icon.ico">
"stylesheet" type="text/css" href="图标\箭头\iconfont.css">
"all-bg">
"head-bg">
"bg">
"head">
"img/头部图/lol.png">
-
"span1">游戏资料
"span2">GAME INFO
-
"span1">商城/合作
"span2">STORE
-
"span1">社区互动
"span2">COMMUNITY
-
"span1">赛事官网
"span2">ESPORTS
-
"span1">自助系统
"span2">SYSTEM
"xll">
"text">
-
"">游戏下载
"">新手指引
"">资料库
"">"icon">云顶之弈
"">"icon">攻略中心
"">开发者基地
"">海克斯战利品库
"">英雄联盟宇宙
-
"">点卷充值
"">"icon1">道聚城
"">周边商城
"">LOL桌游
"">网吧特权
"">电竞小说
-
"">视频中心
"">官方微信
"">官方微博
"">玩家创作馆
"">玩家服务
"">"icon">LOL组队专区
"">"icon">作者入驻计划
"">"icon">英雄联盟素材库
-
"">"icon1">季中冠军赛
"">"icon1">LPL职业联赛
"">LDL发展联赛
"">全球总决赛
"">城市英雄争霸赛
"">德玛西亚杯
"">全国高校联赛
"">"icon">云顶之奕公开赛
-
"">"icon">图标自助领取
"">"icon1">转区系统
"">"icon">封号查询
"">账号注销
"">"icon">信誉分系统
"">服务器状态查询
"">秩序殿堂
"">峡谷之巅
"wj">
"tx">
"img/头部图/头像.png">
"wz">
亲爱的召唤师，欢迎"">登录
"zm">
"sousuo">
"big-img-bg">
![]()
"big-img" src="img/头部图/0.jpg">
"yy">
"box">
"ckxq">
"bbxq">
当前游戏版本：
Ver 12.12
"ckxqt">版本详情
"lbt-bg">
"lbtbox">
"lbox">
"lbt">
-
"img/轮播图/1.jpeg">
-
"img/轮播图/2.jpeg">
-
"img/轮播图/3.jpeg">
-
"img/轮播图/4.jpeg">
-
"img/轮播图/5.jpeg">
"lb">
"dg">你的商店
"dg">不羁之悦
"dg">LPL夏季赛
"dg">星之守护者歌曲
"dg">精选周边低至六折起
"rbox">
"lb">
- 综合
"dc">
"u">
- 《群星依旧》-星之守护者(2022)官方音乐视频
-
"bq">视频
"t">【英雄联盟】不羁之悦尼技英雄介绍
"r">07-14
-
"bq">视频
"t">【英雄联盟】不羁之悦尼菽英雄主题配乐
"r">07-13
-
"bq bqtu">公告
"t">新英雄尼J与星之守护者即将降临
"r">07-13
-
"bq bqtu">公告
"t">12.13版本更新公告:不羁之悦尼菽降临峡谷，星之..
"r">07-13
-
"bq bqtu">公告
"t">12.13云顶之弈版本更新公告
"r">07-13
-
"bq">视频
"t">【英雄联盟】群星将至，星之守护者2022即将开启
"r">07-13
- 公告
"dc">
"u">
- 另一片天空——星之守护者免费任务介绍
-
"bq bqtu">公告
"t">新英雄尼拉与星之守护者即将降临
"r">07-13
-
"bq bqtu">公告
"t">12.13版本更新公告:不羁之悦尼薇降临峡谷，星之...
"r">07-13
-
"bq bqtu">公告
"t">12.13云顶之弈版本更新公告
"r">07-13
-
"bq bqtu">公告
"t">7月15日周免英雄更新公告
"r">07-13
-
"bq bqtu">公告
"t">7月8日周免英雄更新公告
"r">07-06
-
"bq bqlan">新闻
"t">2022商城商品价格调整公告
"r">07-06
- 赛事
"dc">
"u">
- TOP5: Rookie其人之道禁法施彼身
-
"bq bqlan">赛事
"t">LPL夏季赛7月15日首发名单，GALA交锋Light
"r">07-14
-
"bq">视频
"t">我是选手:Photic武术姿态余恨奏挽歌
"r">07-14
-
"bq">视频
"t">TOP5: Scout禁军之墙狂沙卷万里
"r">07-14
-
"bq bqlan">赛事
"t">LPL夏季赛7月14日首发名单，Rookie对阵Mole
"r">07-14
-
"bq bqlan">赛事
"t">议程揭晓:入亚8大电竞项目首聚!22位嘉宾共探亚洲...
"r">07-14
-
"bq">视频
"t">TOP5: Able炼狱扳机盛放似玫瑰
"r">07-13
- 攻略
"dc">
"u">
- 《群星依旧》-星之守护者(2022)官方音乐视频
-
"bq">视频
"t">【英雄联盟】不羁之悦尼技英雄介绍
"r">07-14
-
"bq">视频
"t">【英雄联盟】不羁之悦尼菽英雄主题配乐
"r">07-13
-
"bq bqtu">公告
"t">新英雄尼J与星之守护者即将降临
"r">07-13
-
"bq bqtu">公告
"t">12.13版本更新公告:不羁之悦尼菽降临峡谷，星之..
"r">07-13
-
"bq bqtu">公告
"t">12.13云顶之弈版本更新公告
"r">07-13
-
"bq">视频
"t">【英雄联盟】群星将至，星之守护者2022即将开启
"r">07-13
- 社区
"dc">
"u">
- 另一片天空——星之守护者免费任务介绍
-
"bq bqtu">公告
"t">新英雄尼拉与星之守护者即将降临
"r">07-13
-
"bq bqtu">公告
"t">12.13版本更新公告:不羁之悦尼薇降临峡谷，星之...
"r">07-13
-
"bq bqtu">公告
"t">12.13云顶之弈版本更新公告
"r">07-13
-
"bq bqtu">公告
"t">7月15日周免英雄更新公告
"r">07-13
-
"bq bqtu">公告
"t">7月8日周免英雄更新公告
"r">07-06
-
"bq bqlan">新闻
"t">2022商城商品价格调整公告
"r">07-06
"bbox">
"span1">阅读更多
"span2">最新资讯
"ijt">
"rmhd">
"lbox">
"text">
热门活动
"u">
- 正在进行
"dc">
"chushi">
"img/热门活动/1.webp">
星之守护者2022
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者2022
"p2">五位全新星之守护者闪亮登场 为爱与希望而战！
"p2">2022-07-15 - 2022-08-16
"img/热门活动/2.webp">
星之守护者(2022)通行证
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者(2022)通行证
"p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼
"p2">2022-07-15 - 2022-08-16
"img\热门活动\3.jpg">
提百万的赠礼
"over">213天后结束
"inew">
"hover">
"hover-border-1">
"p1">提百万的赠礼
"p2">充值返点券最高30%!
"p2">2022-07-15 - 2022-08-01
"img\热门活动\4.jpg">
LPL纪念图标领取
"over">26天后结束
"inew">
"hover">
"hover-border-1">
"p1">LPL纪念图标领取
"p2">登陆英雄联盟客户端,免费领取LPL纪念图标
"p2">2022-06-20 - 2022-08-14
- 商城特惠
"dc">
"chushi">
"img\热门活动\5.jpg">
星之守护者2022
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者2022
"p2">五位全新星之守护者闪亮登场 为爱与希望而战！
"p2">2022-07-15 - 2022-08-16
"img\热门活动\6.jpg">
星之守护者(2022)通行证
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者(2022)通行证
"p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼
"p2">2022-07-15 - 2022-08-16
"img\热门活动\7.jpg">
提百万的赠礼
"over">213天后结束
"inew">
"hover">
"hover-border-1">
"p1">提百万的赠礼
"p2">充值返点券最高30%!
"p2">2022-07-15 - 2022-08-01
"img\热门活动\8.jpg">
LPL纪念图标领取
"over">26天后结束
"inew">
"hover">
"hover-border-1">
"p1">LPL纪念图标领取
"p2">登陆英雄联盟客户端,免费领取LPL纪念图标
"p2">2022-06-20 - 2022-08-14
- 长期活动
"dc">
"chushi">
"img\热门活动\9.webp">
夺冠图标表情领取
"over">长期活动
"inew">
"hover">
"hover-border-1">
"p1">星之守护者2022
"p2">五位全新星之守护者闪亮登场 为爱与希望而战！
"p2">2022-07-15 - 2022-08-16
"img/热门活动/10.webp">
至臻名品
"over">长期活动
"inew">
"hover">
"hover-border-1">
"p1">星之守护者(2022)通行证
"p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼
"p2">2022-07-15 - 2022-08-16
"img\热门活动\11.webp">
小小英雄：巨龙幼崽来袭
"over">长期活动
"inew">
"hover">
"hover-border-1">
"p1">提百万的赠礼
"p2">充值返点券最高30%!
"p2">2022-07-15 - 2022-08-01
"img\热门活动\12.webp">
破败之王 羽饰骑士礼包
"over">长期活动
"inew">
"hover">
"hover-border-1">
"p1">LPL纪念图标领取
"p2">登陆英雄联盟客户端,免费领取LPL纪念图标
"p2">2022-06-20 - 2022-08-14
"r">更多"ijt">
"chushi">
"img/热门活动/1.webp">
星之守护者2022
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者2022
"p2">五位全新星之守护者闪亮登场 为爱与希望而战！
"p2">2022-07-15 - 2022-08-16
"img/热门活动/2.webp">
星之守护者(2022)通行证
"over">28天后结束
"inew">
"hover">
"hover-border-1">
"p1">星之守护者(2022)通行证
"p2">解锁通行证赢取星之守护者系列至臻皮肤与丰富好礼
"p2">2022-07-15 - 2022-08-16
"img\热门活动\3.jpg">
提百万的赠礼
"over">213天后结束
"inew">
"hover">
"hover-border-1">
"p1">提百万的赠礼
"p2">充值返点券最高30%!
"p2">2022-07-15 - 2022-08-01
"img\热门活动\4.jpg">
LPL纪念图标领取
"over">26天后结束
"inew">
"hover">
"hover-border-1">
"p1">LPL纪念图标领取
"p2">登陆英雄联盟客户端,免费领取LPL纪念图标
"p2">2022-06-20 - 2022-08-14
"rbox">
- "video">
- "btn-flashmen p1">新手必备
- "btn-flashmen p2">领取中心
- "p3">
"icon-kh">
在线客服
- "p3">
"icon-fhcx">
秩序殿堂
- "p3">
"icon-yxzl">
游戏资料
- "p4">
"icon-xgzd">
峡谷之巅
- "p3">
"inew">
"icon-tft">
云顶之奕
- "p3">
"icon-101">
攻略中心
- "p3">
"icon-yz">
LOL宇宙
- "p4">
"icon-wxbd">
微信绑定
"yxgx">
"lbox">
"img\英雄更新\0.jpg">
"tip-gx">英雄更新
"pic-mask-0">
"text-yellow">不羁之悦 尼范
"text-white">新英雄尼菏上线!快乐，永不褪色。与尼范一同散布欢乐!
"hd">
"border">
"p1">新英雄尼菈上线！快乐，永不褪色。与尼菈一同散布欢乐！
"inner-hover-href">查看详情
"img\英雄更新\0 (1).jpg">
"tip-gx1">新皮肤
"pic-mask-01">
"text-yellow1">星之守护者2022
"text-white1">五位全新星之守护者闪亮登场为爱与希望而战!
"rbox">
"box1">
"img\英雄更新\0 (2).jpg">
"box2">
"img\英雄更新\0.png">
"box3">
"img\英雄更新\0 (3).jpg">
"zxsp-bg">
"zxsp">
"lbox">
"text">
最新视频
- 推荐
"dc">
- 官方
"dc">
- 娱乐
"dc">
- 赛事
"dc">
- 云顶之奕
"dc">
"inew">
- 教学
"dc">
"gd">更多
"ijt">
"gd">换一批
"icon-hyp">
"bbox">
"rbox">
"text">
热门专辑
- 周一
"dc">
- 周二
"dc">
- 周三
"dc">
- 周四
"dc">
- 周五
"dc">
- 周六
"dc">
- 周日
"dc">
"mbox">
![]()
"img" src="img\热门专辑\0.png">
"p2">巅峰top5
"p3">2020-09-18更新
"p">巅峰top5是一档精彩英雄联盟赛事集锦节目,
"p1">"img\热门专辑\0.jpg">飞熊TV英雄联盟
![]()
"img" src="img\热门专辑\0 (1).jpg">
"p2">小鱼TOP5
"p3">2018-09-11更新
"p">汇集英雄联盟最顶级精彩操作视频。
"p1">"img\热门专辑\0 (1).png">飞熊TV英雄联盟
![]()
"img" src="img\热门专辑\0 (2).jpg">
"p2">鹌鹑云顶锦囊
"p3">2020-09-09更新
"p">7连鸡，吃鸡霸主，云顶吃鸡小王子的吃鸡秘
"p1">"img\热门专辑\0.webp">东北大鹌鹑
"more-hotprogram">
前往视频中心
"more-arrow-2">
"sszx-bg">
"sszx">
"text">
赛事中心
- 春季赛常规赛
"dc">
- 春季赛季后赛
"dc">
- 夏季赛常规赛
"dc">
"toptip-event">
2022LPL夏季赛
"herf-more">更多
"ijt">
"bbox">
"u1">
-
"gamelist-item-topbar over">
"span1">已结束
"span3">19:00
"span2">3-20
"gamelist-team-a">
"img\赛事中心\0 (2).png">
北京JDG英特尔
"gamelist-team-b">
"img\赛事中心\0.png">
WBG—汽奥迪
"gamelist-score">
2
:
0
"gamelist-over">视频回顾
"p1">2022职业联赛
"p2">春季赛常规赛 第九场
-
"gamelist-item-topbar over">
"span1">已结束
"span3">19:00
"span2">3-20
"gamelist-team-a">
"img\赛事中心\0 (1).png">
深圳V5
"gamelist-team-b">
"img\赛事中心\0 (3).png">
AL
"gamelist-score">
2
:
0
"gamelist-over">视频回顾
"p1">2022职业联赛
"p2">春季赛常规赛 第九周 BO3
-
"gamelist-item-topbar over">
"span1">已结束
"span3">19:00
"span2">3-23
"gamelist-team-a">
"img\赛事中心\0 (4).png">
FPX
"gamelist-team-b">
"img\赛事中心\0 (5).png">
OMG
"gamelist-score">
2
:
0
"gamelist-over">视频回顾
"p1">2022职业联赛
"p2">春季赛常规赛 第九周 BO3
-
"gamelist-item-topbar over">
"span1">已结束
"span3">19:00
"span2">3-24
"gamelist-team-a">
"img\赛事中心\0 (6).png">
苏州LNG
"gamelist-team-b">
"img\赛事中心\0 (7).png">
OMG
"gamelist-score">
2
:
0
"gamelist-over">视频回顾
"p1">2022职业联赛
"p2">春季赛常规赛 第九周 BO3
-
"gamelist-item-topbar over">
"span1">已结束
"span3">19:00
"span2">3-25
"gamelist-team-a">
"img\赛事中心\0 (8).png">
OMG
"gamelist-team-b">
"img\赛事中心\0 (9).png">
RNG
"gamelist-score">
2
:
0
"gamelist-over">视频回顾
"p1">2022职业联赛
"p2">春季赛常规赛 第十周 BO3
"icon-left-arrow">
"icon-right-arrow">
"lbox">
"top">
每周最佳阵容
"u2">
-
"img\最佳阵容\Snipaste_2022-07-21_11-08-31.png">
-
"img\最佳阵容\Snipaste_2022-07-21_11-09-13.png">
-
"img\最佳阵容\Snipaste_2022-07-21_11-09-24.png">
-
"img\最佳阵容\Snipaste_2022-07-21_11-09-40.png">
-
"img\最佳阵容\Snipaste_2022-07-21_11-10-07.png">
"rbox">
"top">
积分榜
"d1">
"box1">
"a1">排名
"a2">俱乐部
"a3">胜负
"a4">积分
-
"p1">1
"p2">
"img\俱乐部\0 (10).png">TES
"p3">10/1
"p4">10
-
"p1">2
"p2">
"img\俱乐部\0.png">北京JDG英特尔
"p3">10/1
"p4">10
-
"p1">3
"p2">
"img\俱乐部\0 (1).png">深圳V5
"p3">10/1
"p4">10
-
"p1">4
"p2">
"img\俱乐部\0 (2).png">RNG
"p3">7/1
"p4">7
-
"p1">5
"p2">
"img\俱乐部\0 (3).png">AL
"p3">7/2
"p4">7
-
"p1">6
"p2">
"img\俱乐部\0 (4).png">EDG
"p3">6/4
"p4">6
-
"p1">7
"p2">
"img\俱乐部\0 (5).png">WBG—汽奥迪
"p3">6/4
"p4">6
-
"p1">8
"p2">
"img\俱乐部\0 (6).png">苏州LNG
"p3">6/5
"p4">6
-
"p1">9
"p2">
"img\俱乐部\0 (7).png">OMG
"p3">4/5
"p4">4
-
"p1">10
"p2">
"img\俱乐部\0 (8).png">TT
"p3">4/5
"p4">4
-
"p1">11
"p2">
"img\俱乐部\0 (9).png">FPX
"p3">4/6
"p4">4
-
"p1">12
"p2">
"img\俱乐部\0 (11).png">BLG平安银行
"p3">4/7
"p4">4
"yxzl-bg">
"yxzl">
"text">英雄资料
- 所有英雄
- 战士
- 法师
- 刺客
- 坦克
- 射手
- 辅助
"r">资料库"ijt">
"bbox">
"img\英雄图标\images\Annie.png">
黑暗之女
"img\英雄图标\images\崔斯特.png">
卡牌大师
"img\英雄图标\images\Aatrox.png">
暗裔剑魔
"img\英雄图标\images\Ahri.png">
九尾妖狐
"img\英雄图标\images\Akali.png">
离群之刺
"img\英雄图标\images\Amumu.png">
觞之木乃伊
"img\英雄图标\images\Anivia.png">
冰晶凤凰
"img\英雄图标\images\Aphelios.png">
残月之肃
"img\英雄图标\images\Ashe.png">
寒冰射手
"img\英雄图标\images\AurelionSol.png">
铸星龙王
"img\英雄图标\images\Azir.png">
沙漠皇帝
"img\英雄图标\images\Bard.png">
星界游神
"img\英雄图标\images\Belveth.png">
虚空女皇
"img\英雄图标\images\Blitzcrank.png">
蒸汽机器人
"img\英雄图标\images\Brand.png">
复仇焰魂
"img\英雄图标\images\Braum.png">
弗雷尔卓德之心
"img\英雄图标\images\Caitlyn.png">
皮城女警
"img\英雄图标\images\Camille.png">
青钢影
"img\英雄图标\images\Cassiopeia.png">
魔蛇之拥
"img\英雄图标\images\Chogath.png">
虚空恐惧
"img\英雄图标\images\Corki.png">
英勇投弹手
"img\英雄图标\images\Darius.png">
诺克萨斯之手
"img\英雄图标\images\Diana.png">
皎月女神
"img\英雄图标\images\Draven.png">
荣耀执法官
"img\英雄图标\images\DrMundo.png">
祖安狂人
"img\英雄图标\images\Ekko.png">
时间刺客
"img\英雄图标\images\Elise.png">
蜘蛛女皇
"img\英雄图标\images\Evelynn.png">
寡妇制造者
"img\英雄图标\images\Ezreal.png">
探险家
"img\英雄图标\images\FiddleSticks.png">
远古恐惧
"img\英雄图标\images\Fiora.png">
无双剑姬
"img\英雄图标\images\Fizz.png">
潮汐海灵
"img\英雄图标\images\Galio.png">
正义石像
"img\英雄图标\images\Gangplank.png">
海洋之灾
"img\英雄图标\images\Garen.png">
德玛西亚之力
"img\英雄图标\images\Gwen.png">
灵罗娃娃
"img\英雄图标\images\Hecarim.png">
战争之影
"img\英雄图标\images\Heimerdinger.png">
大发明家
"img\英雄图标\images\Illaoi.png">
海兽祭祀
"img\英雄图标\images\Irelia.png">
刀锋舞者
"img\英雄图标\images\Ivern.png">
翠神
"img\英雄图标\images\Janna.png">
风暴之怒
"img\英雄图标\images\JarvanIV.png">
嘉文四世
"img\英雄图标\images\Jax.png">
武器大师
"img\英雄图标\images\Jayce.png">
未来守护者
"img\英雄图标\images\Jhin.png">
戏命师
"img\英雄图标\images\Kaisa.png">
虚空之女
"img\英雄图标\images\Kalista.png">
复仇之矛
"img\英雄图标\images\Kassadin.png">
虚空行者
"img\英雄图标\images\Karma.png">
天启者
"img\英雄图标\images\Karthus.png">
"img\英雄图标\images\Katarina.png">
不祥之刃
"img\英雄图标\images\Kayle.png">
审判天使
"img\英雄图标\images\Kayn.png">
影流之镰
"img\英雄图标\images\Kennen.png">
狂暴之心
"img\英雄图标\images\Khazix.png">
虚空掠夺者
"img\英雄图标\images\Kindred.png">
永猎双子
"img\英雄图标\images\Kled.png">
暴怒战士
"img\英雄图标\images\KogMaw.png">
深渊巨口
"czg-bg">
"czg">
"lbox">
"text">FANART创作馆"r">更多"ijt">
"bbox">
"img\创作馆\258 (3).jpg">
"img\创作馆\258.jpg">
"img\创作馆\258 (1).jpg">
"img\创作馆\258 (2).jpg">
"img\创作馆\258 (4).jpg">
"img\创作馆\258 (5).jpg">
"img\创作馆\258 (6).jpg">
"img\创作馆\258 (7).jpg">
"rbox">
"md">
"img\创作馆\0.png">
"p1">
"inline-icon-1">
精品专栏
"inline-icon-1">
-
"img\创作馆\href-bg-2.webp">
"p2">
"inline-icon-1">
英雄联盟用户调查
-
"img\创作馆\href-bg-3.webp">
"p2">
"inline-icon-1">
见证版本历史
-
"img\创作馆\href-bg-4.webp">
"p2">
"inline-icon-1">
年度品牌展示
-
"img\创作馆\Snipaste_2022-07-22_14-52-46.png">
"db-bg">
"db">
"lbox">
"foot_ieg_logo">
"logo-riot">
- 腾讯互动娱乐|
服务条例|
隐私保护指引|
儿童隐私保护指引|
腾讯游戏招聘|
腾讯游戏客服|
游戏列表|
广告服务及商务合作
-
腾讯公版权所有
网络游戏行业防沉迷自律公约
-
COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.
-
COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.
- 本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。
-
"img\底部\gswj.png">
工商网电子标识|
粤网文[2022]3396-195号|
(署)网出证(粤)字第054号
-
批准文号：新出审字[2011]310号 |
文网进字[2011] 004号 |
出版物号：ISBN 978-7-89989-145-2|
全国文化市场统一举报电话：12318
"cbl">
- "rn-rmhd">
热门活动
- "rn-spzx">
视频中心
- "rn-sszx">
赛事中心
- "rn-yxtj">
英雄资料
- "rn-fanart">
FANART
- "rn-polo">
"img\底部\polo.gif">
顶部
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;