迪士尼網頁搭建

時間  2019-11-11
標籤 迪士尼 網頁 搭建 欄目 HTML 简体版
原文   原文鏈接 
/*頁面寬度*/
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;
}
View Code

 

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程