<!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编写迪士尼乐园页面的更多相关文章
	

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

	


随机推荐
	

    
									
  1. jvm内置锁synchronized不能被中断
			
    很久没看技术书籍了,今天看了一下<七周七并发模型>前面两章讲的java,写的还是有深度的.看到了一个有demo,说jvm内置锁synchronized是不能被中断的.照着书上写了个demo ...
    
			
    2. 
						
  2. Spring Data JPA 缓存结合Ehcache介绍
			
    一级缓存: 会话session.事务级别的,事务退出,缓存就失效了. 实体管理器在事务执行期间持有一份数据的拷贝,而非直接操作数据源. 二级缓存: 进程范围级或集群范围的缓存,这个级别的缓存可配置和修 ...
    
			
    3. 
						
  3. 第11章 Media Queries 与Responsive 设计
			
    Media Queries--媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个 ...
    
			
    4. 
						
  4. 第2章 css边框属性
			
    圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border- ...
    
			
    5. 
						
  5. makefile  模板 (template)
			
    本文把makefile 分成了三份:生成可执行文件的makefile,生成静态链接库的makefile,生成动态链接库的makefile. 这些makefile都很简单,一般都是一看就会用,用法也很容 ...
    
			
    6. 
						
  6. Android Studio修改app图标
			
    1.将下载好的图片放到app\src\main\res\drawable目录下 2.在AndroidManifest.xml下加入一句 android:icon="@drawable/??? ...
    
			
    7. 
						
  7. react-native-echarts
			
    react-native-echarts是react native结合百度echart的图表,集成的一个图表插件. github地址:https://github.com/zhangxinagjunH ...
    
			
    8. 
						
  8. Xwiki安装部署详解
			
    一.Xwiki简介XWiki是一个由Java编写的基于LGPL协议发布的开源wiki和应用平台.XWiki是一款基于java所编写的wiki,它可以运行在如Tomcat,Jetty,JBoss,Web ...
    
			
    9. 
						
  9. docker中自定ingress网络
			
    在某些时候,docker自动生成的ingress网络会与服务器上已经存在的网络产生冲突,这个时候,你需要自定义ingress. 在自定义前,你需要删除所有有端口发布的服务. 使用命令docker ne ...
    
			
    10. 
						
  10. July 20th 2017 Week 29th Thursday
			
    The darkness is no darkness with you. 有了你,黑暗将不再是黑暗. The darkness will not be driven out if we failed ...
    
			
    11.