LOL英雄联盟首页以及攻略页面制作

Wdderxu

已于 2022-09-22 15:49:34 修改

阅读量3.9k

点赞数 17

文章标签：前端

于 2022-09-19 13:36:04 首次发布

本文链接：https://blog.csdn.net/Wdderxu/article/details/126931892

版权

由于原文代码太多,就不全部展示了,如果有需求的话可以评论留言私信,发你完整文件压缩包

下面是主页的html和css样式代码

部分代码:index主页

已下只展示主页面的html和css的代码展示

<!DOCTYPE html>
<html>

<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="icon" href="img/icon.png" />
</head>

<body style="background: #eee;">
	<!-- 头部导航 -->
	<div class="top_nav_bg">
		<div class="top_nav">
			<!-- 网站导航中的logo -->
			<div class="logo">
				<a href="#">
					<h1>英雄联盟</h1>
				</a>
			</div>
			<!-- 导航列表 -->
			<div class="nav_list">
				<ul>
					<li>
						<a href="index1.html">
							<p>游戏资料</p>
							<span>Game Info</span>
						</a>
					</li>
					<li>
						<a href="#">
							<p>游戏资料</p>
							<span>Game Info</span>
						</a>
					</li>
					<li>
						<a href="#">
							<p>游戏资料</p>
							<span>Game Info</span>
						</a>
					</li>
					<li>
						<a href="#">
							<p>游戏资料</p>
							<span>Game Info</span>
						</a>
					</li>
					<li>
						<a href="#">
							<p>游戏资料</p>
							<span>Game Info</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 登录按钮 -->
			<div class="user_information">
				<div class="user_left">
					<img src="img/default.png" alt="">
					<span></span>
				</div>
				<div class="user_right">
					<a href="#">
						<p>请绑定大区</p>
					</a>
				</div>
			</div>
			<!-- 掌盟图标 -->
			<a href="#" class="zhangmeng">
				<i></i>
			</a>
			<!-- 搜索按钮 -->
			<a href="#" class="screen">
				<i></i>
			</a>
		</div>
	</div>
	<!-- 头部广告 -->
	<div class="top_advertisement">
		<img src="img/bj01.png">
		<div class="word">
			<a href=""></a>

			<div class="banben">
				<p>查看详情当前游戏版本：Ver 12.17 </p>
				<a href="">版本详情</a>
			</div>
		</div>
	</div>
	<!-- 网站的内容主体 -->
	<div class="web_content">
		<!-- 网站的新闻、广告、资讯、活动等 -->
		<div class="game_index1 clearfix">
			<!-- 轮播图 -->
			<div class="banner">
				<ul>
					<li class="check">
						<p>次元召唤/命定召唤</p>
						<a href="">
							<img src="img/lunbo02.png">
						</a>
					</li>
					<li>
						<p>巨龙之境 隐秘海域</p>
						<a href="">
							<img src="img/lunbo05.png">
						</a>
					</li>
					<li>
						<p>国王 佛耶戈</p>
						<a href="">
							<img src="img/lunbo03.png">
						</a>
					</li>
					<li>
						<p>龙境探秘</p>
						<a href="">
							<img src="img/lunboo4.png">
						</a>
					</li>
					<li>
						<p>巅峰之星</p>
						<a href="">
							<img src="img/lunbo01.png">
						</a>
					</li>
				</ul>
			</div>
			<!-- 新闻、公告轮播 -->
			<div class="news">
				<ul class="mean_one">
					<li class="list_one check">
						<span>综合</span>
						<ul class="mean_two">
							<h4>【英雄联盟】无归 | 绽灵节·灵魂莲华(2022)</h4>
							<li>
								<p>公告</p>
								<a href="#">
									云顶之弈：龙岛纵横 活动概览
								</a>
								<span class="time">9-15</span>
							</li>
							<li class="video">
								<p>视频</p>
								<a href="#">
									【英雄联盟】孤勇之夜：陈奕迅首次解读《孤勇者》
								</a>
								<span class="time">9-12</span>
							</li>
							<li class="match">
								<p>赛事</p>
								<a href="#">
									【英雄联盟】孤勇之夜：联盟孤先生峡谷初体验
								</a>
								<span class="time">9-12</span>
							</li>
							<li class="match">
								<p>赛事</p>
								<a href="#">
									恭喜斗鱼迅哥成为云顶之弈S7.5隐秘海域赛季单人模式首个最强王者!
								</a>
								<span class="time">9-10</span>
							</li>
							<li class="video">
								<p>视频</p>
								<a href="#">
									拒绝比赛荒，开始撒狗粮？斗鱼"三城之战”，管泽元、余霜领衔!
								</a>
								<span class="time">9-09</span>
							</li>
							<li>
								<p>公告</p>
								<a href="#">
									掌上英雄联盟云顶之弈专区，带你迅速上手云顶新赛季！
								</a>
								<span class="time">9-09</span>
							</li>
						</ul>
					</li>
					<li class="list_one">
						<span>公告</span>
						<ul class="mean_two">
							<h4>10.9云顶之弈版本更新公告</h4>
							<li>
								<p>公告</p>
								<a href="#">4月30日凌晨3点停机版本更新公告</a>
								<span class="time"></span>
							</li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</li>
					<li class="list_one">
						<span>赛事</span>
						<ul class="mean_two">
							<h4>10.9云顶之弈版本更新公告</h4>
							<li>
								<p>公告</p>
								<a href="#">4月30日凌晨3点停机版本更新公告</a>
								<span class="time"></span>
							</li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</li>
					<li class="list_one">
						<span>攻略</span>
						<ul class="mean_two">
							<h4>12.17云顶之弈版本更新公告</h4>
							<li>
								<p>公告</p>
								<a href="#">4月30日凌晨3点停机版本更新公告</a>
								<span class="time"></span>
							</li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</li>
					<li class="list_one">
						<span>社区</span>
						<ul class="mean_two">
							<h4>12.17云顶之弈版本更新公告</h4>
							<li>
								<p>公告</p>
								<a href="#">4月30日凌晨3点停机版本更新公告</a>
								<span class="time"></span>
							</li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</li>
				</ul>
				<a href="#" class="clear">
					阅读更多<span>最新资讯</span>
				</a>
			</div>
			<!-- 热门活动 -->
			<div class="hot_act">
				<!-- 热门活动导航 -->
				<div class="act_top">
					<h4 class="fl">热门活动</h4>
					<ul class="act_tit fr">
						<li class="fl check">
							正在进行
						</li>
						<li class="fl">
							商城特惠
						</li>
						<li class="fl">
							长期活动
						</li>
						<li class="fr">
							<a href="#">更多</a>
						</li>
					</ul>
				</div>
				<!-- 热门活动内容 -->
				<div class="active_content">
					<ul>
						<li>
							<a href="">
								<div class="act_list_top">
									<img src="img/zbj01.png">
								</div>
								<div class="act_list_bottom">
									<p>佛耶戈雕塑上线限时直降600</p>
									<span>长期活动</span>

								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div class="act_list_top">
									<img src="img/zbj02.png">
								</div>
								<div class="act_list_bottom">
									<p>英雄联盟9月福利全收集指南</p>
									<span>长期活动</span>

								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div class="act_list_top">
									<img src="img/zbj03.png">
								</div>
								<div class="act_list_bottom">
									<p>巨龙之境 隐秘海域</p>
									<span>长期活动</span>

								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div class="act_list_top">
									<img src="img/zbj04.png">
								</div>
								<div class="act_list_bottom">
									<p>巅峰之星</p>
									<span>长期活动</span>

								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 游戏功能导航 -->
			<div class="game_fun_nav fr">
				<ul>
					<li class="download_game fl">
						<video class="side-down-video" autoplay="" loop="" muted="" width="366" height="138">
							<source src="img/down.mp4" type="video/mp4">
						</video>
					</li>
					<li class="new_gameuser fr">
						<a href="">
							新手必备
						</a>
					</li>
					<li class="get_gift fr">
						<a href="#">
							领取中心
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>在线客服</p>
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>秩序殿堂</p>
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>游戏资料</p>
						</a>
					</li>
					<li class="p3 no-mr">
						<a href="">
							<i class="icon"></i>
							<p>峡谷之巅</p>
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>云顶之弈</p>
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>攻略中心</p>
						</a>
					</li>
					<li class="p3">
						<a href="">
							<i class="icon"></i>
							<p>LOL宇宙</p>
						</a>
					</li>
					<li class="p3 no-mr">
						<a href="">
							<i class="icon"></i>
							<p>微信绑定</p>
						</a>
					</li>
				</ul>
			</div>
			<!-- 新英雄新皮肤 -->
			<div class="new_hero fl">
				<div class="p1 fl">
					<a href="">
						<img src="img/ll01.png">
						<p class="word1">新英雄</p>
						<p>兽灵行者 乌迪尔</p>
						<p>他踏寒风而来，在平衡与纷争中探寻弗雷尔卓德的未来</p>

					</a>
				</div>
				<div class="p2 fl">
					<a href="">
						<img src="img/ll02.png">
						<p class="word1">新皮肤</p>
						<p>巅峰之星</p>
						<p>无畏出征 巅峰对决！巅峰之星系列皮肤上线</p>

					</a>
				</div>
			</div>
			<!-- 版本信息 -->
			<div class="version fr">
				<div class="ver_box1">
					<a href="">
						<img src="img/ll03.png" alt="">
						<p></p>
						<span></span>
					</a>
				</div>
				<div class="ver_box1">
					<a href="">
						<img src="img/ll05.png" alt="">
						<p></p>
						<span></span>
					</a>
				</div>
				<div class="ver_box1">
					<a href="">
						<img src="img/ll04.png" alt="">
						<p></p>
						<span></span>
					</a>
				</div>
				<div class="ver_box1 zm">
					<a href="">
						周免
					</a>
					<div class="zhoumian">
						<ul>
							<li>
								<a href="">
									<img src="img/gg01.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/gg01.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Caitlyn.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Diana.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Lux.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Katarina.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Rakan.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Soraka.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Yuumi.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Yasuo.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Vayne.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Xayah.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Zoe.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Sona.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Sivir.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Lulu.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Kayle.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Kaisa.png">
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/hero/Janna.png">
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 视频专辑区域 -->
		<div class="game_video_bg">
			<div class="game_video">
				<!-- 最新视频 -->
				<div class="new_video fl">
					<div class="nv_tit">
						<h2>最新视频</h2>
						<ul>
							<li>
								<a href="">推荐</a>
							</li>
							<li>
								<a href="">官方</a>
							</li>
							<li>
								<a href="">娱乐</a>
							</li>
							<li>
								<a href="">赛事</a>
							</li>
							<li>
								<a href="">云顶之弈</a>
							</li>
							<li>
								<a href="">教学</a>
							</li>
						</ul>
						<a href="" class="fr no-mr">更多</a>
						<a href="" class="fr">下一页</a>

					</div>
					<div class="nv_content">
						<ul>
							<li>
								<a href="">
									<img src="img/gg01.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
							<li>
								<a href="">
									<img src="img/gg02.png">
									<p>小超梦细谈剑魔两大出装：星蚀不能盲目出，这种阵容就得出渴血！</p>
								</a>
								<span>1.4w次播放</span>
								<span>2020-4-30</span>
							</li>
						</ul>
					</div>
				</div>
				<!-- 最新专辑 -->
				<div class="new_album fr">
					<div class="na_tit">
						<h2>热门专辑</h2>
						<ul>
							<li>
								<a href="">周一</a>
							</li>
							<li>
								<a href="">周二</a>
							</li>
							<li>
								<a href="">周三</a>
							</li>
							<li>
								<a href="">周四</a>
							</li>
							<li>
								<a href="">周五</a>
							</li>
							<li>
								<a href="">周六</a>
							</li>
							<li>
								<a href="">周日</a>
							</li>
						</ul>
					</div>
					<div class="na_content">
						<ul>
							<li>
								<a href="">
									<img src="img/kk01.pngg.jfif" alt="">
									<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
									<img src="img/tx.png">
									<b>英雄联盟</b>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/kk01.pngg.jfif" alt="">
									<p>起小点TOP10集合国服/外服一周的精彩操作镜头。</p>
									<img src="img/tx.png">
									<b>英雄联盟</b>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/kk03.png" alt="">
									<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
									<img src="img/tx.png">
									<b>英雄联盟</b>
								</a>
							</li>

						</ul>
						<a href="#" class="clear">前往视频中心</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 赛事中心 -->
		<div class="game_match">
			<div class="match_tit">
				<h2>赛事中心</h2>
				<ul>
					<li>
						<a href="">春季赛常规赛</a>
					</li>
					<li class="check">
						<a href="">春季赛季后赛</a>
					</li>
				</ul>
				<a href="" class="fr">更多</a>
				<a href="" class="fr">2022LPL夏季赛</a>
			</div>
			<div class="match_con clearfix">
				<div class="box1">
					<h6>第一轮</h6>
					<div class="match_details_box">
						<div class="match_details_tit">

							<span>已结束</span>
							<span>4月22日17：00</span>
							<a href="" class="video">视频</a>
							<a href="">数据</a>
						</div>
						<div class="match_details">
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
						</div>
					</div>

				</div>
				<div class="box1">
					<h6>第一轮</h6>
					<div class="match_details_box">
						<div class="match_details_tit">

							<span>已结束</span>
							<span>4月22日17：00</span>
							<a href="" class="video">视频</a>
							<a href="">数据</a>
						</div>
						<div class="match_details">
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
						</div>
					</div>

				</div>
				<div class="box1">
					<h6>第一轮</h6>
					<div class="match_details_box">
						<div class="match_details_tit">

							<span>已结束</span>
							<span>4月22日17：00</span>
							<a href="" class="video">视频</a>
							<a href="">数据</a>
						</div>
						<div class="match_details">
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
						</div>
					</div>

				</div>
				<div class="box1">
					<h6>总决赛</h6>
					<div class="match_details_box">
						<div class="match_details_tit">

							<span>正在直播</span>
							<span>4月22日17：00</span>
							<a href="" class="video">视频</a>
							<a href="">数据</a>
						</div>
						<div class="match_details">
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
							<div>
								<img src="img/es.png" alt="">
								<p>ES</p>
								<span>1</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- 创作馆 -->
		<div class="create_bg">
			<div class="create_left fl">
				<div class="create_tit">
					<h2 class="fl">创作馆</h2>
					<a href="" class="fr">更多</a>
				</div>
				<div class="create_con">
					<ul>
						<li>
							<a href="">
								<img src="img/q1.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q2.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q3.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q4.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q5.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q6.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q7.jfif" alt="">
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/q8.jfif" alt="">
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="create_right fr ">
				<ul>
					<li>
						<a href="">
							<img src="img/db01.png" alt="">
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/q9.png" alt="">
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/href-bg-3.jpg" alt="">
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/q10.png" alt="">
						</a>
					</li>
				</ul>
				<a href="" class="mt">
					<p>合作媒体</p>
				</a>
			</div>
		</div>
		<!-- 底部文本 -->
		<div class="footer">
			<div class="footer-item">
				<div class="foot-list">
					<a href=""></a>
					<span></span>
				</div>
				<ul class="foot_links">
					<li class="link_map">
						<a href="">腾讯互动娱乐</a><span class="f_line">|</span><a href="">服务条款</a>
						<span class="f_line">|</span>
						<a href="">隐私保护指引</a>
						<span class="f_line">|</span>
						<a href="">儿童隐私保护指引</a><span class="f_line">|</span><a href="">腾讯游戏招聘</a><span
								class="f_line">|</span><a href="">腾讯游戏客服</a><span class="f_line">|</span><a
								href="">游戏列表</a><span class="f_line">|</span><a href="">广告服务及商务合作</a><span
								class="f_line">|</span>
					</li>
					<li class="copyright_zh"><a href="">腾讯公司版权所有</a><a href="">网络游戏行业防沉迷自律公约</a></li>
					<li class="copyright_en">
						<p class="copyright_txt">COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.</p>
						<p class="copyright_txt">COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p>
					</li>
					<li class="limit_age">本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。</li>
					<li class="copyright_public"><a href=""><img src="img/xtb.png" width="15" height="15">工商网监电子标识
						</a><span class="f_line">|</span><a href="">粤网文[2020]3396-195号</a><span
							class="f_line">|</span><a href="">（署）网出证（粤）字第054号</a>
					</li>
					<li class="copyright_private">批准文号：新出审字[2011]310号 <span class="f_line">|</span>文网进字[2011] 004号 <span
							class="f_line">|</span> 出版物号：ISBN 978-7-89989-145-2<span
							class="f_line">|</span>全国文化市场统一举报电话：12318 </li>
				</ul>
			</div>


		</div>
	</div>
