自己完成的第一个页面

Posted 2020-10-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己完成的第一个页面相关的知识，希望对你有一定的参考价值。

这是自己完成的第一个页面以下是html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>disney</title>
    <link rel="stylesheet" href="../css/disney.css">
</head>
<body>
<div class="box">
    <!--------------------导航------------------------------>
    <header>
        <nav>
            <ul>
                <li><a href="#"><i></i>首页</a></li>
                <li><a href="#"><i></i>商店</a></li>
                <li><a href="#"><i></i>乐园</a></li>
                <li><img src="../image/b_logo.png" alt=""></li>
                <li><a href="#"><i></i>影视</a></li>
                <li><a href="#"><i></i>数码</a></li>
                <li><a href="#"><i></i>会员</a></li>
            </ul>
        </nav>
    </header>
    <figure>
        <img src="../image/160216172223655101.jpg" alt=" "/>
    </figure>


    <!-------------------明星----------------------->
    <div class="box1">
        <h1>明星</h1>
        <ul>
            <li>
                <figure>
                    <img src="../image/151209173849244246.jpg" alt="">
                    <figcaption>
                        <a href="#">米奇和他的朋友们</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="../image/151209173747572402.jpg" alt="">
                    <figcaption>
                        <a href="#">迪士尼公主</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="../image/151130185638114248.jpg" alt="">
                    <figcaption>
                        <a href="#">赛车总动员</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="../image/151130185656630780.jpg" alt="">
                    <figcaption>
                        <a href="#">小公主菲苏亚</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="../image/151130185733287815.jpg" alt="">
                    <figcaption>
                        <a href="#">冰雪奇缘</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="../image/151130185754146838.jpg" alt="">
                    <figcaption>
                        <a href="#">星球大战</a>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <!---------------------------------商店--------------------------------->
    <div class="box2">
        <h1>商店</h1>
        <ul class="fangkuang1">
            <li><img src="../image/160322141822716049.jpg" alt=""/></li>
            <li>
                <ul>
                    <li>
                        <figure>
                            <img src="../image/161124154351492230.jpg" alt="1"/>
                        </figure>
                        <figcaption>
                            <a href="#">疯狂动物城</a>
                        </figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="../image/161124160800879755.jpg" alt="2"/>
                        </figure>
                        <figcaption>
                            <a href="#">疯狂动物城</a>
                        </figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="../image/161124161054476210.jpg" alt="3"/>
                        </figure>
                        <figcaption>
                            <a href="#">疯狂动物城</a>
                        </figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="../image/161124160800879755.jpg" alt="4"/>
                        </figure>
                        <figcaption>
                            <a href="#">疯狂动物城</a>
                        </figcaption>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!---------------------------迪士尼咨询--------------------------->
    <div class="box3">
        <h1>迪士尼咨讯</h1>
        <ul class="fangkuang2">
            <li><img src="../image/160113121641905797.jpg" alt="11"/><h3><a href="#">上海迪士尼开园在即</a></h3>
            <p>
                <a href="#">自2016年6月16日起，您将可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中的奇梦。</a>
                <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a>
            </p>

            </li>
            <li>
                <ul>
                    <li class="righttop">
                        <ul class="righttop1">
                            <li>
                                <img src="../image/160321105131828720.jpg" alt="123"/>
                                <h3><a href="#">《疯狂动物城》票房突破10亿人民币！</a></h3>
                                <p><a href="#">《疯狂动物城》上映第16日登顶中国动画卖座第一，并成为史上首部突破10亿的动画片。</a>
                                    <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a>
                                </p>

                            </li>
                            <li>
                                <img src="../image/160225171114064621.jpg" alt="123456"/>
                                <h3><a href="#">全球首座迪士尼音乐报时钟楼正式落成</a></h3>
                                <p><a href="#">迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻就撒谎附件的娱乐购物体验。</a>
                                    <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a>
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li class="rightdown"><img src="../image/160229155948703765.jpg" alt="111"/>
                        <h3>
                            <a href="#">《头脑特工队》获得第88届奥斯卡最佳动画长片</a><br>
                            <span><a href="">皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！</a></span>
                            <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a>
                        </h3>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <!----------------------------底部-------------------------------->
    <foot>
        <div class="box4">
            <ul>
                <li class="box4-1"><img src="../image/b_logo.png" alt=""/></li>
                <li class="box4-2"><img src="../image/weibo.jpg" alt=""/><p>关注我们微博</p></li>
                <li class="box4-3"><img src="../image/weibo.jpg" alt=""/><p>关注我们微信</p></li>
            </ul>
        </div>
        <ul class="box5">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">法律条款</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">退换货政策</a></li>
        </ul>
        <p class="beizhu">Disney l Pixar All rights reserved.备案号：泸B2-20040339-3</p>
    </foot>
</div>


</body>
</html>

这是css页面

