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

<!--HTML代码-->

<!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="images/logo.png" alt="">
        </div>
        <a href="#"></a>
    </div>
    <div class="main">
        <div class="slogn"></div>
        <ul class="eyeList">
            <li class="eyeItem">
                <!--<img src="images/borde1.png" >-->
                <a href="#"><img src="images/eye1.jpg" alt=""></a>
                <h3>颠覆传统 MOBA 2.0</h3>
            </li>
            <li class="eyeItem">
                <!--<img src="images/borde1.png" >-->
                <a href="#"><img src="images/eye2.jpg" alt=""></a>
                <h3>赛季性枢纽异变：经验球</h3>
            </li>
            <li class="eyeItem">
                <!--<img src="images/borde1.png" >-->
                <a href="#"><img src="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="images/blizzard.png" alt="">
                    <img src="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="images/footer1.png" alt="">
                            <img src="images/footer2.png" alt="">
                            <img src="images/footer3.png" alt="">
                            <img src="images/footer4.png" alt="">
                            <img src="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="images/bg.mp4" type="video/mp4">
        <source src="images/bg.webm" type="video/webm">
    </video>
</body>
</html>

/*CSS代码*//*背景开始*/
video{
    width: 100%;
    height: 1080px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
/*背景结束*/
/*头部开始*/
.header>.headerTop{
    width: 100%;
    height: 150px;
    background-image: url(../images/headerTop.png);
    background-repeat: repeat-x;
    position: absolute;
    z-index: 4;
    top: 0;
}
.header>ul{
    width: 1260px;
    height: 98px;
    margin: 0 auto;
    padding: 0;
    padding-top: 85px;
    list-style: none;
    z-index: 10;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /*position: relative;*/
}
.header>ul>li{
    margin: 0;
    padding: 0;
    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: 0;
    z-index: 9;
}
.header>a{
    width: 393px;
    height: 248px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}
/*头部结束*/
/*内容开始*/
.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: 5;
}
.main>.eyeList{
    /*width: 100%;*/
    /*background-color: skyblue;*/
    width: 1061px;
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    z-index: 7;
    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: 400;
    color: #feda03;
    text-align: center;
    height: 25px;
    line-height: 25px;
}
/*内容结束*/
/*底部开始*/
.footer{
    width: 100%;
    height: 502px;
    background-color: #0D0017;
    position: absolute;
    left: 0;
    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;
}
/*底部结束*/

原文地址：https://www.cnblogs.com/TomHe789/p/12367213.html

时间： 2024-08-05 08:38:39

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

xtrabackup进行MySQL数据库备份/还原

http://hongge.blog.51cto.com/ 使用xtrabackup进行MySQL数据库备份前面介绍mysqldump备份方式是采用逻辑备份,其最大的缺陷就是备份和恢复速度都慢,对于一个小于50G的数据库而言,这个速度还是能接受的,但如果数据库非常大,那再使用mysqldump备份就不太适合了. 这时就需要一种好用又高效的工具,xtrabackup就是其中一款,号称免费版的InnoDB HotBackup. Xtrabackup实现是物理备份,而且是物理热备目前主流的有两个工

mysql备份与还原

防伪码:志向不过是记忆的奴隶,生气勃勃地降生,但却很难成长. 一.mysqldump备份结合binlog日志恢复 MySQL 备份一般采取全库备份加日志备份的方式,例如每天执行一次全备份,每小时执行一次二进制日志备份.这样在 MySQL 故障后可以使用全备份和日志备份将数据恢复到最后一个二进制日志备份前的任意位置或时间. 1.binlog介绍 mysql的二进制日志记录着该数据库的所有增删改的操作日志(前提是要在自己的服务器上开启binlog),还包括了这些操作的执行时间.为了显示这些二进

SharePoint 2010 网站备份还原简单介绍

今天尝试了SharePoint2010网站的备份和还原,从网上搜一些文档看看,然后自己试试,感觉和2007的操作没什么太大的区别,跟大家分享下自己尝试的命令行方式和数据库的方式,2007自己常用的也是这两种方式. 1. 命令行的方式在服务器端,所有程序 - Microsoft SharePoint 2010 Products - SharePoint 2010 Management Shell 确定备份网站命令:backup-SPSite http://localhost:10086 -Pa

DBA 必知的 MYSQL 备份与还原方法

一mysqldump 备份结合 binlog 日志恢复说明:MySQL 备份一般采取全库备份加日志备份的方式,例如每天执行一次全备份,每小时执行一次二进制日志备份.这样在 MySQL 故障后可以使用全备份和日志备份将数据恢复到最后一个二进制日志备份前的任意位置或时间. Binlog 功能默认是关闭的,没有开启. 查看 binlog,用 mysqlbinlog -v mysql-bin.000001 主从同步恢复数据库开启 binary log 功能:通过编辑 my.cnf 中的 log-b

Sharepoint 2013 网站集的删除与还原

一.可以通过三种方法删除网站集: 1.打开Sharepoint 2013 管理页面首页 ---> 单击‘应用程序管理(Application Management)’并进入该页面 ---> 单击‘删除一个网站集(Delete a site collection)’并打开该页面 ---> 选择想要删除的网站集并点击右下角的‘删除’按钮 ---> 完成删除. 2.打开想要删除的网站集的首要网站 ---> 点击页面右上角的齿轮按钮 ---> 在下拉菜单中选择‘网站设置(Sit

实现Mysql 备份与还原

前言:本篇主要讲 1.使用Mysqldump结合binlog日志备份与恢复 2.使用xtrabackup进行Mysql数据库备份与恢复 ################# mysqldump备份结合binlog日志恢复功能介绍 ##################### MySQL备份一般采取全库备份加日志备份的方式,例如每天执行一次全备份,每小时执行一次二进制日志备份.这样在MySQL故障后可以使用全备份和日志备份将数据恢复到最后一个二进制日志备份前的任意位置或时间. 1.binlog介绍 m

Eclipse 导入 epf 文件后还原默认配色

import 了 epf文件后,发现不适合自己,还原默认配置 1.关闭Eclipse 2.在workspace下找到".metadata\.plugins\org.eclipse.core.runtime",删除其中.setting 文件夹的所有文件 3.重启Eclipse,还原成功主题推荐网站: http://eclipsecolorthemes.org/

xtrabackup备份、还原

一.xtrabackup简介前面介绍mysqldump备份方式是采用逻辑备份,其最大的缺陷就是备份和恢复速度都慢,对于一个小于50G的数据库而言,这个速度还是能接受的,但如果数据库非常大,那再使用mysqldump备份就不太适合了. 这时就需要一种好用又高效的工具,xtrabackup就是其中一款,号称免费版的InnoDB HotBackup. Xtrabackup实现是物理备份,而且是物理热备目前主流的有两个工具可以实现物理热备:ibbackup和xtrabackup:ibbackup是商

DBA必知的mysql备份与还原的几大方法

博主QQ:819594300 博客地址:http://zpf666.blog.51cto.com/ 有什么疑问的朋友可以联系博主,博主会帮你们解答,谢谢支持!一.mysqldump备份结合binlog日志恢复说明:MySQL备份一般采取全库备份加日志备份的方式,例如每天执行一次全备份,每小时执行一次二进制日志备份.这样在MySQL故障后可以使用全备份和日志备份将数据恢复到最后一个二进制日志备份前的任意位置或时间. 1.binlog介绍 1)该日志记录着数据库的所有增.删.改的操作日志,还包括这