/*頁面寬度*/
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;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>迪士尼樂園</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/Disney.css"/>
</head>
<body>
<audio class="music" src="../audio/scp.mp3" controls autoplay loop></audio>
<div>
    <!-- 導航-->
    <header>
        <a href="#"><i></i>   首頁</a>
        <a href="#"><i></i> 商店</a>
        <a href="#"><i></i> 樂園</a>
        <a href=""><img src="../images/b_logo.png" alt="迪士尼"></a>
        <a href="#"><i></i> 影視</a>
        <a href="#"><i></i>數碼</a>
        <a href="#"><i></i> 會員</a>
    </header>
    <!-- 大圖-->
    <div>
        <img src="../images/160216172223655101.jpg" alt=""/>
    </div>
    <!-- 明星-->
    <div>
        <h1>明星</h1>
    </div>
   <!-- 六小圖-->
    <div>
        <figure><img src="../images/151209173849244246.jpg" alt=""/>
            <figcaption>米奇和他的朋友們</figcaption>
        </figure>
        <figure><img src="../images/151209173747572402.jpg" alt=""/>
            <figcaption>迪士尼公主</figcaption>
        </figure>
        <figure><img src="../images/151130185638114248.jpg" alt=""/>
            <figcaption>賽車總動員</figcaption>
        </figure>
        <figure><img src="../images/151130185656630780.jpg" alt=""/>
            <figcaption>小公主蘇菲亞
            </figcaption>
        </figure>
        <figure><img src="../images/151130185733287815.jpg" alt=""/>
            <figcaption>冰雪奇緣</figcaption>
        </figure>
        <figure><img src="../images/151130185754146838.jpg" alt=""/>
            <figcaption>星球大戰</figcaption>
        </figure>
    </div>
    <!-- 商店標題-->
    <div>
        <h2>商店</h2>
    </div>
    <!-- 商店-->
    <div class="fudong">
        <section>
            <img src="../images/160322141822716049.jpg" alt=""/>
        </section>
        <section>
            <img class="kuandu1" src="../images/999.png" alt=""/><img class="kuandu2" src="../images/999.png" alt=""/><img class="kuandu3" src="../images/999.png" alt=""/><img class="kuandu4" src="../images/999.png" alt=""/>

        </section>
    </div>
    <!-- 迪士尼咨詢標題-->
    <div>
        <h3>迪士尼資訊</h3>
    </div>
    <!-- 迪士尼咨詢分塊-->
    <div class="dabiankuang">
        <div class="fudong2">
            <img  src="../images/160113121641905797.jpg" alt=""/>
            <i class="sanjiao1"></i>
            <h4><strong>上海迪士尼樂園開園在即!</strong></h4>
            <p style="margin: 0px 50px; font-size: 16px">自2016年6月16日起,你將可以探索一個前所未有的神奇世界,每個人都能在這裏點亮心中奇夢.
             <i class="tubiao"></i></p>
        </div >
        <!-- 謝謝你  101億-->
        <div class="fudong2">
            <!-- 兩個三角-->
            <i class="sanjiao2"></i>
            <i class="sanjiao3"></i>
            <i class="sanjiao4"></i>
            <!-- 上面兩個-->
            <div >
                <section >
                    <div>
                          <img  src="../images/160321105131828720.jpg" alt=""/>
                    </div>
                    <h5><strong>《瘋狂動物城》票房突破十億人民幣!</strong></h5>
                    <p>《瘋狂動物城》上映第16日登頂中國動畫賣座第一，並成為史上首部破十億動畫片！   <i class="tubiao"></i></p>
                </section >
                <section class="biankuang" >
                    <div>
                        <img   src="../images/160225171114064621.jpg" alt=""/>
                    </div>
                    <h5><strong>全球首座迪士尼音樂報時鐘樓正式落成</strong></h5>
                    <p>迪士尼鐘樓與迪士尼旗艦店一起為上海帶來一份奇妙而夢幻的娛樂購物體驗。 <i class="tubiao"></i></p>
                </section>
            </div>
            <!-- 下面兩個-->
            <div>
                <section>
                    <img src="../images/160229155948703765.jpg" alt=""/>
                </section>
                <section >
                    <h5><strong>《頭腦特工隊》獲得第88屆奧斯卡最佳動畫長片</strong></h5>
                    <p>皮克斯《頭腦特工隊》獲得第88屆奧斯卡最佳動作長片！實至名歸！ <i class="tubiao"></i></p>
                </section>
            </div>

        </div>
    </div>
    <!-- 頁腳-->
    <footer>
        <div class="dibudiv">
            <div class="dibulogo" >
                <img src="../images/b_logo.png" alt=""/>

            </div>
            <aside class="fudong3">
                <figure class="erweima"><img style="padding-left: 8px" src="../images/weibo.jpg" alt=""/>
                    <figcaption class="xiaozi">關註我們的微博</figcaption>
                </figure>
                <figure class="erweima"><img style="padding-left: 8px" src="../images/weibo.jpg" alt=""/>
                    <figcaption class="xiaozi">關註我們的微信</figcaption>
                </figure>


            </aside>
        </div>
        <section>
            <h6 ><a class="dibuaa" href="#">關於我們</a><a href="#">加入我們</a><a href="#">法律條款</a><a href="#">隱私政策</a><a href="#">退換貨政策</a></h6>
            <p>Disney | Pixar All rights reserved. 備案號：滬ICP備07025394號-17</p>

        </section>
    </footer>
</div>

</body>
</html>

迪士尼網頁搭建