通过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.获取数据数据来源于<王者荣耀官方网站> ...

随机推荐

Docker 安装 Elasticsearch+kibana
1 下载镜像 docker pull elasticsearch:7.4.1 docker pull kibana:7.4.1 拉取的镜像如下: 2 创建network 创建一个网络,名字任意取,使得 ...
set(待整理)
set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...
20191211 HNOI2017 模拟赛问题A
题目: 分析: 好难好难... 下来听神仙讲.. 每一个长度为n-2的prufer序列一一对应一棵大小为n的树... 每个点在序列中的出现次数为该点的度数减一哦??? ... 哦... prufer ...
python3 密码字典匹配wifi密码，有界面
界面: 需要先安装一下pywifi模块代码: # coding:utf-8 from tkinter import * from tkinter import ttk import pywifi f ...
RMQ算法使用ST表实现
RMQ RMQ (Range Minimum Query),指求区间最小值.普通的求区间最小值的方法是暴力. 对于一个数列: \[ A_1,~ A_2,~ A_3,~ \cdots,~ A_n \] ...
个人作业四——Alpha测试
个人作业四--Alpha测试这个作业属于哪个课程软件工程这个作业要求在哪里作业要求团队名称 GP工作室这个作业的目标对其他小组的项目进行测试测试人员许佳文学号 2017310242 ...
《HelloGitHub》第 46 期
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣人群的月刊,月刊的内容包括:各种编 ...
Nutz框架-- Cnd条件使用原生sql
案例今天接到一个临时的业务需求,做一个简单的过滤作为临时业务需要使用一两天,于是想到在原有的Cnd条件上加上一个Not like 进行过滤,但是发现现有Cnd条件查询好像满足不了解决方案使用Nu ...
Hexo+coding实现自动化部署
前言昨天写了一篇利于云环境写博客,但是让群里大佬们看了下.评论道:"写的不错,但还是觉得这个云环境太繁琐了,没有CI/CD自动化部署方便".于是我便百度查了下,网上文章大部分是通 ...
如何更改Jframe里Jpanel的大小
先贴代码: package xiya; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; ...

通过HTML和CSS1:1还原风暴英雄官方网站

通过HTML和CSS1:1还原风暴英雄官方网站的更多相关文章

随机推荐

热门专题