美文网首页
webstrom学习笔记7(暴雪战网)

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

作者: 丫甘九 | 来源:发表于2018-10-26 15:43 被阅读0次
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>韩可爱的网页</title>
    <link href="blizzard.css" rel="stylesheet">
</head>
<body>
<!--toubu-->
<div class="head">
    <div class="logo">
        <a href=""><img src="image/logo.png"></a>

    </div>
    <ul class="l-nav">
        <li><a href="">游戏</a></li>
        <li><a href="">商城</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">电子竞技</a></li>
        <li><a href="">Blizzard</a></li>
    </ul>
    <ul class="r-nav">
        <li><a href="">支持</a></li>
        <li><a href="">我的账户</a></li>
    </ul>
</div>
<!--中部logo-->
<div class="m-logo">
    <a href=""><img src="image/bnet.png"></a>
</div>
<div class="middle">
<div class="m-left">
<p class="title">同<b>数以百万计</b>的玩家一同参与线上活动，共同感受最为精彩的游戏体验！
    <span>了解更多内容</span></p>
    <p class="login">
        <a href="" class="a1">注册战网通行证</a>
        <a href="" class="a2">登录</a>
    </p>

</div>
    <div class="m-right">
        <a href="">
            <span>获取战网暴雪网桌面应用</span>
        </a>
    </div>
    <div class="clear"></div>
</div>
<!--<div class="r-middle"><a href="">获取战网暴雪网桌面应用</a></div>-->

<div class="middle-bottom">
    <ul>
        <li class="b1">
            <a href=""><span>《魔兽世界》</span></a>
        </li>
        <li class="b2">
            <a href=""><span>《暗黑破坏神3》</span></a>
        </li>
        <li class="b3">
            <a href=""><span>《星际争霸2》</span></a>
        </li>
        <li class="b4">
            <a href=""><span>《星际争霸2 重制版》</span></a>
        </li>
        <li class="b5">
            <a href=""><span>《风暴英雄》</span></a>
        </li>
        <li class="b6">
            <a href=""><span>《炉石传说》</span></a>
        </li>
        <li class="b7">
            <a href=""><span>《守望先锋》</span></a>
        </li>
    </ul>
</div>
</body>
</html>

    *{
    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

    相关文章

      网友评论

          本文标题：webstrom学习笔记7(暴雪战网)

          本文链接：https://www.haomeiwen.com/subject/mgxltqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|webstrom学习笔记7(暴雪战网)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！