用HTML编写迪士尼乐园页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/disini.css"/>
</head>
<body>
<div class="disini">
    <!--头部-->
    <header>
        <nav>
            <a href="#"><i class="aa"></i>首页</a>
            <a href="#"><i class="bb"></i>商店</a>
            <a href="#"><i class="cc"></i>乐园</a>
            <img src="../images/b_logo.png" alt=""/>
            <a href="#"><i class="dd"></i>影视</a>
            <a href="#"><i class="ee"></i>数码</a>
            <a href="#"><i class="ff"></i>会员</a>
        </nav>
    </header>
    <img src="../images/160216172223655101.jpg" alt=""/>
    <!--img,figcaption是figure的子级-->
    <div>
        <h1 class="red">明星</h1>
        <figure class="yes"><img src="../images/151209173849244246.jpg" alt=""/>
            <figcaption>米老鼠和他的朋友们</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151209173747572402.jpg" alt=""/>
            <figcaption>迪士尼公主</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185638114248.jpg" alt=""/>
            <figcaption>赛车总动员</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185656630780.jpg" alt=""/>
            <figcaption>小公主苏菲亚</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185733287815.jpg" alt=""/>
            <figcaption>冰雪奇缘</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185754146838.jpg" alt=""/>
            <figcaption>星球大战</figcaption>
        </figure>
    </div>
    <!--img,figcaption是figure的子级-->
    <div class="blue">
        <h1>商店</h1>
        <img class="yellow" src="../images/160322141822716049.jpg" alt=""/>
        <figure ><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
    </div>
    <!--div迪士尼资讯-->
    <div class="ll">
        <h1>迪士尼资讯</h1>
    </div>
    <div  class="end">
        <div class="op">
            <div>
                <img class="ab" src="../images/160113121641905797.jpg" alt=""/>
            </div>
            <div class="cd">
                <h1>上海迪士尼乐园开园在即！</h1>
                <a href="">自2016年6月16日起，你将可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中奇梦。<i></i></a>
            </div>
        </div>
        <div class="op">
            <div>
                <div class="op" >
                    <div> <img about="ef" src="../images/160321105131828720.jpg" alt=""/></div>
                    <div class="gh"><h1><strong>《疯狂动物城》票房突破10亿人名币！</strong></h1>
                        <a href="">《疯狂动物城》上映16日登顶中国动物卖座第一，并成为史上首部破10亿动画片<i></i></a>
                    </div>
                </div>
                <div class="mn">
                    <div><img class="ef" src="../images/160225171114064621.jpg" alt=""/></div>
                    <div class="gh">
                        <h1><strong>全球首座迪士尼音乐报时钟楼正式落成</strong></h1>
                        <a href="">迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。<i></i></a>
                    </div>
                </div>
            </div>
            <div class="op" >
                <div class="op"><img class="ef" src="../images/160229155948703765.jpg" alt=""/></div>
                <div class="mm" >
                    <h1><strong>《头脑特工队》获得第88届奥斯卡最佳动画长片</strong></h1>
                    <a href="">皮克斯《头脑特工队》获得88届奥斯卡最佳动画长片！实至名归.<i></i></a>
                </div>
            </div>
        </div>
    </div>
   <!--页脚-->
    <div>
        <footer>
            <div class="" >
                <div class="hh"><img src="../images/b_logo.png" alt=""/></div>
                <div>
                    <div class="oo">
                        <figure><img src="../images/weibo.jpg" alt=""/>
                            <figcaption>关注我们的微博</figcaption>
                        </figure>
                    </div>
                    <div class="oo"> <figure><img src="../images/weibo.jpg" alt=""/>
                        <figcaption>关注我们的微信</figcaption>
                    </figure>
                    </div>
                </div>
            </div>
            <div class="yy">
                <div class="tt">
                <a href=""><strong>关于我们</strong></a>
                <a href=""><strong>加入我们</strong></a>
                <a href=""><strong>法律条规</strong></a>
                <a href=""><strong>隐私政策</strong></a>
                <a href=""><strong>退换货政策</strong></a>
                </div>
                <p>Disney!Pixar All rights reserved.备案号：泸B2-20040339-3</p>
             </div>
        </footer>
    </div>

</div>

</body>
</html>

以下是css

