通过HTML和CSS1:1还原风暴英雄官方网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>《风暴英雄》官方网站_暴雪出品 明星汇聚 MOBA竞技新篇章</title>
<link rel="shortcut icon" href="heroes.ico" type="image/x-icon">
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body> <div class="header">
<div class="headerTop">
</div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div class="logo">
<img src="data:images/logo.png" alt="">
</div>
<a href="#"></a>
</div>
<div class="main">
<div class="slogn"></div>
<ul class="eyeList">
<li class="eyeItem">
<!--<img src="data:images/borde1.png" alt="">-->
<a href="#"><img src="data:images/eye1.jpg" alt=""></a>
<h3>颠覆传统 MOBA 2.0</h3>
</li>
<li class="eyeItem">
<!--<img src="data:images/borde1.png" alt="">-->
<a href="#"><img src="data:images/eye2.jpg" alt=""></a>
<h3>赛季性枢纽异变：经验球</h3>
</li>
<li class="eyeItem">
<!--<img src="data:images/borde1.png" alt="">-->
<a href="#"><img src="data:images/eye3.jpg" alt=""></a>
<h3>2020暴雪打折季</h3>
</li>
</ul>
</div>
<div class="footer">
<div class="footer_in">
<div class="footer_top clearfix">
<div class="fl">
<a href="#">
<i></i>
在线客服
</a>
<a href="#">
<i></i>
反馈
</a>
<a href="#">
<i></i>
加入我们
</a>
</div>
<div class="fr">
<span>合作品牌</span>
<i></i>
<b class="iconfont icon-jiahao"></b>
<span>|</span>
<b class="iconfont icon-sanjiaodown"></b>
</div>
</div>
<div class="footer_middle clearfix">
<div class="fl middle_left">
<img src="data:images/blizzard.png" alt="">
<img src="data:images/163.png" alt="">
</div>
<div class="rl middle_right">
<p>
<a href="#">隐私</a>
<span>|</span>
<a href="#">法律条款</a>
<span>|</span>
<a href="#">API</a>
</p>
<div>
<p>©2019 暴雪娱乐有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 | 新广出审[2014]1356号</p>
<p>
<a href="#">文网进字[2014]0115号</a> |
<a href="#">沪网文号〔2017〕9633-727号</a> |
<a href="#">增值电信业务经营许可证编号：沪B2－20080012</a>
</p>
<p>互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号 |
<a href="#">上海市网络游戏行业自律公约</a>
</p>
<p>
<img src="data:images/footer1.png" alt="">
<img src="data:images/footer2.png" alt="">
<img src="data:images/footer3.png" alt="">
<img src="data:images/footer4.png" alt="">
<img src="data:images/footer5.png" alt="">
<span>|</span>适龄提示：适合13岁及以上使用 <a href="#">家长监护工程></a>
</p>
</div> <div class="bottom"></div>
</div>
</div>
<div class="footer_bottom">
<p>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。</p>
<p>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
</div>
</div>
</div>
<video autoplay loop muted poster="images/bg.jpg">
<source src="data:images/bg.mp4" type="video/mp4">
<source src="data:images/bg.webm" type="video/webm">
</video>
</body>
</html>
/*CSS代码*/
/*背景开始*/
video{
width: 100%;
height: 1080px;
object-fit: cover;
position: absolute;
top:;
left:;
z-index:;
}
/*背景结束*/
/*头部开始*/
.header>.headerTop{
width: 100%;
height: 150px;
background-image: url(../images/headerTop.png);
background-repeat: repeat-x;
position: absolute;
z-index:;
top:;
}
.header>ul{
width: 1260px;
height: 98px;
margin: 0 auto;
padding:;
padding-top: 85px;
list-style: none;
z-index:;
position: absolute;
left: 50%;
transform: translateX(-50%);
/*position: relative;*/
}
.header>ul>li{
margin:;
padding:;
width: 215px;
float: left;
height: 98px;
font-size: 18px;
/*position: relative;*/
}
.header>ul>li:nth-child(2){
margin-right: 398px;
}
.header>ul>li>a{
display: block;
width: 100%;
height: 100%;
text-align: center;
background: url("../images/hover.png");
transition: background-position 0s;
}
.header>ul>li:nth-child(2)>a{
background-position: 0 0;
}
.header>ul>li:nth-child(1)>a:hover{
background-position: 0 -98px;
}
.header>ul>li:nth-child(2)>a{
background-position: -215px 0;
}
.header>ul>li:nth-child(2)>a:hover{
background-position: -215px -98px;
}
.header>ul>li:nth-child(3)>a{
background-position: -825px 0;
}
.header>ul>li:nth-child(3)>a:hover{
background-position: -825px -98px;
}
.header>ul>li:nth-child(4)>a{
background-position: -1040px 0;
}
.header>ul>li:nth-child(4)>a:hover{
background-position: -1040px -98px;
}
.header>.logo{
width: 768px;
position: absolute;
left: 50%;
margin-left: -394px;
top:;
z-index:;
}
.header>a{
width: 393px;
height: 248px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index:;
}
/*头部结束*/
/*内容开始*/
.main{
width: 100%;
height: 1080px;
position: relative; /*background-color: skyblue;*/
}
.main>.slogn{
/*width: 100%;*/
background: url(../images/slogan.png) no-repeat 0 0;
width: 1372px;
height: 419px;
position: absolute;
left: 50%;
margin-left: -698px;
top: 300px;
z-index:;
}
.main>.eyeList{
/*width: 100%;*/
/*background-color: skyblue;*/
width: 1061px;
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
z-index:;
text-align: center;
}
.main>.eyeList>.eyeItem{
/*background-color: brown;*/
width: 347px;
height: 219px;
float: left;
background-image: url("../images/borde1.png");
background-repeat: no-repeat;
position: relative;
}
.main>.eyeList>.eyeItem>a{
position: absolute;
top: 25px;
left: 25px;
}
.main>.eyeList>.eyeItem>h3{
position: absolute;
top: 160px;
left: 100px;
font-size: 16px;
font-weight:;
color: #feda03;
text-align: center;
height: 25px;
line-height: 25px;
}
/*内容结束*/
/*底部开始*/
.footer{
width: 100%;
height: 502px;
background-color: #0D0017;
position: absolute;
left:;
top: 1080px;
border-top: 2px solid #ff7e00;
}
.footer>.footer_in{
width: 1000px;
height: 422px;
margin: 0 auto;
}
.footer_in>.footer_top{
padding-top: 125px;
padding-bottom: 45px; }
.footer>.footer_in>.footer_top>.fl>a{
display: inline-block;
text-decoration: none;
font-size: 14px;
color: #fff;
margin-right: 10px;
}
.footer>.footer_in>.footer_top>.fl i{
display: inline-block;
width: 19px;
height: 19px;
background: url("../images/footer-top.png") no-repeat;
background-position: -6px -7px;
margin-right: 7px;
vertical-align: text-top;
}
.footer>.footer_in>.footer_top>.fl a:nth-child(2)>i{
background-position: -36px -8px;
}
.footer>.footer_in>.footer_top>.fl a:nth-child(3)>i{
background-position: -6px -100px;
}
.footer>.footer_in>.footer_top>.fr{
float: right;
height: 30px;
line-height: 30px;
}
.footer>.footer_in>.footer_top>.fr>span{
font-size: 14px;
color: #fff;
margin: 0 10px;
}
.footer>.footer_in>.footer_top>.fr>i{
display: inline-block;
width: 95px;
height: 26px;
background: url("../images/footer-top.png") no-repeat;
background-position: -142px -44px;
vertical-align: top;
}
.footer>.footer_in>.footer_top>.fr>b{
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
font-size: 12px;
color: #fff;
background: #2b0473;
border: 1px solid #462385;
}
.footer .footer_middle .rl{
float: left;
}
.middle_left{
margin-right: 75px;
}
.footer_middle>.rl>p>a{
display: inline-block;
text-decoration: none;
color: #ccc;
font-size: 12px;
margin-left: 10px;
}
.footer_middle>.rl>p>span{
font-size: 14px;
color: #ccc;
margin: 0 10px;
}
.footer_middle>.rl>div>p{
font-size: 12px;
color: #8eb1bc;
}
.footer_middle>.rl>div>p>a{
text-decoration: none;
color: #8eb1bc;
}
.footer_middle>.rl>div>p>a:hover{
color: #fff;
}
.footer_in>.footer_bottom{
color: #417aa1;
/*padding-top: 35px;*/
font-size: 12px;
text-align: center;
margin-top: 35px;
}
/*底部结束*/
通过HTML和CSS1:1还原风暴英雄官方网站的更多相关文章
- Python3爬取王者官方网站英雄数据
爬取王者官方网站英雄数据 众所周知,王者荣耀已经成为众多人们喜爱的一款休闲娱乐手游,今天就利用python3 爬虫技术爬取官方网站上的几十个英雄的资料,包括官方给出的人物定位,英雄名称,技能名称,CD ...
- 风暴英雄 http 302重定向 正在等待游戏模式下载完成
抓包 在抓到的数据包里面,看到一个http get请求,右键选中,然后follow stream wireshark自动进行数据包过滤tcp.stream eq 1340,并且可以看到完整的数据通讯 ...
- SharePoint 2010 网站备份还原简单介绍
今天尝试了SharePoint2010网站的备份和还原,从网上搜一些文档看看,然后自己试试,感觉和2007的操作没什么太大的区别,跟大家分享下自己尝试的命令行方式和数据库的方式,2007自己常用的也是 ...
- 非智能手机通信录备份并还原至Android智能手机方法
随着智能手机早已深入普通用户的生活,2-3线城市的用户也逐渐从使用非智能机换成使用智能机.最近便遇见了这样一个转移通讯录的需求.之前使用的手机型号是BBK K201,通信录中绝大部分保存在了手机中,最 ...
- Sharepoint 2013 网站集的删除与还原
一.可以通过三种方法删除网站集: 1.打开Sharepoint 2013 管理页面首页 ---> 单击‘应用程序管理(Application Management)’并进入该页面 ---> ...
- Docker 学习笔记（持久化数据的备份，还原）
假如我们应用程序需要一台 mssql 数据库来持久化数据,我们将 mssql 数据库运行于 Docker 容器中: docker run -d -p 1433:1433 -e "ACCEPT ...
- MySql的备份还原
备份数据是数据库管理最常用的操作.为了保证数据库中数据的安全,数据管理员需要定期进行数据备份.一旦数据库遭到破坏,便可通过备份的文件来还原数据库.因此,数据备份是一项很重要的工作. 数据备份 使用my ...
- pyinstaller 还原python代码的方法
pyinstaller 的作用就是将python打包成对应平台的可执行文件.一般这种可执行文件的体积都比较大. 我们可以先通过逆向软件查看一下具体信息 查看字符串信息 只要有诸如以上的字符串 就说明这 ...
- 用Python爬取《王者荣耀》英雄皮肤数据并可视化分析，用图说话
大家好,我是辰哥~ 今天辰哥带大家分析一波当前热门手游<王者荣耀>英雄皮肤,比如皮肤上线时间.皮肤类型(勇者:史诗:传说等).价格. 1.获取数据 数据来源于<王者荣耀官方网站> ...
随机推荐
- [bzoj2004] [洛谷P3204] [Hnoi2010] Bus 公交线路
Description 小Z所在的城市有N个公交车站,排列在一条长(N-1)km的直线上,从左到右依次编号为1到N,相邻公交车站间的距 离均为1km. 作为公交车线路的规划者,小Z调查了市民的需求,决 ...
- Wordpress4.9.6 任意文件删除漏洞复现分析
第一章 漏洞简介及危害分析 1.1漏洞介绍 WordPress可以说是当今最受欢迎的(我想说没有之一)基于PHP的开源CMS,其目前的全球用户高达数百万,并拥有超过4600万次的超高下载量.它是一个开 ...
- js解析json时报：Unexpected token s in JSON at position 0
原因肯定是返回的json格式有问题 最有可能是后台在程序执行过程中,输出了某些调试信息等等,这些输出的字符串和json拼接成了新的字符串来解析,这时就会报错: 比如我在入口文件里var_dump了__ ...
- android开发实战-记账本APP（二）
继昨天的开发,继续完成今天的内容. (一)开始构建一些业务逻辑,开始构建记账本的添加一笔记账的功能. ①对fab按钮的click时间进行修改,创建一个AlertDialog.Builder对象,因此我 ...
- MySQL5.7 中的query_cache_size
摘自:http://jackyrong.iteye.com/blog/2173523 1 原理 MySQL查询缓存保存查询返回的完整结果.当查询命中该缓存,会立刻返回结果,跳过了解析,优化和执行 ...
- <状压DP>solution-POJ3311_Hie with the Pie
Hie with the Pie Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers ...
- IntelliJ IDEA 2020 的Debug功能也太好用了，真香！
写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...
- lua学习之语句篇
语句 赋值 修改一个变量或者修改 table 中的一个字段的值 多重赋值,lua 先对等号右边的所有元素进行求值,然后再赋值 值的个数小于变量的个数,那么多余的变量就置为 nil 初始化变量,应该为每 ...
- C# 多态和接口
1多态可以有属性,接口只有方法 2关键字不同,多态有静态多态(abstract)和动态多态(virtual),静态多态不能new()出自己,动态多态可以;多态中可以有自己的方法可设置不需要子类重写,接 ...
- Visual Studio 2015 配置 Python 环境
Visual Studio 2015可以在安装时选择安装Python环境,首次使用VS2015执行python时需要配置环境变量: 配置VS2015的环境前需要先下载Python并安装: https: ...