用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渲染 ...

随机推荐

在centos7中使用supermin制作centos6.5docker镜像
原文按照原文操作发现,版本并非是我们想要的,而是跟宿主机版本一致.不过可以到dockerhub上pull一个centos6.5的镜像要安装使用docker 需要内核3.10以上,所以在虚拟机中安装 ...
HTML 发表说说制作方法
==================================================================================================== ...
Flex和MyEclipse10整合时候需要注意的问题
1.myeclipse和flex的位数要一致,不能混着安装 2.独立安装完Adobe Flash Builder 4.6 Installer之后,在其的安装文件夹下有一个utilities文件夹下有一 ...
Linux基础之命令练习Day2-useradd（mod，del），groupadd（mod，del），chmod，chown，
作业一: 1) 新建用户natasha,uid为1000,gid为555,备注信息为“master” 2) 修改natasha用户的家目录为/Natasha 3) 查看用户信息配置文件的最后一行 4) ...
CentOS/ubuntu/Solaris软件包安装
一.CentOS/Red Hat yum = Yellow dog Updater, Modified (1)yum配置文件 (在CentOS下,默认安装yum,无须配置即可使用) ...
【Udacity】解决：字幕遮挡视频内容怎么办？Udacity字幕大小调整
字幕有没有办法显示在最下方,否则把内容挡住了,根本看不清老师所指的内容 Chrome 的小插件,能方便地调节视频的字幕大小,譬如:Udacity 的学习视频字幕大小不能调节,有时候不想它占太多位置,而 ...
Springmvc ajax跨域请求处理
上次给一个网站写网站前后端分离最后跪在ajax跨域上面了自己在网上找了个方法亲试可用记录一下写一个类继承HandlerInterceptorAdapter package co ...
Unable to create a constant value of type 'System.Object'. Only primitive types or enumeration types are supported in this context.
代码如下: var query = from s in db.LoginUserServices join ss in db.Services on s.ServiceType equals ss.C ...
React - React Developer Tools开发者工具的安装与使用（Chrome调试插件）
原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...
windows7 端口查看以及杀死进程释放端口
1.调出命令窗口:开始---->运行---->cmd,或者是window+R组合键 2.输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是4300 ...

用HTML编写迪士尼乐园页面

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

随机推荐

热门专题