.disini{
    width: 1200px;
    height: 4000px;
    margin: 0 auto;
    border: 1px solid gray;
}
header{
    text-align: center;
    background-color: #ffffff;
}
nav>a{
    display:inline-block;
    width: 14.28%;
    color: black;
}
.aa{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
}
header{
    margin-bottom: 20px;
}
nav>a:hover{
    color: red;
}
.aa:hover{
    background-position:-21px 0 ;
}
.bb{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
    background-position: 0 -20px;
}
.bb:hover{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
    background-position: -22px -20px;
}
.cc{
    display: inline-block;
    width: 21px;
    height: 23px;
    background-image: url("../images/icon.png");
    background-position: 0 -42px;
}
.cc:hover{
    display: inline-block;
    width: 21px;
    height: 23px;
    background-image: url("../images/icon.png");
    background-position: -22px -42px;
}
.dd{
    display: inline-block;
    width: 21px;
    height: 18px;
    background-image: url("../images/icon.png");
    background-position: 0 -64px;
}
.dd:hover{
    display: inline-block;
    width: 21px;
    height: 18px;
    background-image: url("../images/icon.png");
    background-position: -22px -64px;
}
.ee{
    display: inline-block;
    width: 13px;
    height: 22px;
    background-image: url("../images/icon.png");
    background-position: 0 -82px;
}
.ee:hover{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: -22px -82px;
}
.ff{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: 0 -102px;
}
.ff:hover{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: -22px -102px;
}

/*div明星*/
.red{
    text-align: center;
    font-size: 40px;
    margin-top: 56px;
    margin-bottom: 42px;
}
figure>img{
    width: 114px;
}
.yes{
    margin:0 40px ;
    float: left;
}
/*div 商店*/
.blue>h1{
    text-align: center;
    font-size: 40px;
    margin-top: 60px;
    margin-bottom:38px ;
}
.yellow{
    width:600px ;
    height: 520px;
    float: left;
}
.green {
    width: 300px;
    height: 260px;
    float: left;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    border-left:  1px solid gray;
    box-sizing: border-box;
}
/*迪士尼资讯*/
.ll>h1{
    text-align: center;
    margin-top: 60px;
    margin-bottom:42px ;
    font-size: 40px;
}

.end a{
    color: gray;
    font-size: 14px;
}
.ab{
    width: 600px;
    height:480px ;
}
.cd{
    width: 600px;
    height: 300px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    border-right:  1px solid gray;
    box-sizing: border-box;
}
.ef{
    width: 300px;
    height: 300px;
}
.gh{
    width: 299px;
    height: 180px;
    border-left:  1px solid gray;
    box-sizing: border-box;
}

.op{
    float: left;

}
.mn{
    float: right;
}
.mm{
    width: 300px;
    height: 300px;
    float: left;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    box-sizing: border-box;
}
.cd>h1{
    font-size: 30px;
    margin:44px 200px 30px 40px  ;
}
.cd>a{
    margin: 0 50px;
}
.end i{
    display: inline-block;
    width:14px;
    height: 14px;
    background-image: url("../images/icon.png");
    background-position: -49px -102px;
}

/*页脚*/
.hh{
    height: 80px;
    float: left;
    padding-right:30px ;
    margin-left:400px ;
    margin-top: 110px;
    border-right: 1px solid gray;
}
.oo{
    float: left;
    margin-top: 110px;
    margin-right: 34px;
    margin-left: 68px;
}
footer{
    margin-top: 90px;
}
.hh>figure{
    margin-right: 68px;
    margin-left:78px ;
}

.tt{
    text-align: center;
    border-top: 1px solid gray;
    padding-top: 20px;

}
p{
    color: gray;
    font-size: 10px;
    text-align: center;
}
.yy{
    float: right;
    margin-right: 300px;
    margin-top: 30px;

}
.yy a{
    font-size: 18px;
    color: black;
    margin-right:40px ;
    text-decoration: none;
}

用HTML编写迪士尼乐园页面的更多相关文章

