admin管理员组文章数量:1619183
由于原文代码太多,就不全部展示了,如果有需求的话可以评论留言私信,发你完整文件压缩包
下面是主页的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;
}主页效果图:
攻略页面
攻略页面
版权声明：本文标题：LOL英雄联盟首页以及攻略页面制作 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728792692a1173864.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论