html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>英雄联盟官网</title>
</head> <body>
<div class="header">
<div class="logo jingling"></div>
<ul class="bo">
<li>游戏资料<br /><span>GAME INFO</span></li>
<li>商城/合作<br /><span>STORE</span></li>
<li>用户互动<br /><span>COMMUNITY</span></li>
<li>赛事中心<br /><span>EVENTS</span></li>
<li>自助系统<br /><span>SYSTEM</span></li>
</ul>
<div class="search jingling"></div>
<div class="phone jingling"></div>
<div class="person jingling">
<img src="images/peron.png" alt="" />
</div>
<p class="login">
亲爱的召唤师，欢迎
<a href="https://lol.qq.com/main.shtml" target="_blank">登录</a><br />
<span>登录后查看自己的战绩、资产、声望值等</span>
</p>
</div>
<div class="text1">
<p>
当前游戏版本：<span>Ver 7.19</span>
<a href="http://lol.qq.com/gicp/news/410/36972651.html" target="_blank">版本详情</a>
</p>
</div>
<ul class="text2">
<li>
<a href="">综合资讯</a>
</li>
<li>
<a href="">视频中心</a>
</li>
<li>
<a href="">赛事中心</a>
</li>
<li>
<a href="">活动中心</a>
</li>
</ul>
<div class="text3">
<div class="text3_left">
<img src="images/img01.jpg" alt="" />
<ul>
<li>
<a href="">魔法引擎上线</a>
</li>
<li>
<a href="">总决赛卡片收集</a>
</li>
<li>
<a href="">13点WE与TSM复仇战</a>
</li>
<li>
<a href="">制胜法则第四期</a>
</li>
<li>
<a href="">《绽火·狂澜》</a>
</li>
</ul>
</div>
<div class="text3_right">
<img src="images/video-img.png" alt="" />
<ul>
<li>
<div class="jingling text3_jingling j_01"></div>
<a href="">新手推荐</a>
</li>
<li>
<div class="jingling text3_jingling j_02"></div> <a href="">宇宙官网</a>
</li>
<li>
<div class="jingling text3_jingling j_03"></div>
<div class="jingling j_red"></div>
<a href="">周边商城</a>
</li>
<li>
<div class="jingling text3_jingling j_04"></div>
<div class="jingling j_green"></div>
<a href="">新客户端</a>
</li>
<li>
<div class="jingling text3_jingling j_05"></div>
<div class="jingling j_green"></div>
<a href="">峡谷之巅</a>
</li>
<li>
<div class="jingling text3_jingling j_06"></div>
<a href="">CDK兑换</a>
</li>
<li>
<div class="jingling text3_jingling j_07"></div>
<div class="jingling j_red"></div>
<a href="">轮换模式</a>
</li>
<li>
<div class="jingling text3_jingling j_08"></div>
<a href="">游戏资料</a>
</li>
<li>
<div class="jingling text3_jingling j_09"></div>
<a href="">领奖中心</a>
</li>
<li>
<div class="jingling text3_jingling j_10"></div>
<a href="">官方微博</a>
</li>
<li>
<div class="jingling text3_jingling j_11"></div>
<a href="">玩家论坛</a>
</li>
<li>
<div class="jingling text3_jingling j_12"></div>
<a href="">在线客服</a>
</li>
</ul>
</div>
</div>
<div class="four">
<div class="four_left">
<ul class="four_nav">
<li class="four_first">最新资讯</li>
<li><a href="">综合新闻</a></li>
<li><a href="">官方公告</a></li>
<li><a href="">赛事新闻</a></li>
<li><a href="">论坛资讯</a></li>
</ul>
<div class="four_news">
<img src="images/pic-news9.jpg" alt="" />
<p>
<span>小组赛收官预告 EDG能否创FNC奇迹</span><br />
当天比赛中，LPL赛区一号种子EDG与总决赛霸主SKT所在的A组，将决出最后两个晋级名额。而在八强席位全部确定后，还将进行淘汰赛对阵的抽签仪式。
</p>
</div>
<ul class="i">
<li>
<span>新闻</span>
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=3844090013044186825">双城之战，等你续写联盟IP宇宙新篇章</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=11697431314983059737">光明哨兵回顾</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=4120952357181167607">《盟芽有礼·第四季》福利来袭</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=12331834813250241928">福星计划权益皮肤更新公告</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=9816307623165184946">执事系列皮肤与执事通行证即将上线<</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=15991784935831851061">"至臻终章2021"即将上线</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=5740766114431211368">恭喜TES夺得2021德玛西亚杯冠军</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=10618240594332243670">他回来了，全部都回来了！</a>
<b>12/22</b>
</li>
<li>
<span>新闻</span>
<a href="https://lol.qq.com/news/detail.shtml?docid=4497872573681023276">《简笔画联盟》没想到我也可以这么帅？</a>
<b>12/22</b>
</li>
</ul>
<p class="k">
阅读更多<a href="https://lol.qq.com/news/index.shtml">最新资讯</a>
</p>
</div>
<div class="x_right">
<ul class="x_right_top">
<li><a href="">周免英雄</a></li>
<li><a href="">最新皮肤</a></li>
<li><a href="">最新英雄</a></li>
</ul>
<div class="ph_01"></div>
<div class="ph_02">
<div class="ph_03"></div>
<div class="ph_04"></div>
</div>
<div class="ph_05">
<div class="ph_06"></div>
<div class="ph_07"></div>
</div>
<div class="ph_08">
<div class="ph_09"></div>
<div class="ph_10"></div>
</div>
<div class="ph_11">
<p class="ph_12">免费时间：2017-10-13至2017-10-20</p>
</div>
<div class="ph_13">
<div class="ph_14"></div>
<div class="ph_15"></div>
</div>
<div class="ph_16">
<div class="m jingling"></div>
<div class="ph_17"><b>本产品适合18岁以上（含18）年龄段人群使用</b><br />
<span>
抵制不良游戏 拒绝翻版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活
</span>
</div>
</div>
</div>
</div>
<div class="n">
<ul class="n_header">
<li class="n_first">最新推荐</li>
<li><a href="">视频推荐</a></li>
<li><a href="">活动推荐</a></li>
</ul>
<div class="video">
<div class="pi_01">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=1004331436617979492&tagGroup=2"><span>
RAvsWHG！
</span></a>
</div>
<div class="pi_02">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=6086163159418384114&tagGroup=1">
<span>7.20版本老司机：寡妇制造者重做上线！</span>
</a>
</div>
<div class="pi_03">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=7636656294113331820&tagGroup=2">
<span>S11高燃时刻！！！</span>
</a>
</div>
<div class="pi_04">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=146762370869790033&tagGroup=">
<span>污渍狂风吸蓝刀卢锡安！</span>
</a>
</div>
<div class="pi_05">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=2082346151153988298&tagGroup=0">
<span>神级锐雯面对四人毅然反打！所有人觉得他疯了！</span>
</a>
</div>
<div class="pi_06">
<a href="https://lol.qq.com/v/v2/detail.shtml?docid=11643305713953607102&tagGroup=4">
<span>北美第一见血封喉劫，虽然不如zid——99!</span>
</a>
</div>
</div>
</div>
<div class="last">
<p class="q">
阅读更多<a href="https://lol.qq.com/news/index.shtml">最新资讯</a>
</p>
</div>
<div class="z">
<p>
<a href="https://ieg.tencent.com/" target="_blank">腾讯互动娱乐 |</a>
<a href="https://www.tencent.com/zh-cn/partnership.html" target="_blank">广告服务 |</a>
<a href="https://careers.tencent.com/" target="_blank">腾讯游戏招聘 |</a>
<a href="https://kf.qq.com/" target="_blank">腾讯游戏客服 |</a>
<a href="https://lol.qq.com/main.shtml" target="_blank">游戏活动 |</a>
<a href="https://lol.qq.com/main.shtml" target="_blank">游戏地图 |</a>
<a href="https://www.tencent.com/zh-cn/partnership.html" target="_blank">商务合作 |</a>
<a href="https://kf.qq.com/" target="_blank">腾讯网 |</a>
<a href="https://lol.qq.com/main.shtml" target="_blank" target="_blank">网站导航 |</a>
<a href="https://www.tencent.com/zh-cn/statement.html?/law/copyright.htm" target="_blank">腾讯公司版权所有</a><br/>
COPYRIGHT @ 1998 - 2017 TENCENT.ALL RIGHTS RESERVED.<br/>
@ 2012 Riot Games,Inc.ALL RIGHTS RESERVED.<br/>
文网进字[2011] 004号 & ISBN 978-7-89989-145-2
<a href="http://lol.qq.com/gicp/news/410/36972651.html" target="_blank"> | 新出网证(粤)字010号</a>
<a href="http://lol.qq.com/gicp/news/410/36972651.html" target="_blank"> | 粤网文【2017】6138-1456号</a>
</p>
</div>
</body>
</html>css部分：
*{
margin:0px;
padding: 0px;
}
li{
list-style: none;
}.header{
width: 1423px;
height: 90px;
margin: 0 auto;
background-color: #0b0b0b;
}
.jingling{
background-image: url("../images/icon.png");
}
.logo{
width: 185px;
height: 95px;
background-position: 0 -33px;
float: left;
margin: 5px 0 0 90px;
}
.bo li{
width: 110px;
float: left;
color: #fff;
font-size: 18px;
text-align: center;
padding-top:24px ;
}
.bo li span{
font-size: 12px;
color: #999;
}
.search,.phone{
width: 28px;
height: 28px;
float: left;
margin: 25px 0 0 25px;
}
.search{
background-position: -7px 0;
}
.phone{
background-position: -43px 0;
}
.person{
width: 75px;
height: 75px;
background-position: 0 -170px;
float: left;
margin: 7px 0 0 25px;
}
.person img{
border-radius: 50%;
width: 60px;
margin: 5px 0 0 5px;
}
.login{
float: left;
margin: 23px 0 0 25px;
color: #fff;
}
.login a{
color: #ff0;
}
.login span{
font-size: 12px;
color: #999;
}
.text1{
width: 1423px;
height: 350px;
background-image: url("../images/bg-top.jpg");
margin: 0 auto;
position: relative;
}
.text1 p{
position: absolute;
font-size: 12px;
color: #333;
right: 60px;
bottom: 30px;
}
.text1 span{
color: #f5d185;
font-size: 14px;
}
.text1 a{
text-decoration: none;
color: #f5d185;
border: 2px solid #f5d185;
font-size: 16px;
padding: 2px 4px;
}
.text2{ width: 1386px;
height: 60px;
margin: 0 auto;
background-color: #f9f9f9;
padding-left:37px ;
}
.text2 li{
float: left;
width: 110px;
height: 57px;
/*border-bottom: 2px solid #f5d185;*/
text-align: center;
line-height: 60px;
margin-left: 55px;
}
.text2 a{
text-decoration: none;
color: #000;
}
.text2 li:hover{
border-bottom: 3px solid #f5d185;
}
.text2 li:hover a{
color: #f5d185;
} .text3{
width: 1423px;
height: 510px;
background-image: url("../images/bg-content-top.jpg");
margin: 0 auto;
}
.text3_left,.text3_right{
float: left;
margin-top: 40px;
}
.text3_left{
margin-left: 92px;
background-color: black;
}
.text3_left img{
width: 820px;
height: 350px;
display: block;
}
.text3left ul{
width: 820px;
height: 50px;
background-color: #000;
}
.text3_left li{
width: 164px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
}
.text3_left a{
color: #fff;
font-size: 15px;
text-decoration: none;
}
.text3_left li:hover{
background-color: #303030;
}
.text3_left li:hover a{
color: #f5d185;
} .text3_right{
margin-left: 20px;
}
.text3_right ul{
width: 400px;
height: 240px;
background-color: #fff;
margin-top: 5px;
}
.text3_right li{
width: 133px;
height: 60px;
float: left;
text-align: center;
line-height: 60px;
position: relative;
}
.text3_right a{
text-decoration: none;
color: #757575;
}
.text3_jingling{
position: absolute;
width: 25px;
height: 25px;
/*border: 1px solid #000;*/
top: 18px;
left: 7px;
}.j_red{
width: 15px;
height: 15px;
position: absolute;
right: 15px;
top: 8px;
background-position: -107px 0px;
}
.j_green{
width: 15px;
height: 15px;
position: absolute;
right: 15px;
top: 8px;
background-position: -129px 0px;
}
.j_01{
background-position: -203px -5px;
}
.j_02{
background-position: -562px -5px;
}
.j_03{
background-position: -590px -5px;
}
.j_04{
background-position: -382px -5px;
}
.j_05{
background-position: -652px -5px;
}
.j_06{
background-position: -292px -5px;
}
.j_07{
background-position: -623px -5px;
}
.j_08{
background-position: -261px -5px;
}
.j_09{
background-position: -472px -2px;
}
.j_10{
background-position: -500px -5px;
}
.j_11{
background-position: -413px -5px;
}
.j_12{
background-position: -442px -3px;
}
.four{
width: 1423px;
height: 770px;
background-color: #fff;
margin: 0 auto;
}
.four_left,.x_right{
float: left;
}
.four_left{
margin-left: 92px;
}
.four_nav{
width: 823px;
height: 60px;
background-color: #fff;
}
.four_nav li{
float: left;
width: 164.6px;
height: 57px;
text-align: center;
line-height: 60px;
border-bottom: 2px solid #999;
}
.four_nav a{
color: #666;
text-decoration: none;
}
.four_nav .four_first{
font-size: 20px;
/*font-weight: bold;*/
}
.four_nav li:hover{
border-bottom: 2px solid #f5d185;
}
.four_nav li:hover a{
font-weight: bold;
color: #f5d185;
}.four_news{
margin-top: 20px;
overflow: hidden;
}
.four_news img,.four_news p{
float: left;
}
.four_news p{
width: 605px;
margin-left:20px ;
font-size: 14.3px;
}
.four_news p span{
font-size: 36.6px;
font-weight: bold;
}
.i li{
width: 822px;
height: 35px;
margin-top: 15px;
line-height: 35px;
color: #666;
}
.i span,.i a{
float: left;
}
.i b{
float: right;
}
.i span{
width: 70px;
height: 35px;
background-color: #ebebeb;
text-align: center;
font-size: 14px;
}
.i a{
margin-left: 15px;
text-decoration: none;
color: #666;
}
.i b{
font-size: 14px;
font-weight: normal;
color: #999;
}
.k{
width: 822px;
height: 45px;
background-color: #EBEBEB;
text-align: center;
line-height: 45px;
font-size: 18px;
margin-top: 20px;
}
.k a{
text-decoration: none;
color: #f5d185;
}
.x_right_top{
width: 400px;
height: 60px;
margin-left: 20px;
background-color: #fff;
}
.x_right_top li{
float: left;
width: 133px;
height: 57px;
text-align: center;
line-height: 60px;
border-bottom: 2px solid #999;
}
.x_right_top a{
color: #666;
text-decoration: none;
}
.x_right_top li:hover{
border-bottom: 2px solid #f5d185;
}
.x_right_top a:hover{
font-weight: bold;
color: #f5d185;
}
.ph_01{
width: 400px;
height: 155px;
margin-top: 15px;
margin-left: 20px;
background-image: url("../images/skin01.jpg");
}
.ph_02{
width: 400px;
height: 70px;
margin-top: 10px;
margin-left: 20px;
}
.ph_03,.conter04_right_ph_04{
float: left;
}
.ph_03{
width: 195px;
height: 70px;
/* margin-top: 10px;*/
background-image: url("../images/skin02.jpg");
}
.ph_04{
width: 195px;
height: 70px;
margin-left: 205px;
background-image: url("../images/skin03.jpg");
}
.ph_05{
width: 400px;
height: 70px;
margin-top: 10px;
margin-left: 20px;
}
.ph_06,.conter04_right_ph_07{
float: left;
}
.ph_06{
width: 195px;
height: 70px;
background-image: url("../images/skin04.jpg");
}
.ph_07{
width: 195px;
height: 70px;
margin-left: 205px;
background-image: url("../images/skin05.jpg");
}
.ph_08{
width: 400px;
height: 70px;
margin-top: 10px;
margin-left: 20px;
}
.ph_09,.conter04_right_ph_10{
float: left;
}
.ph_09{
width: 195px;
height: 70px;
background-image: url("../images/skin06.jpg");
}
.ph_10{
width: 195px;
height: 70px;
margin-left: 205px;
background-image: url("../images/skin07.jpg");
}
.ph_11{
width: 420px;
height: 50px;
position: relative;
}
.ph_12{
color: #9f9f9f;
font-size: 13px;
position: absolute;
top: 10px;
right: 0px;
}
.ph_13{
width: 400px;
height: 70px;
margin-top: 10px;
margin-left: 20px;
}
.ph_14,.conter04_right_ph_15{
float: left;
}
.ph_14{
width: 195px;
height: 70px;
background-image: url("../images/pic-go-mall.jpg");
}
.ph_15{
width: 195px;
height: 70px;
margin-left: 205px;
background-image: url("../images/pic-go-qt.jpg");
}
.ph_16{
width: 420px;
height: 110px;
position: relative;
}
.m{
width: 70px;
height: 70px;
position: absolute;
background-position: -330px -88px;
margin-left: 20px;
margin-top: 20px;
}
.ph_17{
width: 300px;
height: 70px;
margin-left: 100px;
padding-top: 25px;
font-size: 13px;
}
.ph_17 span{
font-size: 12px;
color: #898989;
}
.n{
width: 1240px;
height: 290px;
background-color: #fff;
margin: 0 auto;
}
.n_header li{
float: left;
width: 164.6px;
height: 60px;
text-align: center;}
.n_header a{
color: #666;
font-size: 20px;
text-decoration: none;
}
.n_header {
width: 1240px;
height: 60px;
line-height: 60px;
border-bottom: 2px solid #999;
text-decoration: none;
}
.n_first{
font-size: 24px;
font-weight: bold;
}
.n_header :hover{
border-bottom: 2px solid #f5d185;
text-decoration: none;
}
.n_header li:hover a{
font-weight: bold;
color: #f5d185;
text-decoration: none;
}
.vedio{
width: 1240px;
height: 190px;
}
.pi_01{
background-image: url("../images/video1.jpg");
width: 190px;
height: 110px;
margin-top:20px ;
position: relative;
}
.pi_01 span{
margin-top:120px ;
color: #999;
font-size: 16px;
position: absolute;
}一个简易且粗糙的英雄联盟官网，初学，一周内一边学习一边完成。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