*{
    margin: 0px;
    padding: 0px;
    list-style: none;

}
.box img:hover{

    transform: scale(1.1);
    transition: all linear 0.5s;
}
.box{
    width: 1200px;
    height: 100%;
    margin: auto;
    background-color: white;
}
a{
    text-decoration: none;
    color: black;
}
nav li{
    float: left;
    width: 14.28%;
    text-align: center;
    list-style: none;
    line-height: 46px;
}

nav li i{
    width: 22px;
    height: 20px;
    background: url("../image/icon.png");
    display: inline-block;
}
nav li:nth-child(1):hover i{
    background-position: -22px 0;
}
nav li:nth-child(1):hover a{
    color: red;
}

nav li:nth-child(2) i{

    background-position: 0 -19px;
}
nav li:nth-child(2):hover i{
    background-position: -22px -19px;
}
nav li:nth-child(2):hover a {
    color: red;
}


nav li:nth-child(3) i{

    background-position: 0 -40px;
}
nav li:nth-child(3):hover i{
    background-position: -22px -40px;
}
nav li:nth-child(3):hover a {
    color: red;
}


nav li:nth-child(5) i{
    width: 20px;
    height: 16px;
    background-position: 0 -64px;
}
nav li:nth-child(5):hover i{
    background-position: -22px -64px;
}
nav li:nth-child(5):hover a{
    color: red;
}


nav li:nth-child(6) i{

    background-position: 0 -81px;
}
nav li:nth-child(6):hover i{
    background-position: -22px -81px;
}
nav li:nth-child(6):hover a{
    color: red;
}


nav li:nth-child(7) i{

    background-position: 0 -102px;
}
nav li:nth-child(7):hover i{
    background-position: -21px -101px;
}
nav li:nth-child(7):hover a{
    color: red;
}



/* ===============================明星====================================*/
.box1 li{
    float: left;
    text-align: center;
    width: 16.66%;
    list-style: none;
}
img{
    text-decoration: none;
}
.box1 h1{
    text-align: center;
    margin-bottom: 38px;
    margin-top: 40px;
}
.box1 li img{
    width: 114px;
}
.box1 figcaption{
    line-height: 80px;
}
.box1 img:hover{
    transform: scale(1.3) rotate(360deg);
    transition: all linear 1s;
}





/*============================商店====================================*/
.box2 h1{
    text-align: center;
    margin-bottom: 42px;
    margin-top: 250px;
}
.fangkuang1{
    width: 1200px;
    height: 592px;
}
.fangkuang1 li{
    width: 50%;
    float: left;
}
.fangkuang1 ul li{
    outline: 1px solid #000000;
    width: 300px;
    height: 295px;
    float: left;
    overflow: hidden;
}
.box2 figcaption{
    text-align: center;
}
.box2 img:hover{
    transform: scale(1.1);
    transition: all linear 0.5s;
}


/* ===========================迪士尼咨询=========================  */
.box3 h1{
    text-align: center;
    margin-bottom: 44px;
    margin-top: 58px;
}

.fangkuang2{
    width: 1200px;
    height: 770px;
}
.fangkuang2>li{
    width:600px;
    height: 770px;
    float: left;
}

.righttop{
    width: 600px;
    height: 474px;
}
.rightdown{
    width: 600px;
    float: left;
    display: block;
    overflow: hidden;
    clear: both;
}
.rightdown>h3{
    width: 300px;
    height: 296px;
    float:right;
    overflow: hidden;
}
.righttop ul >li{
    width: 300px;
    height: 474px;
    float: left;
}
.rightdown span{
    font-size: small;
}
.box3 p{

    padding-top: 20px;
}
.box3 h3{

    padding-top: 10px;
}
.box3 img:hover{
    transform: scale(1.1);
    transition: all linear 0.5s;
}
.box3 li:hover{
    background: linear-gradient(to top, #aaecff,#545652);
}

/* ==========================底部========================== */
.box4{
    width: 487px;
    height: 112px;
    margin: auto;
    border-bottom: 1px solid #cccccc;
    margin-top: 87px;
    margin-bottom: 22px;
}
.box4 li{
    float: left;
}
.box4-1{
    width: 105px;
    height: 46px;
    padding-left: 18px;
    padding-top: 20px;
    padding-right: 31px;
    border-right: 1px solid #cccccc;
}
.box4-2{
    width:158px;
    height: 65px;
    text-align: center;
}
.box4-3{
    width:158px;
    height: 65px;
    text-align: center;
}
.box5{
    width: 487px;
    height: 29px;
    margin: auto;
}
.box5 li{
    width: 20%;
    float: left;
    text-align: center;
}
.box5 a{
    color: #000;
}
.beizhu{
    text-align: center;
    color: grey;
    font-size: 12px;
}

以上是关于自己完成的第一个页面的主要内容，如果未能解决你的问题，请参考以下文章

Android使用片段在viewpager中的页面滚动上放置动画

在导航抽屉片段中保存视图页面片段的状态

重新创建应用时，片段与底部导航视图图标不匹配

VS中添加自定义代码片段——偷懒小技巧

运行/调试你的PHP代码

jQuery 是如何判断HTML页面加载完毕的？它的原理是啥?