迪士尼网页搭建

/*页面宽度*/
body>div
{
    width:  1200px;
    margin: 0px auto;
    /*border: 1px solid red;*/
}
/*导航父级块*/
div>header{
    height: 46px;
    margin: 20px 0px 30px ;
    border: 1px solid white;

}
/*导航a标签*/
div>header>a
{
    width:13.94% ;
    display: inline-block;
    text-align: center;
    color: black;
    font-size: 16px;
    line-height: 46px;
    text-decoration: none;

}
header>a:hover
{
    color: red;
}
/*首页*/
header i:nth-child(1)
{   width: 22px;
    height: 20px;
    display: inline-block;
    background-image: url("../images/icon.png");

}
header a:nth-child(1):hover i
{
    background-position:-22px 0px ;
}
/*商店*/
header>a:nth-child(2)>i
{   width: 22px;
     height: 21px;
     display: inline-block;
     background-image: url("../images/icon.png");
    background-position: 0px -20px;
}
header a:nth-child(2):hover i
{
    background-position:-22px -20px ;
}
/*乐园*/
header>a:nth-child(3)>i
{   width: 22px;
    height: 18px;
    display: inline-block;
    background-image: url("../images/icon.png");
    background-position: 0px -45px;
}
header a:nth-child(3):hover i
{
    background-position:-22px -45px ;
}
/*影视*/
header>a:nth-child(5)>i
{   width: 22px;
    height: 16px;
    display: inline-block;
    background-image: url("../images/icon.png");
    background-position: 0px -64px;
}
header a:nth-child(5):hover i
{
    background-position:-22px -64px ;
}
/*数码*/
header>a:nth-child(6)>i
{   width: 22px;
    height: 22px;
    display: inline-block;
    background-image: url("../images/icon.png");
    background-position: 0px -80px;
}
header a:nth-child(6):hover i
{
    background-position:-22px -80px ;
}
/*会员*/
header>a:nth-child(7)>i
{   width: 22px;
    height: 16px;
    display: inline-block;
    background-image: url("../images/icon.png");
    background-position: 0px -101px;
}
header a:nth-child(7):hover i
{
    background-position:-22px -101px ;
}

/*明显标题*/
h1
{
  font-size: 34px;
    text-align: center;
    margin: 60px auto 40px;
}


/*明星六小图*/
div>figure
{
    display: inline-block;
    width:16.33%;
    font-size: 20px;
    text-align: center;
}
div>figure>img
{
    width: 120px;
}
div>figure>figcaption
{
    margin-top: 25px;
}

/*商店标题*/
h2  {
    margin: 60px auto 45px;
    font-size: 34px;
    text-align: center;
     }

/*商店分块浮动*/
div>section
{
    width: 50%;
    float: left;

}
/*商店右边四图*/
.kuandu1 {
    width: 49.6%;
    border: 1px solid #f2f2f2;
    border-left-color:transparent;

}
.kuandu2 {
    width: 49.6%;
    border: 1px solid #f2f2f2;
    border-left-color:transparent;

}
.kuandu3 {
    width: 49.6%;
    border: 1px solid #f2f2f2;
    border-top-color:transparent;

}
.kuandu4 {
    width: 49.6%;
    border: 1px solid #f2f2f2;
    border-left-color:transparent;
    border-top-color:transparent;

}


/*商店大块清除浮动*/
.fudong

{
    overflow: hidden;
}
/*/商店左右两块浮动，宽度，相对定位，相对定位给予后面的三角形/*/
.fudong2

{
    float: left;
    width: 50%;
    position: relative;
 }


/*迪士尼资讯标题*/
h3
{
    font-size: 34px;
    text-align: center;
    margin: 60px auto 40px;
    clear: both;

}

/*开园标题*/
h4
{
    font-size: 30px;

    margin: 35px 50px 25px;

}
/*红色小箭头图标*/
.tubiao
{
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("../images/icon.png");
    background-position: -48px -102px;
}
 /*迪士尼资讯黑体字*/
h5  {
    margin-top: 30px;
    padding: 0px 45px 0px 30px ;
    font-size: 20px;
}

/*迪士尼资讯小字*/
div>section>p{
    margin: 20px auto 10px;
    padding: 0px 45px 0px 30px ;
    font-size: 16px;
}

/*迪士尼咨询右边边框*/
.biankuang{

    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
}
/*迪士尼大块 清除浮动 外边框*/
.dabiankuang
{
    border: 1px solid #f2f2f2;
    /*box-sizing: border-box;*/
    overflow: hidden;
}


/*footer大块*/

footer{
    width: 490px;
    height: 175px;
    margin: 90px auto 140px;
    /*border:1px solid #f2f2f2; ;*/
}





/*底部logo*/

.dibulogo
{
    width: 105px;
    height: 65px;
    padding: 0px 40px;
    border-right:1px solid #dcdcdc;
   line-height: 65px;
    float: left;

}
/*底部上方大块 底部线 清除浮动*/
.dibudiv
{
    height: 110px;
    border-bottom: 1px solid #dcdcdc;;
    overflow: hidden;
}
/*二维码与左边小块浮动*/
.fudong3
{

    float: left;
    margin-left: 35px;


}
/*二维码*/
.erweima
{
    display: inline-block;
    margin-right: 35px;
    padding-left: 10px;
}
/*二维码下方小字*/
.xiaozi
{
 font-size: 12px;
    text-align: center;
    padding-top: 10px;
}
/*底部小字*/
footer p
{
    font-size: 14px;
    color: #737373;
    text-align: center;
    padding-top: 10px;
}



/*底部a标签*/
h6>a
{

    color: #333;
    font-size: 14px;
    padding-right: 34px;
    text-decoration: none;
}
h6{
    text-align: center;
    padding: 20px 0px 0px 10px  ;
   }
.dibuaa
{

    padding-left: 20px
}



/*四个小三角*/
.sanjiao1
{
    width: 50px;
    height: 25px;
    background-image: url("../images/icon.png");
    background-position: 0px -195px;
    position: absolute;
    left: 45px;
    bottom: 141px; ;
}
.sanjiao2
{
    width: 28px;
    height: 14px;
    background-image: url("../images/icon.png");
    background-position: 0px -245px;
    position: absolute;
    right: 240px;
    top: 282px; ;
}
.sanjiao3
{
    width: 14px;
    height: 28px;
    background-image: url("../images/icon.png");
    background-position: 0px -245px;
    position: absolute;
    left: 287px;
    bottom: 220px; ;
}
.sanjiao4
{
    width: 28px;
    height: 14px;
    background-image: url("../images/icon.png");
    background-position: 0px -245px;
    position: absolute;
    right: 540px;
    top: 282px; ;
}

.music
{
   position: fixed;
    right: 0px;
    bottom: 0px;
}