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

随机推荐

合并excel的多个sheet
'合并excel的多个sheetSub 合并当前工作簿下的所有工作表()Application.ScreenUpdating = FalseFor j = 1 To Sheets.Count If S ...
2013年未之wpf项目乱述
不知识为何现已很少在网上发帖,貌似人生的方向已经看的七七八八.要么用心工作,要么自主创业.无论怎么样,对于现在的我来说都是一种淡定的选择.作为一个c#程序员,今年下半年开始使用wpf,更觉得wpf将来 ...
CentOS 7运维管理笔记(4)----安装ftp服务器
在CentOS 7下安装ftp服务器,可以使局域网内的主机拥有共享文件的一个站点. 在Linux系统下,vsftp是一款应用比较广泛的FTP软件,其特点是小巧轻快,安全易用.目前在开源操作系统中常用的 ...
IsWindow,findwindow
原文:http://www.cnblogs.com/ahuo/archive/2007/12/05/983354.html IsWindow 函数功能:该函数确定给定的窗口句柄是否识别一个已存在的窗口 ...
springboot 使用webflux响应式开发教程（一）
什么是webFlux 左侧是传统的基于Servlet的Spring Web MVC框架,右侧是5.0版本新引入的基于Reactive Streams的Spring WebFlux框架,从上到下依次是R ...
BitmapFactory 读取图片方法总结
①decodeFile(java.lang.String pathName) ②decodeResource(android.content.res.Resources res, int id ...
lua中的weak table
weakTable = {} weakTable[] = function() print("i am the first element") end weakTable[] = ...
针对通过 SSH 连接到 Azure Linux VM 时发生的失败、错误或被拒绝问题进行故障排除
尝试连接到 Linux 虚拟机 (VM) 时,有多种原因可能会导致安全外壳 (SSH) 错误.SSH 连接失败或被拒绝. 本文帮助用户找出原因并更正问题. 可以使用 Azure 门户.Azure CL ...
IP及DNS设置（Netsh）
#根据连接状态查找使用中网卡gwmi win32_networkadapter -filter "NetConnectionStatus = 2"#根据是否配置网关查找使用中网卡$ ...
体验SpringBoot
体验SpringBoot 1.介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开 ...

用HTML编写迪士尼乐园页面

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

随机推荐

热门专题