HTML css背景图练习——魔兽世界官网页面

index.css

body {
   
    background: url(../CSS学习/背景图/img/bg.jpg) no-repeat center top;
}

.clearfix::after{
   
    content: "";
    display: block;
    clear: both;

}

.header{
   
    width: 1198px;
    height: 73px;
    /* 文字居中 */
    line-height: 73px;
    color: #f8b770;
    background-color: red;
    /* 区域居中 */
    margin: 0 auto;
    /* 距上边的距离 */
    margin-top: 45px;
    background: url(../CSS学习/背景图/img/bg_nav.jpg);
    border: 1px solid #3f2a22;
    border-left: none;
    border-right: none;
    position: relative;


}
.header nav a{
   
    float: left;
    width: 161px;
    height: 73px;
    text-align: center;
    /* 边框会影响尺寸所以先border-box */
    box-sizing: border-box;
    border: 1px solid #3f2a22;
    border-bottom: none;
    border-top: none;
}


.header nav a:nth-child(3){
   
    margin-right: 232px;
}

.header .logo{
   
    position: absolute;
    width: 238px;
    height: 118px;
    background: url(../CSS学习/背景图/img/logo.png) no-repeat;
    /* 水平居中 浏览器微调 */
    left: 7px;
    top: -37px;
    right: 0;
    margin: auto;
    
}

.header .logo h1{
   
    display: none;
    /* 隐藏该元素 */
}

.menu{
   
    text-align: center;
    margin-top: 473px;
}

.menu a{
   
    display: inline-block;
    /* 行盒居中 设置外层容器text-aline */

    width: 323px;
    height: 105px;
    background: url(../CSS学习/背景图/img/btns.png) no-repeat;

}

.menu a span{
   
    display: none;
}

.menu a.download{