html迪士尼网页实现代码

zoukankan html css js c++ java

html迪士尼网页实现代码

html

body>

    <div>

        

        <header>

            <nav class="daohangse">

                <a href="#"><i></i> 首页</a>

                <a href="#"><i></i> 商店</a>

                <a href="#"><i></i> 乐园</a>

                <a href="#"><img src="../img/b_logo.png" alt=""></a>

                <a href="#"><i></i> 影视</a>

                <a href="#"><i></i> 数码</a>

                <a href="#"><i></i> 会员</a>

            </nav>

        </header>

        <section class="qihuan">

            <img src="../IMG/qihuan.png" alt="奇幻森林">

        </section>

        

        <section class="star">

            <h1>明星</h1>

            <div>

                <div>

<img src="../IMG/1.jpg" alt="">

                    <a href="#">

                        <p>米奇和他的朋友们</p>

                    </a>

                </div>

                <div>

                    <img src="../IMG/2.jpg" alt="">

                    <a href="">

                        <p>迪士尼公主</p>

                    </a>

                </div>

                <div>

                    <img src="../IMG/3.jpg" alt="">

                    <a href="">

                        <p>赛车总动员</p>

                    </a>

                </div>

                <div>

                    <img src="../IMG/4.jpg" alt="">

                    <a href="">

                        <p>小公主苏菲亚</p>

                    </a>

                </div>

                <div>

                    <img src="../IMG/5.jpg" alt="">

                    <a href="">

                        <p>冰雪奇缘</p>

                    </a>

                </div>

                <div>

                    <img src="../IMG/6.jpg" alt="">

                    <a href="">

                        <p>星球大战</p>

                    </a>

                </div>

            </div>

        </section>

        

        <section class="store">

            <h1>商店</h1>

            <div><img src="../IMG/shangdian1.jpg" alt=""></div>

            <div>

                <div><img src="../IMG/shoujike.png" alt=""></div>

                <div><img src="../IMG/baozhen.png" alt=""></div>

            </div>

            <div>

                <div><img src="../IMG/guajian.png" alt=""></div>

                <div><img src="../IMG/xiguan.png" alt=""></div>

            </div>

        </section>

        

        <section class="zixun">

            <h1>迪士尼资讯</h1>

            <div><img src="../IMG/160113121641905797.jpg" alt="">

                <h1>上海迪士尼乐园开园在即！</h1>

                <p>自2016年6月16日起，您将可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中的启梦。<a href="#"><i class="jiantou"></i></a></p>

                <i></i>

            </div>

            <div>

                <div><img src="../IMG/160321105131828720.jpg" alt="">

                    <h1>《疯狂动物城》票房突破10亿人民币！</h1>

                    <p>《疯狂动物城》上映第16日登顶中国动画卖座第一，并成为史上首部破10亿动画片！<a href="#"><i class="jiantou"></i></a> </p>

                    <div><img src="../IMG/160229155948703765.jpg" alt=""></div>

                    <i></i>

                </div>

                <i class="box1"></i>

            </div>

            <div>

                <div><img src="../IMG/160225171114064621.jpg" alt="">

                    <h1>全球首座迪士尼音乐报时钟楼正式落成</h1>

                    <p>迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。<a href=""><i class="jiantou"></i></a></p>

                    <div>

                        <h1>《头脑特工队》获得第88届奥斯卡最佳动画长片</h1>

                        <p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！<a href=""><i class="jiantou"></i></a></p>

                    </div>

                    <i class=" jiantou1"></i>

                </div>

                

                <i></i>

            </div>

        </section>

        <footer>

            <div>

                <div><img src="../IMG/b_logo.png" alt=""></div>

                <div><img src="../IMG/weibo.jpg" alt="">

                    <P>关注我们的微博</P>

                </div>

                <div><img src="../IMG/weibo.jpg" alt="">

                    <P>关注我们的微信</P>

                </div>

            </div>

            <div>

                <div>

                    <a href="">关于我们</a>

                    <a href="#">加入我们</a>

                    <a href="#">法律条款</a>

                    <a href="#">隐私政策</a>

                    <a href="#">退换货政策</a>

                </div>

                <p>Disney | Pixar All rights reserved. 备案号 : 沪B2-20040339-3 </p>

            </div>

        </footer>

    </div>

</body>

</html>

css

body>div {

    1200px;

    margin: auto;

    text-align: center;

}

a {

    text-decoration: none;

}

section {

    overflow: hidden;

}

i {

    display: inline-block;

}

header {

    margin-top: 18px;

}

header a {

    display: inline-block;

    color: rgb(51, 51, 51);

    13%;

}

/* 导航图标 */

nav>a:nth-of-type(n)>i {

    21px;

    height: 20px;

    background-image: url("../IMG/icon.png");

}

nav>a:nth-of-type(2)>i {

    20px;

    height: 20px;

    background-position: 0px -19px;

}

nav>a:nth-of-type(3)>i {

    17px;

    height: 22px;

    background-position: 0px -40px;

}

nav>a:nth-of-type(5)>i {

    20px;

    height: 16px;

    background-position: 0px -64px;

}

nav>a:nth-of-type(6)>i {

    13px;

    height: 20px;

    background-position: 0px -81px;

}

nav>a:nth-of-type(7)>i {

    20px;

    height: 17px;

    background-position: 0px -102px;

}

/* 导航变色 */

nav>a:hover {

    color: red;

}

nav>a:nth-of-type(1):hover>i {

    background-position: -22px 0px;

}