</body>

</html>

index的css样式:

/*通用样式*/
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
i {
	font-weight: 100;
	color: #333;
}

a {
	text-decoration: none;
	color: #333;
}

.clear {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

img {
	width: 100%;
	display: block;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0
}

.clearfix {
	zoom: 1
}

/*头部导航*/

.top_nav_bg {
	width: 100%;
	height: 78px;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, .3);
	z-index: 11;
}

.top_nav_bg .top_nav {
	width: 1358px;
	height: 68px;
	margin: 0 auto;
	/*设置元素水平居中*/
}

.top_nav_bg .top_nav .logo {
	float: left;
	width: 167px;
	height: 60px;
	margin-top: 10px;
	background: url(../img/logo-public.png);
}

.top_nav_bg .top_nav .logo a {
	font-size: 0;

}

.top_nav_bg .top_nav .nav_list ul {
	padding-top: 16px;
	height: 62px;
	float: left;
}

.top_nav_bg .top_nav .nav_list li {
	float: left;
	width: 150px;
	height: 78px;
	text-align: center;
}

.top_nav_bg .top_nav .nav_list li a>p {
	font-size: 18px;
	letter-spacing: 1px;
	color: #fff;
}

.top_nav_bg .top_nav .nav_list li a>span {
	font-size: 11px;
	letter-spacing: 1px;
	color: #aeaeae;
}

