迪士尼网页搭建

Posted 2020-10-31 web--yang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了迪士尼网页搭建相关的知识，希望对你有一定的参考价值。

/*页面宽度*/
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>

以上是关于迪士尼网页搭建的主要内容，如果未能解决你的问题，请参考以下文章

HTML代码片段

迪士尼页面制作

迪士尼页面重点记录

炫酷 CSS 背景效果的 10 个代码片段

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段

Web 动画原则及技巧浅析