1.简介
我根据王者荣耀腾讯官方网站仿写的静态网站，
目录
2.HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀官方网站-腾讯游戏</title>
<link rel="stylesheet" href="css\index.css">
<link rel="stylesheet" href="css/font.css">
</head>
<body>
<!-- 腾讯游戏start -->
<div class="start">
<div class="m">
<div class="m-logo1"><img class="logo1" src="images\start\logo1.png" alt=""></div>
<div class="m-logo2"><img class="logo2" src="images\start\logo2.jpg" alt=""></div>
<div class="logo3"> <img src="images\start\logo3.jpg" alt=""></div>
<div class="con">
<span class="con-left">
<img class="green" src="images\start\和平.png" alt="">
成长守护平台</span>
<span class="con-right">腾讯游戏热门推荐
<img src="arrow.png" alt="">
</span>
</div>
<!-- 首页下拉菜单start -->
<div class="rank">
<div class="client">
<div class="title">客户端游戏</div>
<div class="list">
<div class="new com">
<div class="ico">
<div class="iconfont icon1">
<div class="icon-tag_hot"></div>
</div>
<h2>热门推荐</h2>
</div>
<ul class="new-box">
<li class="item">英雄联盟</li>
<li class="item">穿越火线</li>
<li class="item">地下城与勇士</li>
<li class="item">FIFA Online 4</li>
<li class="item">NBA2K Online2</li>
<li class="item">QQ飞车</li>
<li class="item">QQ炫舞</li>
<li class="item">QQ三国</li>
<li class="item">逆战</li>
<li class="item">天涯明月</li>
<li class="item">QQ炫舞2</li>
</ul>
</div>
<div class="new comm">
<div class="ico">
<div class="iconfont icon2">
<div class="icon-icon-news-home"></div>
</div>
<h2 class="q">新品推荐</h2>
</div>
<ul class="new-box">
<li class="item">无畏契约</li>
<li class="item">命运方舟</li>
<li class="item">晨昏线</li>
<li class="item">全境封锁2</li>
</div>
</div>
</div>
<div class="mobile">
<div class="title">手机游戏</div>
<div class="list">
<div class="new com">
<div class="ico">
<div class="iconfont icon1">
<div class="icon-tag_hot"></div>
</div>
<h2>热门推荐</h2>
</div>
<ul class="new-box">
<li class="item">王者荣耀</li>
<li class="item">王者荣耀</li>
<li class="item">和平精英</li>
<li class="item">暗区突围</li>
<li class="item">部落冲突</li>
<li class="item">穿越火线：枪战王者</li>
<li class="item">欢乐斗地主</li>
<li class="item">火影忍者手游</li>
<li class="item">金铲铲之战</li>
<li class="item">使命召唤手游</li>
<li class="item">天天象棋</li>
<li class="item">英雄联盟手游</li>
<li class="item">QQ飞车手游</li>
<li class="item">光与夜之恋</li>
</ul>
</div>
<ul class="new-box mid">
<li class="item">欢乐麻将</li>
<li class="item">皇室战争</li>
<li class="item">黎明觉醒：生机</li>
<li class="item">天天爱消除</li>
<li class="item">FIFA足球世界</li>
<li class="item">QQ炫舞手游</li>
<li class="item">重返帝国</li>
<li class="item">魂斗罗：归来</li>
<li class="item">剑侠情缘</li>
<li class="item">乱世王者</li>
<li class="item">天龙八部手游</li>
<li class="item">天涯明月刀手游</li>
<li class="item">完美世界</li>
<li class="item">妄想山海</li>
</ul>
<div class="new comm">
<div class="ico">
<div class="iconfont icon2">
<div class="icon-icon-news-home"></div>
</div>
<h2 class="q">新品推荐</h2>
</div>
<ul class="new-box box2">
<li class="item">合金弹头觉醒</li>
<li class="item">桃源深处有人家</li>
<li class="item">白夜极光</li>
<li class="item">王者荣耀世界</li>
<li class="item">塔瑞斯世界</li>
<li class="item">二之国：交错世界</li>
<li class="item">白荆回廊</li>
<li class="item">冲呀！饼干人</li>
<li class="item">大航海时代</li>
<li class="item">创造吧！</li>
<li class="item">卡拉彼丘</li>
</div>
</div>
</div>
</div>
<!-- 首页下拉菜单end -->
</div>
</div>
<!-- 腾讯游戏end -->
<!-- 首页下载悬浮窗start -->
<div class="fox">
<div class="dj">
<p>扫一扫，立刻</p>
<p class="dj-p">下载游戏~</p>
<ul class="dj-con">
<li class="web"><img src="images\code\webchat.jpg" alt="">
<p>下载游戏</p>
</li>
<li class="line">
<div class="iconfont icon1 ico">
<div class="icon-yingxiongxiangqing"></div>
</div>
<p>王者营地</p>
<div class="hide">
<img src="images\code\gzh_code.jpg" alt="">
<div class="hide-text">扫码
<span class="text1">下载王者营地</span>
<br>
每天
<span class="text1">领取福利好礼</span>
</div>
</div>
</li>
<li class="line">
<div class="iconfont icon1 ico">
<div class="icon-weibo">
</div>
<p>官方微博</p>
</div>
<div class="hide">
<img src="images\code\gzh_code.jpg" alt="">
<div class="hide-text">扫码
<span class="text1">下载官方微博</span>
<br>
获取
<span class="text1">一手爆料及福利</span>
</div>
</div>
</li>
<li class="line">
<div class="iconfont icon1 ico">
<div class="icon-weixin"></div>
<p>微信公众号</p>
</div>
<div class="hide">
<img src="images\code\gzh_code.jpg" alt="">
<div class="hide-text">扫码
<span class="text1">关注官方公众号</span>
<br>
获取
<span class="text1">最新咨询及好礼</span>
</div>
</div>
</li>
<li class="line">
<div class="iconfont icon1 ico">
<div class="icon-pageIcon_shipinjiangjie"></div>
<p>官方视频号</p>
</div>
<div class="hide">
<img src="images\code\gzh_code.jpg" alt="">
<div class="hide-text">扫码
<span class="text1">官方视频号</span>
<br>
获取
<span class="text1">精彩视频及福利</span>
</div>
</div>
</li>
<li class="line">
<p>官方体验调研</p>
</li>
</ul>
</div>
</div>
<!-- 首页下载悬浮窗end -->
<!-- 导航栏start -->
<div class="header">
<!-- 一级导航 -->
<div class="top">
<div class="king"><img src="images\nav\king.png" alt=""></div>
<ul class="top-nav">
<li>
<span>游戏资料
<em>DATA</em>
</span>
</li>
<li>
<span>内容中心
<em>CONTENTS</em>
</span>
</li>
<li>
<span>赛事中心
<em>MATCH</em>
</span>
</li>
<li>
<span>百态王者
<em>CULTURE</em>
</span>
</li>
<li>
<span>社区互动
<em>COMMUNITY</em>
</span>
</li>
<li>
<span>玩家支持
<em>PLAYER</em>
</span>
</li>
<li>
<span>IP新游
<em>NEW GAMES</em>
</span>
</li>
</ul>
<div class="register">
<div class="reg-img"><img src="images\nav\下载.png" alt=""></div>
<div class="reg-logo">
<a href="">欢迎登录</a>
<p>登录后查看游戏战绩</p>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="below">
<ul class="inner">
<li class="down-nav">
<ul class="angry">
<li>版本介绍</li>
<li>游戏介绍</li>
<li>英雄资料</li>
<li class="nav-hot"> <img class="hot-img" src="images\nav\hot.png" alt="">爆料站</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">世界观体验站</li>
<li>游戏壁纸</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li>攻略中心</li>
<li>开放素材库</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">内容共创平台</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">手语打法参考</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">KPL</li>
<li>K甲联赛</li>
<li>世界冠军杯</li>
<li>挑战者杯</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">全国大赛</li>
<li>女子公开赛</li>
<li>高校联赛</li>
<li>王者赛宝</li>
<li>赛事数据</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li>荣耀·传承</li>
<li>王者文化站</li>
<li>万千世界</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">王者绝悟</li>
<li>星光殿堂</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">IP共创计划</li>
<li>商户特权</li>
<li>龙翼王者卡</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">创意互动营</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">王者营地</li>
<li>微信圈子</li>
<li>官方微博</li>
<li>微信公众号</li>
<li>手Q订阅号</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li>腾讯游戏防沉迷</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\circle.png" alt="">成长守护平台</li>
<li>对局环境情报站</li>
<li>客服专区</li>
<li>礼包兑换</li>
<li>自助服务</li>
</ul>
</li>
<li class="down-nav">
<ul class="angry">
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">王者荣耀·世界</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">王者荣耀 星之破晓</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">代号:启程</li>
<li class="nav-hot"><img class="hot-img" src="images\nav\hot.png" alt="">王者万象棋</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 导航栏end -->
<!-- 版心内容start -->
<div class="warp">
<div class="bg"><img src="images\start\bg.jpg" alt=""></div>
<div class="main">
<!-- 下载游戏 start-->
<div class="main-top">
<div class="rotate">
<div class="img-box">
<div class="slideshow">
<img id="banner01" src="images\content\one.jpeg" alt="">
<img id="banner02" src="images\content\two.jpeg" alt="">
<img id="banner03" src="images\content\three.jpeg" alt="">
<img id="banner04" src="images\content\four.jpeg" alt="">
<img id="banner05" src="images\content\five.jpeg" alt="">
</div>
</div>
<div class="link">
<a href="">夏日主题曲</a>
<a href="">皮肤设计灵感大片</a>
<a href="">亚连英雄故事</a>
<a href="">英雄练习场更新</a>
<a href="">K甲大侦探</a>
</div>
</div>
<div class="middle">
<div class="center">
<ul class="tab">
<li>热门</li>
<li class="on">新闻</li>
<li>公告</li>
<li>活动</li>
<li>赛事</li>
<li class="ending">...</li>
</ul>
<div class="black">
<div class="black-box">
<!-- 第一个 -->
<ul class="black-one">
<li class="black-top">2023周年庆道具活动大...</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">QQ×王者荣耀夏日妄想大作战开启！来QQ！瓜分现金红包！</span>
<em class="b-right">07/28</em>
</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">大乔星梦星元技能特效研讨开启</span>
<em class="b-right">07/26</em>
</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">王者荣耀 x BVLGARI宝格丽跨界联名合作</span>
<em class="b-right">07/27</em>
</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">公告7月6日全服不停机更新公告</span>
<em class="b-right">07/26</em>
</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">星梦星元皮肤名称票选结果公布</span>
<em class="b-right">07/26</em>
</li>
<li>
<span class="b-left">热门</span>
<span class="b-center">蒙犽源·梦皮肤海报票选结果公布</span>
<em class="b-right">07/25</em>
</li>
<li>
<span class="b-left">新闻</span>
<span class="b-center">热门“帝星之夜”，海量福利！</span>
<em class="b-right">07/25</em>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="download">
<div class="d-top"></div>
<div class="d-center"></div>
<div class="d-below"></div>
</div>
<div class="game">
<img src="images\content\12.png" alt="">
<img class="game-two" src="images\content\forbit.png" alt="">
</div>
</div>
<!-- 下载游戏end -->
<!-- 英雄介绍start -->
<div class="super">
<div class="s"><img src="images\content\super1.jpg" alt=""></div>
<div class="s"><img src="images\content\super2.png" alt=""></div>
<div class="s"><img src="images\content\super3.jpg" alt=""></div>
<div class="s"><img class="img4" src="images\content\super4.png" alt=""></div>
</div>
<div class="content">
<div class="c-left">
<div class="c-header">
<div class="header-l">
<div class="iconfont icon1">
<div class="icon-pintu"></div>
</div>
<p>内容中心</p>
</div>
<div class="header-r">
<div class="iconfont icon1">
<div class="icon-ZoomIn"></div>
</div>
<p>更多</p>
</div>
</div>
<div class="c-center">
<a href="" class="a1">精品栏目</a>
<span class="easy e1" ></span>
<a href="" class="a2">赛事精品</a>
<span class="easy e2"></span>
<a href class="a3">英雄攻略</a>
</div>
<div class="seven">
<span>最新</span>
<span>峡谷大气层</span>
<span>马菠萝奇闻录</span>
<span>狄仁杰封神榜</span>
<span>游走基本法</span>
<span>野王修炼手册</span>
<span>法王的荣耀</span>
</div>
<div class="elect">
<ul class="ele-box">
<li>
<img src="images\superhero\super (1).jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang">
</div>
</div>
<p class="digi">5720</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第90期 锁定透视 守护峡谷草丛！</p>
</li>
<li>
<img src="images\superhero\super (2).jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">1.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第89期 锁定透视 守护峡谷草丛！</p>
</li>
<li>
<img src="images\superhero\super (5).jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">6501</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第88期 无视野锁定 峡谷“爱你”科技版</p>
</li>
<li>
<img src="images\superhero\super (6).png" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">1.7万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第87期 精准飞扇空气？黑科技已被锁定</p>
</li>
<li>
<img src="images\superhero\super.jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">2.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">英雄玩法介绍——莱西奥：来看一场完美的日落海烟花秀吗？</p>
</li>
<li>
<img src="images\superhero\super.png" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">3.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">赵怀真英雄玩法介绍——长安新话本《云大将军的小跟班》</p>
</li>
<li>
<img src="images\superhero\super(3).jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">5.8万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【核心定位】赵怀真</p>
</li>
<li class="ele-li">
<img src="images\superhero\super(4).jpg" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">7.8万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">戈娅进阶篇一一发育意识及相关知识</p>
</li>
</ul>
</div>
</div>
<div class="c-right">
<div class="super-top">
<div class="header-l">
<div class="iconfont icon1">
<div class="icon-yingxiongxiangqing"></div>
</div>
<p>英雄/皮肤</p>
</div>
<div class="header-r">
<div class="iconfont icon1">
<div class="icon-ZoomIn"></div>
</div>
<p>更多</p>
</div>
</div>
<div class="super-center">
<a class="j1">最新英雄</a>
<span class="easy eas1"></span>
<a class="j2">最新皮肤</a>
<span class="easy eas2"></span>
<a class="j3">周免英雄</a>
</div>
<div class="new-super">
<div class="new-top">
<div class="new-img">
<img src="images\new-super\514.webp" alt="">
</div>
<div class="new-content">
<p class="hero_name">新英雄：亚连</p>
<p class="hero-day">上线时间：2023.06.27</p>
</div>
<div class="hero-four">
<img src="images\new-super\521.webp" alt="">
<img class="hero-2" src="images\new-super\544.webp" alt="">
<img class="hero-3" src="images\new-super\545.webp" alt="">
<img class="hero-j" src="images\new-super\564.webp" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- 赛事中心，KPL赛程start -->
<div class="two-part">
<div class="match">
<div class="c-header">
<div class="header-l">
<div class="iconfont icon1">
<div class="icon-qizi"></div>
</div>
<p>赛事中心</p>
</div>
<div class="header-r">
<div class="iconfont icon1">
<div class="icon-ZoomIn"></div>
</div>
<p>更多</p>
</div>
</div>
<div class="six">
<div class="h">
<a href="">KPL</a>
<span></span>
<a href="">世界冠军杯</a>
<span></span>
<a href="">挑战者杯</a>
<span></span>
<a href="">甲联盟</a>
<span></span>
<a href="">全国大赛</a>
<span></span>
<a href="">高效联赛</a>
</div>
</div>
<div class="match-news">
<div class="match-l">
<img src="images\kpl\go.jpg" alt="">
</div>
<div class="match-r">
<ul class="match-boxs">
<li calss="going">
<p class="big">该我上场！2023年KPL王者荣耀职业联赛夏季赛热血揭幕</p>
<p class="bit">该我上场！2023年KPL王者荣耀职业联赛夏季赛热血揭幕</p>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">2023年KPL王者荣耀职业联赛夏季赛选手大名单公布</span>
<em class="b-right">06/09</em>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">2023年KPL王者荣耀职业联赛夏季赛常规赛第一轮赛程</span>
<em class="b-right">06/09</em>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">王者荣耀职业联赛（KPL）2023夏季赛赛事规则</span>
<em class="b-right">06/06</em>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">AutoFull傲风成为2023年KPL官方指定电竞椅</span>
<em class="b-right">04/28</em>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">2023KPL春季赛常规赛第二轮赛程及售票信息公布</span>
<em class="b-right">03/07</em>
</li>
<li>
<span class="b-left">KPL</span>
<span class="b-center">23KPL春季赛常规赛第一轮门票将于2月3日12：00开售！</span>
<em class="b-right">02/02</em>
</li>
</ul>
</div>
</div>
<div class="elect">
<ul class="ele-box">
<li>
<img src="images\eight\640 (1).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang">
</div>
</div>
<p class="digi">5720</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第90期 锁定透视 守护峡谷草丛！</p>
</li>
<li>
<img src="images\eight\640 (2).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">1.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第89期 锁定透视 守护峡谷草丛！</p>
</li>
<li>
<img src="images\eight\640 (3).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">6501</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第88期 无视野锁定 峡谷“爱你”科技版</p>
</li>
<li>
<img src="images\eight\640 (4).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">1.7万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【狄仁杰封神榜】第87期 精准飞扇空气？黑科技已被锁定</p>
</li>
<li>
<img src="images\eight\640 (5).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">2.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">英雄玩法介绍——莱西奥：来看一场完美的日落海烟花秀吗？</p>
</li>
<li>
<img src="images\eight\640 (6).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">3.2万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">赵怀真英雄玩法介绍——长安新话本《云大将军的小跟班》</p>
</li>
<li>
<img src="images\eight\640 (7).webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">5.8万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">【核心定位】赵怀真</p>
</li>
<li class="ele-li">
<img src="images\eight\640.webp" alt="">
<div class="ele-mid">
<div class="iconfont icon1">
<div class="icon-bofang"></div>
</div>
<p class="digi">7.8万</p>
</div>
<div class="ele-hide">
<div class="iconfont icon1">
<div class="icon-zhongbo">
</div>
</div>
</div>
<p class="ele-below">戈娅进阶篇一一发育意识及相关知识</p>
</li>
</ul>
</div>
</div>
<div class="kpl">
<div class="kpl-top">
<div class="header-l">
<div class="iconfont icon1">
<div class="icon-biaodan"></div>
</div>
<p>KPL赛程</p>
</div>
<div class="header-l">
<div class="iconfont icon1">
<div class="icon-qian"></div>
</div>
<p>购票</p>
</div>
<div class="header-r abb">
<div class="iconfont icon1">
<div class="icon-ZoomIn"></div>
</div>
<p>更多</p>
</div>
</div>
<div class="kpl-three">
<span class="k-a">时间</span>
<span class="k-a">战队</span>
<span class="k-b"></span>
<span class="k-a">战队</span>
</div>
<div class="kpl-content">
<ul >
<li class="kpl-t">
<span class="time">8-1 14:00</span>
<span class="team">
<img src="images\match\m1.png" alt="">
<p>杭州LGD</p>
</span>
<span class="vs">VS</span>
<span class=" team2">
<img src="images\match\m2.png" alt="">
<p>济南RW侠</p>
</span>
</li>
<li class="kpl-t">
<span class="time">8-1 14:00</span>
<span class="team">
<img src="images\match\m1.png" alt="">
<p>杭州LGD</p>
</span>
<span class="vs">VS</span>
<span class=" team2">
<img src="images\match\m2.png" alt="">
<p>济南RW侠</p>
</span>
</li>
<li class="kpl-t">
<span class="time">8-1 14:00</span>
<span class="team">
<img src="images\match\m1.png" alt="">
<p>杭州LGD</p>
</span>
<span class="vs">VS</span>
<span class=" team2">
<img src="images\match\m2.png" alt="">
<p>济南RW侠</p>
</span>
</li>
<li class="kpl-t">
<span class="time">8-1 14:00</span>
<span class="team">
<img src="images\match\m1.png" alt="">
<p>杭州LGD</p>
</span>
<span class="vs">VS</span>
<span class=" team2">
<img src="images\match\m2.png" alt="">
<p>济南RW侠</p>
</span>
</li>
</ul>
<img src="images\match\match.webp" alt="">
</div>
</div>
</div>
<!-- 赛事中心，KPL赛程end -->
</div>
</div>
<footer class="footer">
<div class="w" >
<div class="w-top">
<div class="tencent-left"></div>
<div class="tencent-right"></div>
</div>
<div class="w-below">
<div class="w-l">
<p><em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
</p>
<p class="intro">《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
</div>
<div class="w-r">
<p>腾讯互动娱乐timi
腾讯互动娱乐|服务条款|王者荣耀隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作</p>
<p class="eng">
<span>COPYRIGHT © 1998 - 2023 TENCENT. ALL RIGHTS RESERVED.</span>
<span>腾讯公司版权所有网络游戏行业防沉迷自律公约</span>
</p>
<p><img src="images\footer\red.webp" alt="">工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</p>
<p><img src="images\footer\blue.webp" alt="">文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN 978-7-7979-8408-9</p>
<p>全国文化市场统一举报电话：12318</p>
</div>
</div>
</div>
</footer>
</body>
</html>3.CSS部分
font.css
@font-face {
font-family: "iconfont";
/* Project id 4188453 */
src: url('//at.alicdn.com/t/c/font_4188453_wdfbpc5lgs.woff2?t=1690589793797') format('woff2'),
url('//at.alicdn.com/t/c/font_4188453_wdfbpc5lgs.woff?t=1690589793797') format('woff'),
url('//at.alicdn.com/t/c/font_4188453_wdfbpc5lgs.ttf?t=1690589793797') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-weixin:before {
content: "\e600";
}
.icon-xiangshangjiantou:before {
content: "\e65d";
}
.icon-xiangxiajiantou:before {
content: "\e65e";
}
.icon-xiangyoujiantou:before {
content: "\e65f";
}
.icon-xiangzuojiantou:before {
content: "\e660";
}
.icon-weibo:before {
content: "\e65a";
}
.icon-qizi:before {
content: "\e651";
}
.icon-huiyuan:before {
content: "\e608";
}
.icon-qian:before {
content: "\e783";
}
.icon-yibiaopan_o:before {
content: "\ebc6";
}
.icon-Euro-:before {
content: "\e6da";
}
.icon-tubiaozhuanqu_xintiantichengren:before {
content: "\e63d";
}
.icon-pintu:before {
content: "\e707";
}
.icon-lingerie:before {
content: "\ee37";
}
.icon-icon_struc_unfold_h:before {
content: "\e601";
}
.icon-tag_hot:before {
content: "\e630";
}
.icon-yingxiongxiangqing:before {
content: "\e60a";
}
.icon-pageIcon_shipinjiangjie:before {
content: "\e6af";
}
.icon-icon-news-home:before {
content: "\e679";
}
.icon-autohotkey:before {
content: "\e606";
}
.icon-title:before {
content: "\e857";
}
.icon-aixin:before {
content: "\e650";
}
.icon-bofang:before {
content: "\e652";
}
.icon-biaodan:before {
content: "\e653";
}
.icon-chanpin:before {
content: "\e654";
}
.icon-dianzanmian:before {
content: "\e655";
}
.icon-jingyinmian:before {
content: "\e65b";
}
.icon-sousuo:before {
content: "\e661";
}
.icon-xianshi:before {
content: "\e664";
}
.icon-zanting:before {
content: "\e667";
}
.icon-zhongbo:before {
content: "\e668";
}
.icon-time:before {
content: "\e602";
}
.icon-ZoomIn:before {
content: "\e603";
}
.icon-Rank:before {
content: "\e604";
}index.css
* {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
.start {
width: 100%;
height: 41px;
background-color: white;
}
.m {
width: 1020px;
height: 41px;
margin: 0 auto;
}
.logo1 {
width: 150px;
height: 41px;
}
.logo2 {
width: 230px;
height: 40px;
}
.logo3 {
position: absolute;
z-index: 887;
}
.m-logo1,
.m-logo2 {
float: left;
height: 41px;
position: relative;
z-index: 888;
}
.con {
position: relative;
float: right;
height: 41px;
width: 300px;
line-height: 41px;
font-size: 14px;
color: #afafaf;
z-index: 888;
}
.con span {
padding-left: 20px;
}
.green {
position: absolute;
top: 10px;
left: -20px;
width: 22px;
height: 22px;
}
.con :hover {
color: red;
cursor: pointer;
}
.logo3 {
position: absolute;
top: 0;
width: 970px;
height: 185px;
display: none;
}
.m-logo2:hover+.logo3 {
display: block;
}
.con:hover+.rank {
height: 658px;
display: block;
}
.rank {
position: relative;
width: 1020px;
height: 658px;
height: 0;
background-color: #f5f5f5;
margin: 0 auto;
top: 41px;
display: none;
z-index: 9999;
transition: .8s;
}
.client {
position: absolute;
width: 373px;
height: 100%;
}
.mobile {
position: absolute;
right: 0;
top: 0;
width: 647px;
height: 100%;
}
.title {
position: relative;
height: 54px;
font-weight: 500;
line-height: 54px;
font-size: 18px;
padding-left: 25px;
margin-left: 73px;
color: #AFB7BF;
border-right: 1px solid #EDF1F5;
}
.list {
height: 604px;
}
.ico .iconfont {
width: 30px;
float: left;
}
.ico {
position: relative;
width: 200px;
}
.com .ico h2 {
color: #FF3C6A;
padding-left: 38px;
border-top: 1px solid #EDF1F5;
}
.comm .ico h2 {
color: #FF3C6A;
padding-left: 38px;
border-top: 1px solid #EDF1F5;
}
.new .ico .q {
color: #13CAC5;
}
.new {
background-color: white;
border-right: 1px solid #EDF1F5;
}
.new-box {
float: left;
height: 100%;
}
.com {
float: left;
width: 200px;
height: 100%;
}
.comm {
float: right;
width: 173px;
height: 100%;
}
.icon-tag_hot,
.icon-icon-news-home {
font-size: 20px;
position: relative;
top: 10px;
left: 16px;
}
.item {
color: #868B90;
font-size: 16px;
cursor: pointer;
width: 100%;
height: 40px;
padding-left: 30px;
padding-top: 10px;
}
.mid {
padding-top: 32px;
width: 274px;
border-right: 1px solid #EDF1F5;
background-color: white;
}
.new-box .item:hover {
color: black;
}
.header {
width: 100%;
height: 84px;
background-color: #000;
opacity: .8;
}
.top {
position: relative;
width: 1300px;
height: 84px;
margin: 0 auto;
}
.king {
position: absolute;
width: 200px;
height: 54px;
left: 0;
top: 16px;
}
.top-nav {
position: absolute;
width: 890px;
height: 84px;
left: 230px;
}
.top-nav li {
float: left;
width: 114px;
height: 84px;
text-align: center;
}
.top-nav li span {
display: block;
width: 110px;
height: 64px;
padding: 20px 0 0;
color: #c9c9dd;
line-height: 30px;
text-align: center;
}
.top-nav li span em {
display: block;
padding-top: 5px;
line-height: 16px;
font-size: 12px;
color: #858792;
}
.register {
position: absolute;
height: 84px;
width: 180px;
right: 0;
top: 0;
}
.reg-img {
position: absolute;
top: 15px;
float: left;
width: 44px;
border-radius: 42px;
/* margin-right: 7px; */
}
.reg-logo {
position: absolute;
top: 20px;
right: 0px;
float: right;
width: 130px;
}
.img4{
float: right;
}
.reg-logo a {
color: #ffffff;
font-size: 16px;
}
.reg-logo {
font-size: 14px;
color: #858792;
}
.below {
position: relative;
width: 100%;
height: 0;
background-color: #000;
transition: all 3s ease;
z-index: 888;
transition: .4s;
overflow: hidden;
}
.header :hover+.below {
display: block;
height: 285px;
background-color: rgb(0, 0, 0, .7);
}
.header .below:hover{
height: 285px;
display: block;
background-color: rgb(0, 0, 0, .7);
}
.below:hover {
display: block;
}
.inner {
width: 890px;
height: 240px;
margin: 0 auto;
position: relative;
left: 14px;
text-align: center;
}
.inner .down-nav {
float: left;
width: 115px;
padding: 12px 2.5px 0;
color: #c9c9dd;
font-size: 14px;
}
.nav-hot {
position: relative;
}
.hot-img {
position: absolute;
left: -4px;
width: 17px;
height: 17px;
}
.angry li {
height: 24px;
width: 120px;
}
.angry li:hover {
color: #f3c258;
}
.warp {
position: relative;
width: 100%;
height: 2300px;
/* z-index: -2; */
}
.warp .bg {
position: absolute;
width: 100%;
top: -79px;
z-index: -3;
}
.bg img {
width: 100%;
height: 100%;
}
.main {
position: relative;
width: 1200px;
padding-top: 450px;
margin: 0 auto;
}
.main-top {
width: 1200px;
height: 342px;
background-color: #333333;
}
.rotate {
position: relative;
float: left;
width: 605px;
height: 342px;
}
.middle {
float: left;
width: 359px;
height: 342px;
overflow: hidden;
padding: 0 17px;
background-color: #323235;
}
.match-boxs li em,.black-one li em{
font-size: 12px;
}
.tab li:hover{
border-bottom: 3px solid #f3c258;
}
.img-box {
width: 605px;
height: 298px;
overflow: hidden;
}
.link a {
position: relative;
top: 0px;
float: left;
display: block;
height: 44px;
width: 120.8px;
line-height: 44px;
cursor: pointer;
text-align: center;
color: #b1b2be;
font-size: 14px;
background-color: #262626;
}
.rotate .link a:hover {
color: #f3c258;
}
.slideshow {
height: 298px;
overflow: hidden;
position: relative;
}
.slideshow img {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow img:first-child {
opacity: 1;
}
@keyframes slideshowAnimation {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33.3% {
opacity: 1;
}
53.33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow img:nth-child(1) {
animation: slideshowAnimation 10s infinite;
}
.slideshow img:nth-child(2) {
animation: slideshowAnimation 10s infinite 2s;
}
.slideshow img:nth-child(3) {
animation: slideshowAnimation 10s infinite 4s;
}
.slideshow img:nth-child(4) {
animation: slideshowAnimation 10s infinite 6s;
}
.slideshow img:nth-child(5) {
animation: slideshowAnimation 10s infinite 8s;
}
.center {
position: relative;
width: 325px;
margin: auto;
}
.tab {
position: absolute;
z-index: 33;
border-bottom: 1px solid black;
}
.tab .on {
border-bottom: 3px solid #f3c258;
}
.tab li {
height: 48px;
color: white;
float: left;
width: 52px;
font-size: 14px;
text-align: center;
line-height: 45px;
padding-bottom: 3px;
}
.black {
position: relative;
left: -17px;
bottom: -48px;
width: 325px;
height: 294px
}
.black-one {
height: 294px;
}
.black-top {
position: relative;
width: 294px;
height: 36px;
line-height: 21px;
color: #f3c258;
font-size: 26px;
background-color: #414046;
bottom: -9px;
margin-left: 15px;
}
.black .black-box ul li {
margin-bottom: 11px;
padding-top: 10px;
}
.b-left {
color: #1e96ab;
float: left;
border: 1px solid #1e96ab;
width: 32px;
text-align: center;
border-radius: 2px;
font-size: 12px;
}
.black-box{
padding-left: 17px;
}
.b-center {
float: left;
width: 230px;
color: white;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.b-right {
position: relative;
right: -16px;
color: #999;
font-size: 14px;
}
.black-one {
position: relative;
top: -8px;
}
.download {
float: left;
width: 236px;
height: 342px;
}
.d-top {
width: 236px;
height: 128px;
background: url(../images/content/download.png) no-repeat;
background-position: 0 -219px;
}
.d-center {
width: 236px;
height: 106px;
background: url(../images/content/download.png) no-repeat;
background-position: 0 -350px;
}
.d-below {
width: 236px;
height: 108px;
background: url(../images/content/download.png) no-repeat;
background-position: 0 -461px;
}
.game {
position: absolute;
right: -27px;
width: 55px;
height: 68px;
}
.game .game-two {
width: 53px;
height: 47px;
}
.super {
position: relative;
top: 30px;
height: 134px;
width: 1200px;
}
.super .s {
display: inline-block;
width: 296px;
height: 134px;
overflow: hidden;
}
.super .s img {
transition: transform .4s ease;
}
.s:hover img {
transform: scale(1.2);
}
.fox {
position: fixed;
margin-top: -240px;
width: 254px;
height: 494px;
background: url(../images/content/leaf.png ) no-repeat;
z-index: 88888;
right: 0;
top: 50%;
}
.dj {
position: absolute;
top: 15px;
left: 24px;
z-index: 88888;
width: 165px;
height: 145px;
background: url(../images/content/dj.png ) no-repeat;
}
.dj p {
display: block;
position: absolute;
top: 37px;
left: 12px;
width: 88px;
height: 36px;
font-size: 14px;
font-weight: bold;
text-indent: 2px;
}
.fox .dj-p {
top: 57px;
}
.dj-con {
position: absolute;
top: 146px;
left: 63px;
}
.web {
width: 117px;
height: 132px;
background-position: -243px 0;
background-color: #d28b3d;
color: white;
}
.web img {
width: 110px;
height: 107px;
position: relative;
left: 4px;
top: 6px;
}
.web p {
width: 110px;
height: 14px;
position: absolute;
top: 112px;
left: 30px;
}
.line {
position: relative;
width: 117px;
height: 38px;
opacity: 0.6;
background-color: #000;
}
.icon-weixin,
.icon-weibo,
.icon-yingxiongxiangqing {
font-size: 23px;
color: white;
}
.icon-pageIcon_shipinjiangjie {
font-size: 30px;
color: white;
}
.line .ico {
width: 40px;
}
.line p {
position: absolute;
color: #fff;
top: 3px;
left: 22px;
position: absolute;
text-align: center;
opacity: 0.8;
}
.hide {
position: absolute;
top: -66px;
left: -116px;
height: 144px;
width: 115px;
display: none;
}
.line:hover .hide{
display: block;
}
.hide img {
position: relative;
left: 14px;
width: 100px;
height: 100px;
}
.hide-text {
position: relative;
left: 14px;
height: 44px;
font-size: 12px;
color: #dcdcdc;
}
.hide-text .text1 {
color: #cd974b;
opacity: 1;
position: relative;
z-index: 8888;
}
.content{
position: relative;
top: 60px;
width: 1200px;
height: 554px;
}
.c-left{
float: left;
width: 872px;
height: 528px;
}
.c-right{
float: right;
width: 294px;
height: 528px;
}
.c-header{
width: 872px;
height: 26px;
margin-bottom: 16px;
}
.icon-pintu{
font-size: 26px;
}
.header-l{
width: 140px;
float: left;
font-weight: 400;
}
.header-r{
position: relative;
left: -32px;
width: 50px;
float: right;
}
.header-l p{
position: relative;
top: -27px;
left: 30px;
font-size: 21px;
}
.header-r p {
position: relative;
right: -26px;
top: -23px;
font-size: 18px;
}
.icon-ZoomIn{
font-size: 22px;
color: #d28b3d;
}
.header-r p:hover{
color: #cd974b;
}
.c-center{
width: 872px;
height: 32px;
background-color:#f5f5f5;
margin-bottom: 5px;
}
.c-center a{
position: absolute;
display: inline-block;
width: 287px;
font-size: 14px;
color: #999;
font-size: 14px;
text-align: center;
}
.c-center a:hover{
border-bottom: 3px solid #f3c258;
}
.a1{
left: 0;
}
.a2{
left: 288px;
}
.a3{
right: 333px;
}
.easy{
position:absolute;
width: 1px;
height: 20px;
background-color: #e1e1e1;
}
.e1{
left: 288px;
}
.e2{
left: 577px;
}
.seven{
width: 872px;
height: 65px;
text-align: center;
line-height: 65px;
}
.seven span{
position: relative;
left: -57px;
height: 24px;
line-height: 24px;
padding: 0 13px 0 8px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background-color: #f5f5f5;
font-size: 14px;
color: #333;
margin-right: 8px;
}
.seven span:hover{
background-color: #f3c258;
color: white;
}
.elect{
width: 872px;
height: 410px;
}
.elect ul li{
float: left;
height: 175px;
width: 209px;
margin-right: 9px;
}
.elect ul li img{
width: 209px;
height: 125px;
}
.icon-bofang{
color: white;
}
.ele-mid{
position: relative;
top: -27px;
width: 209px;
height: 22px;
background-color: #000;
opacity: 0.5;
}
.ele-below{
position: relative;
top: -70px;
font-size: 14px;
}
.digi{
position: relative;
top: -15px;
left: 20px;
color: white;
font-size: 12px;
}
.icon-zhongbo{
font-size: 50px;
color: white;
position: relative;
left: 87px;
top: -110px;
}
.ele-box li img:hover{
opacity: .4;
}
.super-top{
height: 26px;
margin-bottom: 16px;
}
.super-center{
line-height: 29px;
height: 32px;
width: 293px;
background-color: #f5f5f5;
margin-bottom: 19px;
position: relative;
}
.super-center a{
display: block;
float: left;
width: 97px;
top: -3px;
font-size: 14px;
color: #999;
font-size: 14px;
text-align: center;
}
.super-center .easy{
width: 1px;
height: 20px;
background-color: #e1e1e1;
margin: 5px 0 0px;
}
.j1,.j2,.j3,.res1,.res2{
position: absolute;
}
.j2{
left: 105px;
}
.j3{
left: 200px;
}
.eas1{
left: 103px;
}
.eas2{
left: 198px;
}
.super-center a:hover{
border-bottom: 3px solid #f3c258;
color: #333333;
}
.new-super{
width: 295px;
height: 419px;
}
.new-top{
width: 294px;
height: 224px;
border-radius: 2px;
margin-bottom: 10px;
}
.new-content{
height: 47px;
border: 1px solid #e5e5e5;
padding: 10px 15px;
border-radius: 0 0 2px 2px;
}
.hero-name{
font-size: 18px;
color: #333333;
font-weight: bold;
}
.hero-day{
color: #999999;
font-size: 12px;
}
.hero-four{
height: 295px;
height: 185px;
}
.hero-j{
float: right;
}
.hero-2,.hero-3{
padding-left: 3px;
}
.two-part{
position: relative;
top: 40px;
width: 1200px;
height: 778px;
}
.match{
float: left;
width: 872px;
height: 778px;
margin-right: 33px;
}
.kpl{
position: relative;
width: 295px;
height: 778px;
float: right;
}
.icon-qizi{
font-size: 24px;
}
.six{
width: 872px;
height: 32px;
line-height: 29px;
margin-bottom: 19px;
}
.six a{
display: block;
float: left;
padding: 0 18px;
font-size: 14px;
color: #999;
text-align: center;
border-bottom:3px solid #f5f5f5 ;
}
.six span{
width: 1px;
height: 20px;
float: left;
background-color: #e1e1e1;
margin:5px 0 0px;
}
.h{
position: relative;
left: -120px;
}
.six .h :hover{
border-bottom: 3px solid #f3c258;
color: #333333;
}
.match-news{
width: 872px;
height: 260px;
margin-bottom: 15px;
}
.match-l{
float: left;
}
.match-r{
width: 630px;
height: 260px;
float: right;
}
.match-boxs{
width: 630px;
}
.going{
width: 577px;
height: 66px;
line-height: 32px;
}
.match-r ul li .big{
width: 577px;
font-size: 24px;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.match-r ul li .bit{
line-height: 23px;
font-size: 14px;
color: #666666;
width: 450px;
}
.match-r .match-boxs li .b-left{
font-size: 12px;
background-color: #e3e3e3;
border-radius: 10px;
border: 2px solid #e3e3e3;
color: #999999;
}
.match-r .match-boxs li .b-center{
width: 470px;
color: #333;
}
.match-r .match-boxs li .b-right{
position: relative;
right: -75px;
color: #b8b9c5;
}
.match-r .match-boxs li {
margin-bottom: 11px;
}
.kpl-top{
height: 24px;
margin-bottom: 16px;
background-color: white;
}
.icon-qian,.icon-biaodan{
font-size: 21px;
}
.kpl .kpl-top .abb{
position: absolute;
right: 0;
left: 220px;
}
.kpl-three{
position: relative;
width: 293px;
height: 32px;
background-color: #f5f5f5;
/* line-height: 29px; */
}
.k-a{
display: block;
width: 83px;
float: left;
font-size: 14px;
color: #999;
text-align: center;
}
.k-b{
float: left;
height: 32px;
width: 43px;
height: 29px;
}
.kpl-content{
width: 295px;
height: 271px;
}
.kpl-content ul{
margin-bottom: 21px;
}
.kpl-content ul li{
height: 67px;
line-height: 67px;
border-bottom: 1px solid #e5e5e5;
}
.team img ,.team2 img{
position: relative;
top: -5px;
left: 28px;
width: 25px;
height: 25px;
border-radius: 50%;
}
.kpl-t{
width: 295px;
height: 271px;
position: relative;
}
.kpl-content ul li span{
display: inline-block;
}
.time{
position: absolute;
left: 0;
width: 80px;
height: 67px;
font-size: 12px;
text-align: center;
color: #333333;
}
.team{
position: absolute;
left: 80px;
width: 79px;
height: 67px;
}
.team2{
position: absolute;
right: 0px;
width: 79px;
height: 67px;
}
.team2 p {
position: relative;
top: -50px;
font-size: 12px;
text-align: center;
width: 79px;
height: 30px;
}
.team p{
position: relative;
top: -50px;
font-size: 12px;
text-align: center;
width: 79px;
height: 30px;
}
.vs{
position: absolute;
right: 79px;
font-size: 14px;
width: 57px;
color: #f3c258;
text-align: center;
}
.footer{
width: 100%;
height: 362px;
max-width: 1637px;
margin: 0 auto;
background: url(../images/bg_footer.webp);
}
.w{
position: relative;
width: 1200px;
height: 362px;
margin: 0 auto;
font-size: 12px;
color: #666;
}
.w-top{
top: 30px;
position: absolute;
width: 1200px;
height: 78px;
border-bottom: 2px solid #d4d4d4;
}
.tencent-left{
display: inline-block;
height: 64px;
width: 286px;
background: url(../images/footer/spr.webp);
}
.tencent-right{
display: inline-block;
height: 64px;
width: 80px;
background: url(../images/footer/spr.webp) no-repeat -285px 0;
}
.w-below {
top: 130px;
position: absolute;
width: 1200px;
height: 180px;
}
.w-l{
float: left;
width: 500px;
height: 180px;
}
.w-r{
float: right;
width: 650px;
height: 180px;
}
.w-l p em{
display: inline-block;
height: 20px;
padding-left: 10px;
}
.eng{
padding-top: 10px;
}
扫一扫
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