.top_nav_bg .top_nav .screen,
.top_nav_bg .top_nav .zhangmeng {
	display: block;
	width: 40px;
	height: 40px;
	margin-top: 16px;
	float: right;

}

.top_nav_bg .top_nav .screen i {
	display: block;
	width: 21px;
	height: 21px;
	margin: 9.5px 0 0 9.5px;
	background: url(../img/topfoot-spr.png);
	background-position: -381px -39px;
}

.top_nav_bg .top_nav .zhangmeng i {
	display: block;
	width: 16px;
	height: 24px;
	margin: 8px 0 0 12px;
	background: url(../img/topfoot-spr.png);
	background-position: -303px -84px;
}

.top_nav_bg .top_nav .user_information {
	width: 243px;
	height: 78px;
	float: right;
}

.top_nav_bg .top_nav .user_information .user_left {
	width: 48px;
	height: 48px;
	float: left;
	margin-top: 15px;
	margin-left: 10px;
	position: relative;
}

.top_nav_bg .top_nav .user_information .user_left img {
	width: 36px;
	border-radius: 50%;
	position: absolute;
	top: 6px;
	left: 6px;
}

.top_nav_bg .top_nav .user_information .user_left span {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	display: block;
	background: url(../img/topfoot-spr.png);
	background-position: 189px 238px;
}