html迪士尼网页实现代码
html body> <div>  <header> <nav ...
用Android属性动画实现和演示迪士尼动画基本原则
本文将介绍在Android平台上实现和演示迪士尼动画基本准则. 项目开源,GitHub: https://github.com/vhow/animation 说明: 演示动画原则的想法源自 Anima ...
杂项-公司-百科：华特·迪士尼-un
ylbtech-杂项-公司-百科:华特·迪士尼华特·迪士尼(Walt Disney,全名Walter Elias Disney,又译沃尔特·迪士尼,1901年12月5日—1966年12月15日),出 ...
迪士尼黑科技：爬墙机器人 VertiGo
12 月 30 日,迪士尼研发出的一款爬墙机器人曝光了一段有趣的视频.从视频里可看出这个机器人碰到墙壁时迅速地作出反应爬了上去. 据了解,这个爬墙机器人名叫 VertiGo,由迪士尼研究中心和苏黎世联 ...
HK游记 Day2迪斯尼(下）
接下来我们要去看狮子王庆典,绕啊绕啊,终于进场了,说实话我对一大帮人扮演动物歌舞表演不是很感冒,静倒是觉得很好看,印象最深的是狮子王的主题曲,还有大象车,长颈鹿车,狮子王车,静举着手机拍视频. 看完表 ...
python编写简单的html登陆页面（4）
python编写简单的html登陆页面(4) 1 在python编写简单的html登陆页面(2)的基础上在延伸一下: 可以将动态态分配数据,建立表格,存放学生信息 2 实现的效果如下: 3 动 ...
python编写简单的html登陆页面（3）
1 在python编写简单的html登陆页面(2)的基础上在延伸一下: 可以将静态分配数据,建立表格,存放学生信息 2 加载到静态数据 3 html的编写直接在表格里添加一组数据就行了 4 V ...
python编写简单的html登陆页面（2）
1 在python编写简单的html登陆页面(1)的基础上在延伸一下: 可以将动态分配数据,实现页面跳转功能: 2 跳转到新的页面:return render_template('home1.ht ...
python编写简单的html登陆页面（1）
1 html 打开调式效果如下 2 用python后台编写 # coding:utf-8# 从同一个位置导入多个工具,# 这些工具之间可以用逗号隔开,同时导入# render_template渲染 ...

随机推荐

Docker问题集合
1. 安装后启动出现解决办法: 删除以下文件夹重新启动docker服务即可: 可能原因:(1) 之前docker进程出现错误并保存在keys.json文件中 (2) 删除之前配置了阿里云镜像,生成了 ...
webpack简单学习的入门教程
前言,如果按照官网的安装办法: npm install webpack -g 安装的是最新版的,然后就莫名其妙的有问题(可以安装,但运行有问题).我是小白,我也不知道具体原因,所以我换成2.5.1版本 ...
Python基础-接口与归一化设计、抽象类、继承顺序、子类调用父类，多态与多态性
一.接口与归一化设计 Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 由 ...
MySQL数据库(2)----检索信息
SELECT 语句的简化语法如下: SELECT what to retrive FROM table or tables WHERE conditions that data must satisf ...
How to solve problems
练习是为了帮助你成长 0.Don't panic! 1.What are the inputs? 2.What are the outputs? 3.Work through some example ...
DevExpress中 TreeList控件的常规配置
//以下为TreeList控件样式相关设置 this.treelist_SystemCfg.BackColor = Color.Transparent; this.treelist_SystemCfg ...
tcp-full.cc
ns2--tcp-full.cc /* -*- Mode:C++; c-basic-offset:8; tab-width:8; indent-tabs-mode:t -*- */ /* * Copy ...
Surrounded Regions [未完成]
思路完全一样 AC的代码: class Solution { private: struct Point { int x, y; Point(int _x, int _y):x(_x), y(_y) ...
Python学习---Python下[元组]的学习
元组是不可变的, 用小括号()定义,而且一旦定义 ,不可变[类型是tuple] [元组看做一个整体,不可拆分,不可赋值,但可以全部重新赋值] 通过圆括号,用逗号分隔,常用在使语句或用户定义的函数能够安 ...
Python中GBK, UTF-8和Unicode的编码问题
编码问题,一直是使用python2时的一块心病.几乎所有的控制台输入输出.IO操作和HTTP操作都会涉及如下的编码问题: UnicodeDecodeError:‘ascii’codec can’t d ...

用HTML编写迪士尼乐园页面

用HTML编写迪士尼乐园页面的更多相关文章

随机推荐

热门专题