html迪士尼网页实现代码
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迪士尼网页实现代码的更多相关文章
- 用Android属性动画实现和演示迪士尼动画基本原则
本文将介绍在Android平台上实现和演示迪士尼动画基本准则. 项目开源,GitHub: https://github.com/vhow/animation 说明: 演示动画原则的想法源自 Anima ...
- 迪士尼黑科技：爬墙机器人 VertiGo
12 月 30 日,迪士尼研发出的一款爬墙机器人曝光了一段有趣的视频.从视频里可看出这个机器人碰到墙壁时迅速地作出反应爬了上去. 据了解,这个爬墙机器人名叫 VertiGo,由迪士尼研究中心和苏黎世联 ...
- 用HTML编写迪士尼乐园页面
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head lang="e ...
- 杂项-公司-百科：华特·迪士尼-un
ylbtech-杂项-公司-百科:华特·迪士尼 华特·迪士尼(Walt Disney,全名Walter Elias Disney,又译沃尔特·迪士尼,1901年12月5日—1966年12月15日),出 ...
- HK游记 Day2迪斯尼(下）
接下来我们要去看狮子王庆典,绕啊绕啊,终于进场了,说实话我对一大帮人扮演动物歌舞表演不是很感冒,静倒是觉得很好看,印象最深的是狮子王的主题曲,还有大象车,长颈鹿车,狮子王车,静举着手机拍视频. 看完表 ...
- php正则获取网页标题、关键字、网页描述代码
php正则获取网页关键字,代码如下: function get_keywords($html) { $html=strtolower($html); preg_match("@<hea ...
- Html网页的代码
Html网页的代码 很全哦 1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写 ...
- 网页HTML代码在线运行器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
随机推荐
- day08 学习小测试 九九乘法表 车牌划分计算 大文件读取操作
1.1需求:读取一个100G的文件,检测文件中是否有关键字keys=['苍老师','小泽老师',"alex"], 如果有则替换成"***",并写入到另一个文件中 ...
- SQL-视图-004
什么是视图? 优点:视图是保存在数据库中的SELECT查询,可以简化查询操作,视图可以从多个表中提取数据,并以单个表的形式显示结果,这样就可以针对多个表的查询转化为对一个表的查询. 映射:视图可以理解 ...
- [c#]_ELVE_Message多功能用法
1. 当要显示如图3个按钮时,并要获得单击不同按钮的进行不同的相应时,可以在MessageBoxButtons后面添加一个.(应该英文的点,此处为了醒目,用中文代替)可以看到提示框下方需要几个按 ...
- String引用数据类型
一.String类的第一种方式 (原文地址:https://blog.csdn.net/wangdajiao/article/details/52087302)1.直接赋值 例:String str ...
- Synchronized 有几种用法？
我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面.其实 Synchronized 可以用到更多的场合. 1.同步普通方法(锁实例对象) 这个也是我们用得最多 ...
- PySide中QtGui.QFrame的用法
最近一位同事的出现让我重新正视PySide中designer这个工具的强大之处,通过QtGui.QObject.setGeometry(QtCore.QRect())这个最简单直接的方法可以完成很多复 ...
- scoping作用域，anonymous function匿名函数，built-in functions内置函数
作用域练习1 def test1(): print('in the test1') def test(): print('in the test') return test1 res = test() ...
- oracle12建立非C##用户并且导入数据
由于要导入dmp文件,所以想建立和oracle11一样的用户,折腾了半天,记录一下过程: 1.进入sqlplus,建立用户和分配权限 cmd>sqlplus /nolog SQL>conn ...
- centos7如何安装部署Zabbix
参考http://www.cnblogs.com/momoshouhu/p/8041293.html 1.关闭selinux和firewall 1.1检测selinux是否关闭 [root@local ...
- PAT 乙级 1086 就不告诉你 （15 分）
1086 就不告诉你 (15 分) 做作业的时候,邻座的小盆友问你:“五乘以七等于多少?”你应该不失礼貌地围笑着告诉他:“五十三.”本题就要求你,对任何一对给定的正整数,倒着输出它们的乘积. 输入格式 ...