.top_nav_bg .top_nav .user_information .user_right {
	width: 128px;
	margin-left: 10px;
	float: left;
	height: 78px;
	line-height: 78px;
}

.top_nav_bg .top_nav .user_information .user_right p {
	text-align: center;
	margin-top: 20px;
	color: #fefefe
}

.top_advertisement {
	position: relative;
}

.top_advertisement .word a:nth-child(1) {
	display: block;
	position: absolute;
	bottom: 32px;
	left: 50%;
	margin-left: -80px;
	width: 160px;
	height: 40px;
	background: url(../img/topfoot-spr.png);
	background-position: -216px -39px;
}

.top_advertisement .word .banben {
	position: absolute;
	right: 260px;
	bottom: 32px;
}

.top_advertisement .word .banben p {
	color: #888787;
	float: left;
	margin-right: 10px;
	line-height: 24px;
	font-size: 14px;
}

.top_advertisement .word .banben a {
	color: #f5d185;
	float: left;
	display: block;
	padding: 0 15px;
	background: rgba(0, 0, 0, .6);
	border: 2px solid #f5d185;
	height: 22px;
	font-size: 14px;
}

.check {
	z-index: 999;
}

/*网站主体*/
.web_content {
	width: 100%;
	margin-top: 40px;
}

.web_content .game_index1 {
	width: 1358px;
	margin: 0 auto;
	padding-bottom: 80px;
}

