webstrom学习笔记7(暴雪战网)

    
    
    




    

        

    
    

        
游戏
        
商城
        
新闻
        
电子竞技
        
Blizzard
    
    

        
支持
        
我的账户
    



    



同数以百万计的玩家一同参与线上活动，共同感受最为精彩的游戏体验！
    了解更多内容
    

        注册战网通行证
        登录
    


    

        
            获取战网暴雪网桌面应用
        
    
    





    

        

            《魔兽世界》
        
        

            《暗黑破坏神3》
        
        

            《星际争霸2》
        
        

            《星际争霸2 重制版》
        
        

            《风暴英雄》
        
        

            《炉石传说》
        
        

            《守望先锋》
        
    

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.clear{
    clear: both;
}
img{
    vertical-align: middle;/*img独有标签，会比图片大3px,初始化图片*/
}
body{
    background: url("image/bgtop.jpg") center 0;
    background-repeat: no-repeat;
}
.head{
    height: 60px;
    background: rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.head .logo{
    float: left;
    margin: 0;

}
.head .l-nav{
    float: left;
    height: 60px;
}
.head .l-nav li{
    float: left;
    margin: 0 10px;
}
.head .l-nav li a{
text-decoration: none;
    display: block;
    height: 60px;
    line-height: 60px;
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    padding-left: 10px;
}
.head .l-nav li a:hover{
    color: rgba(255,255,255);
}


.head .r-nav{
    float: right;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;
}
.head .r-nav li{
    float: left;
    margin:0 10px ;
    margin-left: 30px;
}
.head .r-nav li a{
    font-size: 18px;
    text-decoration: none;
    display: block;
    height: 60px;
    line-height: 60px;
    color: rgba(255,255,255,0.7);

}
.head .r-nav li a:hover{
    color: rgba(255,255,255);
}
.m-logo{
    margin: 50px 0;
    margin-left: 30px;
}
.middle{
    width: 95%;
    margin: 0 auto;

}
.middle .m-left{
    width: 56%;
    height: 300px;
    float: left;
    ;
}
.middle .m-left .title{
    color: #a2b9c2;
    font-size: 30px;
    letter-spacing: 1px;/*字和字之间的间距*/
    cursor: pointer;
}
.middle .m-left .title span{
    font-size: 14px;
    padding: 3px 5px;
    border: 1px solid #3a4c53;
    border-radius: 5px;
    position: relative;
    top: -5px;
    left: 0;
}
.middle .m-left .title:hover{
    color: #FFFFFF;
}
.middle .m-left .title:hover span{/*hover状态下的元素效果*/
    background:#3a4c53 ;
    color: rgba(255,255,255,0.7);
}
.middle .m-left .a1{
    color: #FFFFFF;
    font-size: 12px;
    background: #006a9b;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;
}
.middle .m-left .a1:hover{
   color: #FFFFFF;
    background-color: #008dc5;
}
.middle .m-left .a2{
text-decoration: none;
    color: #09b6ff;
    padding-left:8px;
    font-size: 14px;

}
.middle .m-left .a2:hover{
    color: #FFFFFF;
}
.middle .m-left .login{
    margin-top: 30px;
}
/*.r-middle{
    width: 250px;
    height: 176px;
    float: right;
    background-color: bisque;
    margin-top: -435px;
    padding-left:35px;
    background: url("image/app-screen-small(2).png");
}
.r-middle a{
    text-decoration: none;
    color: #00b6ff;
    font-size: 14px;
    text-align: center;
    margin-top: 70px;
}*/
.middle .m-right{
    width: 20%;
    height: 330px;
    float: right;
}
.middle .m-right a{
    width: 256px;
    display: block;
    height: 200px;
    background:url("image/app-screen-small(2).png" ) no-repeat;
    position: relative;/*相对定位*/
}
.middle .m-right a span{
position: absolute;/*绝对定位*/
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #09b6ff;
    font-size: 14px;
}
.middle .m-right a:hover{
    background:url("image/app-screen-small(2).png" ) no-repeat left -256px top 0;
}
.middle .m-right a:hover span{
    color: #FFFFFF;
}
.middle-bottom{
    height: 400px;
    background:url("image/bg-middle.jpg") no-repeat #d2d1cd;

}
.middle-bottom ul{
    width: 90%;
    margin: 0 auto;
    height: 400px;
    position: relative;
    top: -80px;
}
.middle-bottom ul li.b1{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b1 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/wow-cn.png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b1 a:hover{
    background: orange url("image/wow-cn.png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b1 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b1 a:hover span{
    color: #FFFFFF;
}
/*------------------------------------*/
.middle-bottom ul li.b2{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b2 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/diablo3-cn(2).png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b2 a:hover{
    background: orange url("image/diablo3-cn(2).png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b2 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b2 a:hover span{
    color: #FFFFFF;
}
/*----------------------------------------*/
.middle-bottom ul li.b3{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b3 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/starcraft2-cn.png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b3 a:hover{
    background: orange url("image/starcraft2-cn.png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b3 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b3 a:hover span{
    color: #FFFFFF;
}
/*-----------------------------*/
.middle-bottom ul li.b4{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b4 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/starcraft-cn(2).jpg") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b4 a:hover{
    background: orange url("image/starcraft-cn(2).jpg") no-repeat left -248px top 0;

}
.middle-bottom ul li.b4 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b4 a:hover span{
    color: #FFFFFF;
}
/*----------------------------------*/
.middle-bottom ul li.b5{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b5 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/heroes-cn(2).png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b5 a:hover{
    background: orange url("image/heroes-cn(2).png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b5 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b5 a:hover span{
    color: #FFFFFF;
}
/*--------------------------------*/
.middle-bottom ul li.b6{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b6 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/hearthstone-cn.png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b6 a:hover{
    background: orange url("image/hearthstone-cn.png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b6 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b6 a:hover span{
    color: #FFFFFF;
}
/*-----------------------------*/
.middle-bottom ul li.b7{
    float: left;
    background: red;
    margin: 0 5px;

}
.middle-bottom ul li.b7 a{
    display: block;
    height: 392px;
    width:161px ;
    background:url("image/overwatch-cn.png") no-repeat;
    border: 1px solid #3e414a ;
    position: relative;
}
.middle-bottom ul li.b7 a:hover{
    background: orange url("image/overwatch-cn.png") no-repeat left -248px top 0;

}
.middle-bottom ul li.b7 a span{
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: absolute;
    top: 15px;
    text-align: center;
    font-size: 15px;
}
.middle-bottom ul li.b7 a:hover span{
    color: #FFFFFF;
}

火狐截图_2018-10-26T07-42-01.451Z.png