码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2020-02-26 17:09:58      阅读：97      评论：0      收藏：0      [点我收藏+]

标签：footer   互联网   float   颠覆   logo   none   over   position   VID   



<!--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;
}
/*底部结束*/




 


 技术图片


 
通过HTML和CSS1:1还原风暴英雄官方网站
标签：footer   互联网   float   颠覆   logo   none   over   position   VID   
原文地址：https://www.cnblogs.com/TomHe789/p/12367213.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！