/*首页轮播图*/
.web_content .game_index1 .banner {
	width: 820px;
	height: 380px;
	float: left;
	position: relative;
}

.web_content .game_index1 .banner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.web_content .game_index1 .banner p {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 14px;
	width: 164px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #e3e2e2;
}

.web_content .game_index1 .banner li:nth-child(2) p {
	left: 164px;
}

.web_content .game_index1 .banner li:nth-child(3) p {
	left: 328px;
}

.web_content .game_index1 .banner li:nth-child(4) p {
	left: 492px;
}

.web_content .game_index1 .banner li:nth-child(5) p {
	left: 656px;
}

.web_content .game_index1 .banner p:hover {
	background: #f7f6f6;
	color: #f5d185;
	border-bottom: 2px solid #f5d185;
}

.web_content .game_index1 .banner p:hover+a img {
	z-index: 999;
	top: 0;
	left: 0;
}

.web_content .game_index1 .banner .check p {
	background: #f7f6f6;
	color: #f5d185;
	border-bottom: 2px solid #f5d185;
}

.web_content .game_index1 .banner .check p+a img {
	z-index: 999;
}

/*新闻、公告轮播*/
.web_content .game_index1 .news {
	width: 496px;
	height: 380px;
	float: right;
	position: relative;
}

.web_content .game_index1 .news .list_one {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.web_content .game_index1 .news .list_one>span {
	font-weight: 700;
	font-size: 18px;
	color: #1da6ba;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
	border-bottom: 2px solid #1da6ba;
	width: 40px;
	padding: 10px 0;
}

.web_content .game_index1 .news .list_one:nth-child(2)>span {
	position: relative;
	top: 0;
	left: 99px;
}

.web_content .game_index1 .news .list_one:nth-child(3)>span {
	position: relative;
	top: 0;
	left: 198px;
}

.web_content .game_index1 .news .list_one:nth-child(4)>span {
	position: relative;
	top: 0;
	left: 297px;
}

.web_content .game_index1 .news .list_one:nth-child(5)>span {
	position: relative;
	top: 0;
	left: 396px;
}

.web_content .game_index1 .news .list_one .mean_two {
	width: 100%;
	background: #eee;
}

.web_content .game_index1 .news .list_one .mean_two h4 {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: #1da6ba;
	margin: 15px 0;
}

.news .list_one .mean_two li {
	width: 100%;
	height: 39px;
	border-bottom: 1px solid #ddd;
	line-height: 39px;
}

.news .list_one .mean_two li p {
	float: left;
	width: 36px;
	height: 20px;
	font-size: 12px;
	border: 1px solid #c5ab86;
	color: #c5ab86;
	line-height: 20px;
	text-align: center;
	margin-top: 10px;
	margin-right: 20px;

}

.news .list_one .mean_two li.match p {
	color: #6388c5;
	border: 1px solid #6388c5;
}

.news .list_one .mean_two li.video p {
	color: #e9852d;
	border: 1px solid #e9852d;
}

.news .list_one .mean_two li a {
	color: #424242;
	font-size: 14px;
	letter-spacing: 1px;
	display: inline-block;
	width: 370px;
	height: 39px;
	overflow: hidden;
}

.news .list_one .mean_two li span {
	float: right;
	color: #9d9d9d;
	font-size: 14px;
}

.news>a {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #e3e2e2;
	color: #676767;
	font-size: 14px;
	letter-spacing: 1px;
}

.news>a span {
	color: #7ea1a6;
}

.news>a:hover {
	border-radius: 8px;
	background: #c3c0c0;
}

.news .list_one .mean_two li:hover a {
	color: #bb9a6c;
}

.news .list_one .mean_two li.video:hover a {
	color: #e9852d;
}

.news .list_one .mean_two li.match:hover a {
	color: #6388c5;
}

/*热门活动*/

.hot_act {
	width: 820px;
	height: 335px;
	float: left;
	margin-top: 50px;
}

.hot_act .act_top {
	width: 100%;
	height: 32px;
}

.hot_act .act_top h4 {
	font-size: 24px;
	line-height: 28px;
	font-weight: 500;
	color: #333;
	margin-right: 30px;
}

.hot_act .act_top .act_tit {
	width: 670px;
	border-bottom: 1px solid #ddd;
	height: 32px;
}

.hot_act .act_top .act_tit li {
	font-size: 16px;
	color: #676767;
	line-height: 28px;
	margin-right: 40px;
	font-weight: 700;
	cursor: pointer;
	/*将鼠标指针改成手的形状*/

}

.hot_act .act_top .act_tit li.check {
	color: #1da6ba
}

.hot_act .act_top .act_tit li:hover {
	color: #1da6ba
}

.hot_act .act_top .act_tit li:last-child a {
	color: #1da6ba;
	font-size: 14px;
	font-weight: 500;
}

.hot_act .active_content {
	width: 100%;
	height: 278px;
	margin-top: 20px;
}

.hot_act .active_content li {
	width: 193px;
	height: 278px;
	float: left;
	margin-right: 16px;
	background: #fff;
}

.hot_act .active_content li:last-child {
	margin-right: 0;
}

/*鼠标经过盒子，盒子向上移动10像素*/
.hot_act .active_content li:hover {
	margin-top: -10px;
}

.hot_act .active_content li .act_list_bottom p {
	margin-top: 5px;
	margin-left: 8px;
	font-size: 14px;

}

.hot_act .active_content li .act_list_bottom span {
	display: block;
	margin-top: 20px;
	margin-left: 8px;
	font-size: 12px;
	color: #1da6ba
}

/*游戏功能导航*/
.game_fun_nav {
	width: 496px;
	height: 335px;
	margin-top: 50px;
}

/* 下载游戏 */
.game_fun_nav .download_game {
	width: 366px;
	height: 168px;
	font-size: 0;
}

.game_fun_nav .download_game a {
	display: block;
	width: 100%;
	height: 168px;
}

.game_fun_nav .new_gameuser,
.game_fun_nav .get_gift {
	width: 118px;
	height: 76px;
	background: url(../img/index-spr.png);
	background-position: -193px -316px;
	text-align: center;
	line-height: 76px;
	font-size: 14px;
}

.game_fun_nav .get_gift {
	margin-top: 17px;
}

.game_fun_nav .new_gameuser a,
.game_fun_nav .get_gift a {
	color: #fff;
	display: block;
	width: 100%;
	height: 76px;
}

.game_fun_nav .p3 {
	width: 112px;
	height: 68px;
	float: left;
	background: #fff;
	margin-right: 16px;
	margin-top: 15px;
	line-height: 68px;
	text-align: center;
}

.game_fun_nav .no-mr {
	margin-right: 0;
}

.game_fun_nav .p3 i.icon {
	display: block;
	float: left;
	width: 22px;
	height: 20px;
	background: url(../img/comm-spr.png);
	background-position: -316px -12px;
	margin-top: 24px;
	margin-left: 8px;
}

.game_fun_nav .p3 p {
	font-size: 14px;
}

.game_fun_nav .p3:hover a {
	color: #8dc9d2;
}


/*新英雄新皮肤*/

.new_hero {
	width: 820px;
	height: 254px;
	margin-top: 50px;
}

.new_hero .p1,
.new_hero .p2 {
	width: 402px;
	height: 254px;
	margin-right: 16px;
	position: relative;
}

.new_hero .p2 {
	margin-right: 0;
}

.new_hero .p1 p,
.new_hero .p2 p {
	position: absolute;
	top: 10px;
	left: 10px;
	color: #cdbe91;
}

.new_hero .word1 {
	width: 36px;
	height: 20px;
	font-size: 12px;
	text-align: center;
	background: #000;
	padding: 0 5px;
	line-height: 19px;
}

.new_hero .word1+p {
	top: 200px;
	left: 10px;
}

.new_hero .p1 p:last-child,
.new_hero .p2 p:last-child {
	top: 225px;
	font-size: 14px;
	color: #fff;
}

/*版本信息*/
.version {
	width: 492px;
	height: 254px;
	margin-top: 50px;
}

.version .ver_box1 {
	width: 240px;
	height: 120px;
	margin-right: 12px;
	float: left;
	margin-bottom: 15px;
}

.version .ver_box1:nth-child(2n) {
	margin-right: 0;
	float: right;
}

.version .ver_box1:nth-child(2) {
	height: 180px;

}

.version .ver_box1:nth-child(4) {
	height: 60px;
	background: url(../img/index-spr.png);
	background-position: -193px -253px;
}

.version .ver_box1:nth-child(4) a {
	display: block;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	letter-spacing: 2px;
}

.version .zm {
	position: relative;
}

.version .zm .zhoumian {
	display: none;
	position: absolute;
	width: 410px;
	height: 190px;
	top: 80px;
	left: -190px;
	background: #fff;
	padding: 0 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

.version .zm .zhoumian li {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	float: left;
	overflow: hidden;
	margin-right: 10px;
	margin-top: 10px;
}

.version .zm .zhoumian li:nth-child(7n) {
	margin-right: 0;
}

.version .zm>a:hover+.zhoumian {
	display: block;
}

/*视频专辑区域*/
.game_video_bg {
	width: 100%;
	background: #e3e2e2;
	padding-bottom: 70px;
}

.game_video_bg .game_video {
	width: 1358px;
	margin: 0 auto;
	overflow: auto;
}

/*视频*/
.game_video .new_video {
	width: 820px;
	height: 463px;
	margin-top: 70px;
}

.game_video .new_video .nv_tit {
	width: 100%;
	height: 35px;
	line-height: 35px;
}

.game_video .new_video .nv_tit h2,
.game_video .new_video .nv_tit li {
	float: left;
}

.game_video .new_video .nv_tit h2 {
	font-size: 24px;
	font-weight: 400;
	margin-right: 30px;
}

.game_video .new_video .nv_tit li {
	font-size: 16px;
	margin-right: 40px;
	letter-spacing: 1px;
}

.game_video .new_video .nv_tit>a {
	font-size: 12px;
	color: #7ea1a6;
	margin-right: 50px;
}

.game_video .new_video .nv_tit>a.no-mr {
	margin-right: 0;
}

.game_video .new_video .nv_content {
	margin-top: 30px;
}

.game_video .new_video .nv_content li {
	width: 193px;
	height: 185px;
	float: left;
	margin-right: 16px;
	margin-bottom: 14px;
}

.game_video .new_video .nv_content li:nth-child(4n) {
	margin-right: 0;
}

.game_video .new_video .nv_content li p {
	font-size: 14px;
	height: 42px;
	overflow: hidden;
	/*溢出隐藏*/
	margin-top: 8px;
	line-height: 24px;

}

.game_video .new_video .nv_content li span {
	font-size: 12px;
	color: #919091;
	margin-top: 5px;
	display: block;
	float: left;
}

.game_video .new_video .nv_content li span+span {
	float: right;
}

/*专辑*/
.new_album {
	width: 496px;
	height: 432px;
	margin-top: 70px;
}

.new_album .na_tit {
	width: 100%;
	height: 35px;
	line-height: 35px;
}

.new_album .na_tit h2,
.new_album .na_tit li {
	float: left;
}

.new_album .na_tit h2 {
	font-style: 24px;
	font-weight: 400;
	margin-right: 30px;
}

.new_album .na_tit ul li {
	width: 40px;
	margin-right: 15px;
}

.new_album .na_tit ul li:last-child {
	margin-right: 0;
}

.new_album .na_content {
	margin-top: 30px;
}

.new_album .na_content li {
	width: 156px;
	height: 337px;
	float: left;
	margin-right: 13px;
}

.new_album .na_content ul li:last-child {
	margin-right: 0;
}

.new_album .na_content ul li p {
	font-size: 14px;
	color: #919091;
	height: 42px;
	line-height: 21px;
	margin-top: 16px;
	overflow: hidden;
	padding: 0 5px;
}

.new_album .na_content ul li a img:nth-child(3) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	float: left;
	margin-top: 16px;
	margin-left: 5px;
	margin-right: 10px;
}

.new_album .na_content ul li a b {
	margin-top: 16px;
	display: inline-block;
	line-height: 30px;
	font-size: 12px;
}

.new_album .na_content>a {
	display: block;
	width: 506px;
	height: 50px;
	background: url(../img/index-spr.png);
	background-position: 0 -522px;
	color: #ab8e66;
	font-size: 16px;
	text-align: center;
	line-height: 50px;
	margin-left: -10px;
}

/*赛事中心*/
.game_match {
	width: 1332px;
	margin: 70px auto;
	padding-bottom: 60px;
	margin-bottom: 0;
	position: relative;
}

.game_match:after {
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #ddd;
	left: 0;
	bottom: 0;
	content: "";
}

.game_match .match_tit {
	width: 100%;
	height: 35px;
	line-height: 35px;
	border-bottom: 1px solid #ddd;
}

.game_match .match_tit h2,
.game_match .match_tit li {
	float: left;
}

.game_match .match_tit h2 {
	font-size: 24px;
	font-weight: 400;
	margin-right: 40px;
}

.game_match .match_tit li {
	margin-right: 40px;
	font-size: 16px;
}

.game_match .match_tit li.check a {
	color: #1da6ba;
}

.game_match .match_tit a:last-child {
	color: #676767;
	font-weight: 700;
	margin-right: 20px;
}

.game_match .match_tit a:nth-child(3) {
	font-size: 12px;
	color: #7ea1a6;
}

.game_match .box1 {
	width: 268px;
	height: 142px;
	margin-top: 36px;
	margin-right: 84px;
	float: left;
}

.game_match .box1:last-child {
	margin-right: 0;
	margin-top: 35px;
}

.game_match .box1 h6 {
	font-size: 16px;
	color: #29a2b4;
	font-weight: 700;
	line-height: 35px;
	height: 35px;
}

.game_match .box1 .match_details_tit {
	margin-bottom: 7px;
}

.game_match .box1 .match_details_tit span:first-child {
	line-height: 15px;
	height: 15px;
	padding: 0 2px;
	background: #bcbcbc;
	display: inline-block;
	font-size: 12px;
	color: #fff;
	border-radius: 2px;
}

.game_match .box1 .match_details_tit span:nth-child(2) {
	font-size: 12px;
	color: #676767;
	margin-left: 8px;
}

.game_match .box1 .match_details_tit a {
	float: right;
	display: block;
	width: 28px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border: 1px solid #7ea1a6;
	color: #7ea1a6;
	padding: 0 6px;
	font-size: 12px;
	margin-left: 8px;
}

.game_match .box1 .match_details_tit a.video {
	border: 1px solid #bb9a6c;
	color: #bb9a6c;
}

.game_match .box1 .match_details div {
	height: 44px;
	line-height: 44px;
	background: #f7f6f6;
	margin-bottom: 1px;

}

.game_match .box1 .match_details_box {
	margin-bottom: 39px;
}

.game_match .box1 .match_details div img {
	width: 30px;
	height: 30px;
	float: left;
	margin-top: 7px;
	margin-left: 7px;
	margin-right: 16px;
}

.game_match .box1 .match_details div p {
	float: left;
}

.game_match .box1 .match_details div span {
	float: right;
	display: block;
	text-align: center;
	width: 23px;
	height: 44px;
	line-height: 44px;
	background: #bcbcbc;
	color: #fff;
}

/*创作馆*/
.create_bg {
	width: 1332px;
	margin: 0 auto;
	margin-bottom: 600px;
}

.create_bg .create_left {
	width: 820px;
	height: 424px;
}

.create_bg .create_left .create_tit {
	width: 100%;
	height: 35px;
	line-height: 35px;
	margin-top: 66px;
}

.create_bg .create_left .create_tit h2 {
	font-size: 24px;
	font-weight: 700;
}

.create_bg .create_left .create_con {
	margin-top: 30px;
}

.create_bg .create_left li {
	width: 192px;
	height: 176px;
	float: left;
	margin-right: 17px;
	margin-bottom: 17px;
	overflow: hidden;
}

.create_bg .create_left li:nth-child(4n) {
	margin-right: 0;
}

.create_bg .create_left li img {
	width: 100%;
}

.create_bg .create_right {
	width: 496px;
	height: 424px;
	margin-top: 66px;
}

.create_bg .create_right li {
	width: 240px;
	height: 87px;
	float: right;
	margin-top: 16px;
}

.create_bg .create_right li:nth-child(1) {
	width: 241px;
	height: 411px;
	float: left;
	margin-right: 10px;
	margin-top: 23px;
}

.create_bg .create_right li:nth-child(2) {
	margin-top: 66px;
}

.create_bg .create_right>a {
	display: block;
	width: 240px;
	height: 58px;
	float: right;
	margin-top: 16px;
	text-align: center;
	background: url(../img/index-spr.png);
	background-position: -193px -253px;
}

.create_bg .create_right a>p {
	line-height: 58px;
	color: white;
}

/* 底部文本 */
.footer {
	width: 100%;
	height: 250px;
	background-color: #E3E2E2;
	padding-top: 90px;
	padding-bottom: 40px;
}

.footer .footer-item {
	width: 1800px;
	height: 320px;
	margin: 0 auto;
}

.footer .footer-item .foot-list {
	width: 400px;
	height: 100px;
	margin-left: 100px;
	display: inline-block;

}

.footer .footer-item .foot-list a {
	display: inline-block;
	width: 193px;
	height: 50px;
	background: url(../img/topfoot-spr.png);
	background-position: 193px 11px;
}

.footer .footer-item .foot-list span {
	display: inline-block;
	margin-left: 40px;
	width: 90px;
	height: 39px;
	background: url(../img/topfoot-spr.png) no-repeat;
	background-position: -213px -79px;
}

.footer .footer-item .foot_links {
	float: right;

}

.footer .footer-item .foot_links li,
a,
p,
span {
	color: #9f9378;
	font-size: 18px;
	line-height: 30px;
}

.footer .footer-item .foot_links li a img {
	display: inline-block;
	width: 12px;
	height: 12px;
}

.footer .footer-item .foot_links .f_line {
	margin-left: 5px;
	margin-right: 5px;
}

主页效果图:

攻略页面