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;
}

转载于:https://www.cnblogs.com/zhuxinpeng-looking/p/10568355.html

html迪士尼网页实现代码相关推荐

  1. HTML期末大作业—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    HTML5期末大作业:影视电影网站设计-- 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录 HTM ...

  2. 美通社企业新闻汇总 | 2019.2.1 | 迪士尼推出猪年限定产品；阿联酋航空与南航签订代码共享协议...

    要闻 和睦家健康选礼指南:春节如何为长辈买好礼 迪士尼贺新春,推出猪年限定产品 阿联酋航空与中国南方航空签订代码共享协议 索理思和巴斯夫已完成造纸和水处理化学品业务的合并 JNA珠宝设计大赛2018/ ...

  3. 淘宝迪士尼抢购脚本 无需修改代码 只需要修改抢购时间 附上安装教程

    上一次分享了selenium写抢购脚本,但是很多人都不会用,甚至还在问我no module named xxxx的问题,所以这次出了个新的脚本,无需编程,只需要更改抢购时间即可,速度比selenium ...

  4. HTML5期末大作业：影视电影网站设计—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    HTML5期末大作业:影视电影网站设计-- 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 常见网页设计作业 ...

  5. HTML5期末大作业：电影个人介主题——迪士尼影视电影(6页)带音乐 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:电影个人主题网站设计--迪士尼影视电影(6页)带音乐HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...

  6. 迪士尼研究院等将人造“神经纤维”用于软体机器人，赋予其“本体感知能力”！...

    来源:机器人大讲堂  导读 软体机器人模仿章鱼,象鼻,海星等动物而设计,栩栩如生,他们由软材料(硅胶,橡胶)构成,有着天生优良的环境适应性以及安全交互性.但是相比于传统机器人,软体机器人的" ...

  7. 通过机器学习识别“迪士尼在逃公主”，程序员宠女的正确打开方式！

    到了庆祝的时候了!我们刚刚送走了圣诞老人.现在正等待新年的钟声敲响.所以我想到建立一个很酷的东西(至少我的七岁小公主会觉得)同时学一点机器学习.所以我们要做一个什么? 我借用的我女儿所有迪士尼公主人偶 ...

  8. 迪士尼源码_如何在迪士尼+上禁用自动播放和背景视频

    迪士尼源码 Just like Netflix, Disney+ makes it easy to binge-watch a show by automatically playing the ne ...

  9. 光线追踪渲染实战（四）：微平面理论与迪士尼 BRDF，严格遵循物理！

    项目代码仓库: GitHub:https://github.com/AKGWSB/EzRT gitee:https://gitee.com/AKGWSB/EzRT 目录 前言 0. 前情回顾 1. 微 ...

最新文章

  1. 【JSConf EU 2018】Ryan Dahl: Node.js 的设计错误
  2. 曙光服务器2008系统,在中科曙光I620-G20服務器上安裝Windows 2008 R2 系統步驟
  3. 交叉编译工具链的使用
  4. 机器学习《西瓜书》EM算法公式推导+三硬币模型求解实例
  5. Java编程：分治算法
  6. 由最近Win10升级事故，回忆一次经历
  7. 初识MySQL数据库
  8. 笔记7.28 数据库经典问题
  9. python windows 下设置文件锁、多线程
  10. 经典Java面试题-Java中Char类型的运算
  11. 综述 | 语义分割经典网络及轻量化模型盘点
  12. 基础30讲 第11讲 多元函数微分学
  13. 组策略 控制台登录计算机用用户,更方便的管理计算机！Windows组策略应用全攻略一...
  14. VM16虚拟机去虚拟化心得2
  15. 正则表达式中，表示匹配非数字字符的字符
  16. flex:1是什么？
  17. 手机页面前端框架weui+
  18. 大屏幕led无缝拼接显示屏的十大技术优势
  19. autojs做小游戏-连连看
  20. 如何优雅地下载b站视频

热门文章

  1. 【Python】 -- 使用jieba库实现对《三国演义》人物出场次数统计
  2. GeoIP获取IP的所在地区
  3. php实现图片模糊,PHP压缩图片并模糊处理(抄的哟)
  4. Processing制作水波纹动画
  5. 平台云Deis部署2-deisctl安装
  6. 比RBAC更好的权限认证方式（Auth类认证）
  7. python——实现数据去重
  8. SQL之获取积分最多的人--HQL面试题37
  9. Warning[w6]: Type conflict for external/entry AClkSet, in module 1 against
  10. 【转】Python 量化投资实战教程(1) — Backtrader 教程