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 {
    width: 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);
    width: 13%;
}
/* 导航图标 */
nav>a:nth-of-type(n)>i {
    width: 21px;
    height: 20px;
    background-image: url("../IMG/icon.png");
}
nav>a:nth-of-type(2)>i {
    width: 20px;
    height: 20px;
    background-position: 0px -19px;
}
nav>a:nth-of-type(3)>i {
    width: 17px;
    height: 22px;
    background-position: 0px -40px;
}
nav>a:nth-of-type(5)>i {
    width: 20px;
    height: 16px;
    background-position: 0px -64px;
}
nav>a:nth-of-type(6)>i {
    width: 13px;
    height: 20px;
    background-position: 0px -81px;
}
nav>a:nth-of-type(7)>i {
    width: 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;
    width: 16.66%;
}
.star img {
    width: 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 {
    width: 600px;
}
.zixun>div:not(:nth-of-type(2)) {
    width: 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 {
    width: 14px;
    height: 14px;
    background-image: url("../IMG/icon.png");
    background-position: -48px -102px;
}
.jiantou:hover {
    width: 21px;
    height: 21px;
    background-image: url("../IMG/icon.png");
    background-position: -42px -171px;
}
/* 三角形 */
.zixun>div:first-of-type>i {
    position: absolute;
    width: 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) {
    width: 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;
    width: 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;
    width: 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 {
    width: 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 {
    width: 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;
    width: 18%;
}
footer>div:last-of-type>p {
    font-size: 14px;
    color: rgb(115, 115, 115);
    padding-bottom: 143px;
}
 
 

html迪士尼网页实现代码的更多相关文章

  1. 用Android属性动画实现和演示迪士尼动画基本原则

    本文将介绍在Android平台上实现和演示迪士尼动画基本准则. 项目开源,GitHub: https://github.com/vhow/animation 说明: 演示动画原则的想法源自 Anima ...

  2. 迪士尼黑科技：爬墙机器人 VertiGo

    12 月 30 日,迪士尼研发出的一款爬墙机器人曝光了一段有趣的视频.从视频里可看出这个机器人碰到墙壁时迅速地作出反应爬了上去. 据了解,这个爬墙机器人名叫 VertiGo,由迪士尼研究中心和苏黎世联 ...

  3. 用HTML编写迪士尼乐园页面

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head lang="e ...

  4. 杂项-公司-百科：华特·迪士尼-un

    ylbtech-杂项-公司-百科:华特·迪士尼 华特·迪士尼(Walt Disney,全名Walter Elias Disney,又译沃尔特·迪士尼,1901年12月5日—1966年12月15日),出 ...

  5. HK游记 Day2迪斯尼(下）

    接下来我们要去看狮子王庆典,绕啊绕啊,终于进场了,说实话我对一大帮人扮演动物歌舞表演不是很感冒,静倒是觉得很好看,印象最深的是狮子王的主题曲,还有大象车,长颈鹿车,狮子王车,静举着手机拍视频. 看完表 ...

  6. php正则获取网页标题、关键字、网页描述代码

    php正则获取网页关键字,代码如下: function get_keywords($html) { $html=strtolower($html); preg_match("@<hea ...

  7. Html网页的代码

    Html网页的代码 很全哦 1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写 ...

  8. 网页HTML代码在线运行器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

随机推荐

  1. Python 判断是否可以转化为浮点数及其他数字类型

    Python中出现ValueError: could not convert string to float:应该怎么处理 import sys import math # 判断是否为浮点数 def ...

  2. 第七十九课 最短路径（Floyd）

    程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...

  3. C语言笔记1

    第一部分 计算机常识 1,人与计算机交流 2,人机交互方式 3,计算机的组成结构 4,计算机的系统组成 5,进制 6,程序和指令  第二部C开发环境 1 人与计算机交流 现实中人与人交流靠语言,那么人 ...

  4. matlab数学实验--第一章

    一.            数据和变量: 省略号(三个英文句点):表示换行 历史指令调用:用方向键上下 数据显示格式:                    format short          ...

  5. 《从Lucene到Elasticsearch：全文检索实战》学习笔记二

    今天我给大家讲讲分词算法 分词算法概述:词是语义的最小单位.分词对搜索引擎的作用很大,可以促进搜索引擎程序自动识别语句的含义,可以提高搜索结果的匹配度,分析的质量也将直接影响了搜索结果的精确度.分词存 ...

  6. 1.3 Linux分区类型

    1.主分区最多只能有4个. 2.扩展分区: 最多只能有一个: 主分区加扩展分区最多只能有4个: 扩展分区只能包含逻辑分区,不能写数据. 3.格式化目的: 写入文件系统:清除数据:划出文件分配表(i n ...

  7. LOJ 2546 「JSOI2018」潜入行动——树形DP

    题目:https://loj.ac/problem/2546 dp[ i ][ j ][ 0/1 ][ 0/1 ] 表示 i 子树,用 j 个点,是否用 i , i 是否被覆盖. 注意 s1<= ...

  8. python3 访问百度返回压缩格式

    import urllib, urllib.request, urllib.parse import random import zlib import re import os, time Save ...

  9. Updates were rejected because the tip of your current branch is behind 问题出现解决方案

    提供如下几种方式: 1.使用强制push的方法(多人协作时不可取): git push -u origin master -f 2.push前先将远程repository修改pull下来 git pu ...

  10. Ubuntu 12.04图形界面不能登录问题

    问题描述:   Ubuntu 12.04进入到登录界面,输入用户名和密码无法登录, 输出密码后又跳回到登录界面,  执行快捷键Ctrl+Alt+F1, 可以进入tty1命令行, 可以root或者普通用 ...