nav>a:nth-of-type(2):hover>i {

    background-position: -22px -19px;

}

nav>a:nth-of-type(3):hover>i {

    background-position: -22px -40px;

}

nav>a:nth-of-type(5):hover>i {

    background-position: -22px -64px;

}

nav>a:nth-of-type(6):hover>i {

    background-position: -22px -81px;

}

nav>a:nth-of-type(7):hover>i {

    background-position: -22px -102px;

}

/* 奇幻森林 */

.qihuan {

    margin-top: 21px;

}

/* 标题样式 */

.star>h1,

.store>h1,

.zixun>h1 {

    padding-top: 60px;

    padding-bottom: 42px;

    text-align: center;

    font-size: 34px;

    color: rgb(51, 51, 51);

}

/* 明星 */

.star p {

    font-size: 18px;

    text-align: center;

    color: rgb(51, 51, 51);

    margin-top: 24px;

}

.star>div>div {

    float: left;

    16.66%;

}

.star img {

    114px;

}

/* 商店 */

.store div {

    float: left;

    outline: 1px solid rgb(220, 220, 220);

}

.store>div:nth-of-type(3) {

    border-bottom: 1px solid rgb(220, 220, 220);

}

.store>div:nth-of-type(1)>img {

    height: 590px;

}

/* 迪士尼资讯 */

.zixun>div:nth-of-type(n) {

    height: 768px;

    float: left;

    box-sizing: border-box;

    border: 1px solid rgb(220, 220, 220);

}

.zixun>div:nth-of-type(2) {

    border-right: 0;

}

.zixun>div:nth-of-type(1)>img {

    600px;

}

.zixun>div:not(:nth-of-type(2)) {

    600px;

    position: relative;

}

.zixun>div:nth-of-type(1)>img {

    height: 474px;

}

.zixun>div:first-of-type>h1 {

    text-align: left;

    padding: 37px 0 28px 48px;

    font-size: 28px;

    color: rgb(51, 51, 51);

}

.zixun>div:first-of-type>p {

    text-align: left;

    padding: 0 50px 0px 48px;

    font-size: 14px;

    color: rgb(102, 102, 102)

}

/* 红箭头 */

.jiantou {

    14px;

    height: 14px;

    background-image: url("../IMG/icon.png");

    background-position: -48px -102px;

}

.jiantou:hover {

    21px;

    height: 21px;

    background-image: url("../IMG/icon.png");

    background-position: -42px -171px;

}

/* 三角形 */

.zixun>div:first-of-type>i {

    position: absolute;

    50px;

    height: 25px;

    background-image: url("../IMG/icon.png");

    background-position: 0 -196px;

    top: 450px;

    left: 49px;

}

/* 资讯第二列、第三列 */

.zixun>div:nth-last-of-type(-n+2) {

    300px;

    box-sizing: border-box;

}

.zixun>div:nth-last-of-type(-n+2) h1 {

    font-size: 18px;

    color: rgb(51, 51, 51);

    padding: 30px 42px 22px 28px;

    text-align: left;

}

.zixun>div:nth-last-of-type(-n+2) p {

    font-size: 14px;

    color: rgb(102, 102, 102);

    padding: 0 42px 22px 28px;

    text-align: left;

    box-sizing: border-box;

}

/* 资讯中列三角形 */

.zixun>div:nth-of-type(2) {

    position: relative;

}

.zixun>div:nth-of-type(2)>div>i {

    position: absolute;

    14px;

    height: 28px;

    background-image: url("../IMG/icon.png");

    background-position: 0 -245px;

    top: 504px;

    left: 287px;

}

.zixun>div:last-of-type>div>div>h1 {

    border-top: 1px solid rgb(220, 220, 220);

}

/* 资讯二列上和三列三角形 */

.zixun>div:nth-of-type(3)>i,

.box1 {

    position: absolute;

    30px;

    height: 14px;

    background-image: url("../IMG/icon.png");

    background-position: 0 -245px;

    top: 281px;

    left: 33px;

}

/* footer */

footer {

    overflow: hidden;

}

footer>div:first-child {

    100%;

    float: left;

    margin: 89px 0px 24px 390px;

}

footer>div>div {

    float: left;

}

footer>div>div:nth-of-type(1) {

    padding-right: 30px;

    padding-top: 19px;

    height: 87px;

}

footer>div:first-child>div:nth-of-type(2) {

    padding-left: 30px;

    padding-right: 43px;

    border-left: 1px solid rgb(220, 220, 220);

}

footer>div:nth-of-type(1) p {

    font-size: 14px;

    padding-top: 12px;

}

/* 关于我们 */

footer>div:last-of-type>div {

    486px;

    height: auto;

    margin: 22px 350px 18px 366px;

    padding-right: 0;

    border-top: 1px solid rgb(220, 220, 220);

}

footer a {

    font-size: 14px;

    font-weight: bold;

    color: rgb(51, 51, 51);

    display: inline-block;

    18%;

}

footer>div:last-of-type>p {

    font-size: 14px;

    color: rgb(115, 115, 115);

    padding-bottom: 143px;

}

查看全文

相关阅读:
洛谷 P1141 01迷宫
 洛谷 p1443
setw
Fliptile
追牛
 Dungeon Master
vim的一些基本操作
 洛谷 p1309 瑞士轮
 洛谷 p1090 合并果子
 selenium2 WebDriver 在asp.net项目中的应用

原文地址：https://www.cnblogs.com/zhuxinpeng-looking/p/10568355.html