迪士尼首页布局

最新推荐文章于 2024-08-20 16:49:19 发布
最新推荐文章于 2024-08-20 16:49:19 发布
阅读量573 收藏 2
点赞数
分类专栏： web前端 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/109613243
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/test8-7.css">
</head>
<body>
   <main>
       <!-- 页面头部 -->
       <header>
           <nav class="left_nav">
               <a href="#2"><i class="index"></i>首页</a>
               <a href="#3"><i class="shop"></i>商店</a>
               <a href="#4"><i class="funny"></i>乐园</a>
           </nav>
           <img src="./img/Disney/b_logo.png" alt="迪士尼logo" title="迪士尼logo" class="logo">
           <nav class="right_nav">
            <a href="#2"><i class="film"></i>影视</a>
            <a href="#3"><i class="shuma"></i>数码</a>
            <a href="#4"><i class="menber"></i>会员</a>
           </nav>
       </header>
       <!-- Banner -->
       <img src="./img/Disney/banner.jpg" alt="疯狂动物城" title="疯狂动物城">
       <!-- 页面主体 -->
       <article>
           <!-- 三个区域 -->
           <section>
               <h1>明星</h1>
               <div class="section1">
                <figure>
                    <img src="./img/Disney/miqi.jpg" alt="米奇和他的朋友们">
                    <figcaption>米奇和他的朋友们</figcaption>
                </figure>
                <figure>
                    <img src="./img/Disney/baixue.jpg" alt="迪士尼公主">
                    <figcaption>迪士尼公主</figcaption>
                </figure>
                <figure>
                    <img src="./img/Disney/car.jpg" alt="赛车总动员">
                    <figcaption>赛车总动员</figcaption>
                </figure>
                <figure>
                    <img src="./img/Disney/princess.jpg" alt="小公主苏菲亚">
                    <figcaption>小公主苏菲亚</figcaption>
                </figure>
                <figure>
                    <img src="./img/Disney/queen.jpg" alt="冰雪奇缘">
                    <figcaption>冰雪奇缘</figcaption>
                </figure>
                <figure>
                    <img src="./img/Disney/machine.jpg" alt="星球大战">
                    <figcaption>星球大战</figcaption>
                </figure>
               </div>
           </section>
           <section>
            <h1>商店</h1>
            <div class="section2">
                <div>
                    <img src="./img/Disney/160322141822716049.jpg" alt="图片">
                </div>
                <div>
                    <figure>
                        <img src="./img/Disney/handbag.jpg" alt="米奇手提包" title="米奇手提包">
                        <figcaption>米奇手提包</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/Disney/schoolbag.jpg" alt="米奇书包" title="米奇书包">
                        <figcaption>米奇书包</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/Disney/photo.jpg" alt="米奇与布鲁托" title="米奇与布鲁托">
                        <figcaption>米奇与布鲁托</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/Disney/handbag.jpg" alt="米奇手提包" title="米奇手提包">
                        <figcaption>米奇手提包</figcaption>
                    </figure> 
                </div>
            </div>
           </section>
           <section class="section3">
            <h1>迪士尼资讯</h1>
            <div>
                <figure>
                    <img src="./img/Disney/160113121641905797.jpg" alt="上海迪士尼乐园" title="上海迪士尼乐园">
                    <figcaption>
                        <h2>上海迪士尼乐园开园在即！</h2>
                        <a href="#1">2016年6月16日正式开园的上海迪士尼乐园，是中国内地首座迪士尼主题乐园，不但融入了中国风，还配置了很多自动化的服务设施。
                            <i></i>
                        </a>
                    </figcaption>
                </figure> 
                <div>
                    <figure>
                        <img src="./img/Disney/160321105131828720.jpg" alt="疯狂动物城" title="疯狂动物城">
                        <figcaption>
                            <h4>《疯狂动物城》票房突破10亿人民币！</h4>
                            <a href="#1">该片讲述了在一个所有动物和平共处的动物城市，兔子朱迪通过自己努力奋斗完成自己儿时的梦想，成为动物警察的故事。
                                <i></i>
                            </a>
                        </figcaption>
                    </figure> 
                    <figure>
                        <img src="./img/Disney/160225171114064621.jpg" alt="迪士尼音乐报时钟楼" title="迪士尼音乐报时钟楼">
                        <figcaption>
                            <h4>全球首座迪士尼音乐报时钟楼正式落成</h4>
                            <a href="#1">首座迪士尼全球音乐报时钟楼于2016年2月22日落成亮相上海陆家嘴。
                                <i></i>
                            </a>
                        </figcaption>
                    </figure> 
                    <figure>
                        <img src="./img/Disney/blue.jpg" alt="头脑特工队" title="头脑特工队">
                        <figcaption>
                            <h4>《头脑特工队》获得第88届奥斯卡最佳动画长片</h4>
                            <a href="#1">该片讲述了小女孩莱莉因为爸爸的工作变动而搬到旧金山，她的生活被这五种情绪所掌控。 尽展脑内情绪的缤纷世界。
                                <i></i>
                            </a>
                        </figcaption>
                    </figure> 
                </div>
            </div>
           </section>
       </article>
       <footer>
           <div>
            <img src="./img/Disney/b_logo.png" alt="迪士尼logo" title="迪士尼logo"  class="img1">
            <figure>
                <img src="./img/Disney/weibo.jpg" alt="关注我们的微博" class="img2">
                <figcaption>关注我们的微博</figcaption>
            </figure>
            <figure>
                <img src="./img/Disney/weibo.jpg" alt="关注我们的微信" class="img3">
                <figcaption>关注我们的微信</figcaption>
            </figure>
        </div>
        <div>
            <p>关于我们</p>
            <p>加入我们</p>
            <p>法律条款</p>
            <p>隐私政策</p>
            <p>退换货政策</p>
        </div>
        <p>Disney | Pixar All rights reserved. 备案号：沪ICP备07025394号-17</p>
       </footer>
   </main> 
</body>
</html>

main {
    width: 1200px;
    margin: 0 auto 135px;
}
header {
    height: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.logo {
    width: 170px;
    justify-content: center;
}
.left_nav,.right_nav {
    width: 515px;
    height: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

header a {
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    box-sizing: border-box;
}
header>nav img {
    width: 15px;
    height: 15px;
    margin: 1px;
}
a:hover {
    color: red;
}
header i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/Disney/icon.png);
    margin:2px 5px -2px;
}
.index {
    background-position: -1px 0px;
}
.index:hover {
    background-position: -23px 0;
}
.shop {
    background-position: -1px -20px;
}
.shop:hover {
    background-position: -22px -21px;
}
.funny {
    background-position: -1px -44px;
}
.funny:hover {
    background-position: -22px -44px;
}
.film {
    background-position: -1px -63px;
}
.film:hover {
    background-position: -22px -63px;
}
.shuma {
    background-position: 0px -82px;
}
.shuma:hover {
    background-position: -21px -82px;
}
.menber {
    background-position: 0px -101px;
}
.menber:hover {
    background-position: -21px -101px;
}
main>img {
    width: 100%;
    height: 500px;
    background-color: sandybrown;
    margin: 5px auto 15px;
    overflow: hidden;
}
h1 {
    text-align: center;
    margin: 30px auto;
}
.section1 {
    width:100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.section1>figure {
    width: 155px;
    height: 170px;
    margin: 0px;
   
}
.section1 img {
    width: 135px;
    margin: 0 10px 10px 10px;
}
.section1 figcaption {
    text-align: center;
    font-weight: bold;
}
article>section:nth-child(1) {
    height: 300px;
    overflow: hidden;
}
article>section:nth-child(2) {
    height: 710px;
    /* border: 1px solid greenyellow; */
    overflow: hidden;

}
.section2>div:nth-child(1)>img {
    width: 600px;
    height: 600px;
    margin: 0px;
}
.section2 {
    position: relative;
}
.section2>div:nth-child(2) {
    width: 600px;
    height: 600px;
    position: absolute;
    right: 0px;
    top: 0px;
    /* background-color: silver; */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.section2 figure {
    width: 299px;
    height: 299px;
    margin: 0px;
}
.section2>div>figure:nth-child(-n+2) {
    border-top: 1px solid #dcdcdc;
    border-right: #dcdcdc 1px solid;
}
.section2>div>figure:nth-child(n+3) {
    border-top: 1px solid #dcdcdc;
    border-right: #dcdcdc 1px solid;
    border-bottom: solid 1px #dcdcdc;
}
.section2 img {
    width: 260px;
    height: 260px;
    margin: 0px 19px;
}
.section2 figcaption {
    text-align: center;
    font-weight: bold;
}
article>section:nth-child(3) {
    height: 875px;
    margin-top: 15px;
    overflow: hidden;
}
.section3>div {
    height: 773px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    border-bottom: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    box-sizing: border-box;

}
.section3>div>div {
    width: 600px;
    position: absolute;
    right: 0;
    top: 0;
}
.section3>div>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.section3>div>div img {
    width: 300px;
    height: 300px;
}
.section3>div>div>figure {
    width: 300px;
    margin: 0px ;
}
.section3>div>div>figure:nth-of-type(2) {
    border-right: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    box-sizing: border-box;
}
.section3>div>div>figure:nth-of-type(3) {
    border-right: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    /* box-sizing: border-box; */
    display: flex;
    width: 600px;
}
.section3>div>div>figure>figcaption {
    width: 260px;
    margin: 0px auto 11px;
}
.section3>div>div>figure:nth-of-type(3)>figcaption {
    height: 100%;
    margin: 0px auto;
}

.section3 h4 {
    margin: 10px 0;
    text-align: left;
}
.section3>div>figure {
    margin: 0px;
    width: 600px;
}
.section3>div>figure>figcaption {
    width: 520px;
    margin: 0 40px;
}
.section3 h2 {
    text-align: left;
}
.section3 a {
    color: #666666;
    text-decoration: none;
    line-height: 1.5;
}
.section3 i {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../img/Disney/icon.png);
    background-position: -46px -173px;
}
footer {
    width: 490px;
    height: 190px;
    overflow: hidden;
    margin: 90px auto 0px;

}
footer figure {
    margin: 0px;
}
footer figcaption {
    font-size: 12px;
    font-weight: bold;
}
.img1 {
    width: 170px;
    height: 50px;
    margin-top: 20px;
    padding-right: 25px;
    padding-bottom: 20px;
    border-right: 1px solid grey;
}
.img2,.img3 {
    width: 75px;
    height: 75px;
    margin: 0px 4.5px;
}
footer>div:nth-child(1) {
    padding-bottom: 20px;
    border-bottom: 1px solid grey;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
}
footer>div:nth-child(2) {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}
footer>p {
    height: 18px;
    margin: 0px;
    color: #666666;
    text-align: center;
}
V________
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
迪士尼案例分析.docx
12-22
迪士尼是全球知名的娱乐巨头，以其丰富的知识产权和多元化的业务布局闻名于世。本文将通过深入分析迪士尼的战略，探讨其成功背后的驱动力。 一、案例背景 迪士尼起源于1920年代，由华特·迪士尼和罗伊·迪士尼兄弟...
迪士尼网页.zip
12-15
3. **CSS（层叠样式表）**：CSS用于控制网页的外观和布局，包括字体、颜色、间距、布局等。迪士尼的网页可能会使用自定义的CSS样式来实现独特的动画效果和主题配色。 4. **JavaScript**：JavaScript是一种客户端...
用HTML编写迪士尼乐园页面
weixin_33910434的博客
04-22 417
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/res...
HTML5期末大作业：电影个人介主题——迪士尼影视电影(6页)带音乐 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5学生网页设计作业成品模板
10-22 796
HTML5期末大作业：电影个人主题网站设计——迪士尼影视电影(6页)带音乐HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+
迪士尼网页
weixin_30634661的博客
04-22 469
HTML代码 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"/> <lin...
dreamweaver作业静态HTML网页设计模板——迪士尼影视电影(6页)带音乐
HTML网页设计
07-27 1229
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
迪士尼页面制作
weixin_30323961的博客
04-21 505
html代码 <body><div class="main"> <!--导航--><header> <nav> <a href=""><i></i>首页</a> <a href=""><i></i>商店</a...
iNFTnews | 迪士尼如何布局Web3
weixin_56136405的博客
08-09 203
迪士尼公司将元宇宙和Web3.0视作“下一代叙事方式”，虽然其元宇宙战略细节仍处于模糊状态，但从其相关表态与举措中可以清晰看出迪士尼公司对于元宇宙的决心与期待。
迪士尼案例分析.pdf
07-28
通过了解行业环境，迪士尼能够根据全球传媒产业的动态调整其业务布局和战略方向。 三、迪士尼产业链分析 迪士尼产业链的分析可以分为纵向整合和业务模块分析两个部分。纵向整合（图8）体现了迪士尼在内容创造、生产...
迪士尼数字之家
02-14
1. **布局设计**：CSS允许开发者通过盒模型、Flexbox或Grid布局来构建复杂且响应式的页面结构。在迪士尼的平台上，这种灵活性使得页面能在不同设备和屏幕尺寸上自适应显示，无论是电脑、平板还是手机，用户都能获得...
迪士尼服务贸易战略分析.zip
09-15
本文将深入探讨迪士尼的服务贸易战略，包括其内容创新、品牌扩展、全球化布局、数字化转型以及文化适应等方面。 一、内容创新 迪士尼的核心竞争力在于其丰富的内容资源，包括动画电影、电视剧、漫画等。迪士尼通过...
HTML期末大作业~迪士尼影视电影6页面带音乐~Web大学生网页成品-s026
面试情报局
04-08 356
页面标题为“迪士尼影业”，导航菜单包含指向主页、迪士尼动画片、公司简介、发展过程和电影纪录的链接。简介提供了迪士尼影业的基本信息，历史简要介绍了其发展历程，电影纪录列出了迪士尼影业创造的一些电影纪录，剧情剧照展示了迪士尼影业一些著名电影的剧照。HTML期末大作业~ 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作，HTML网页设计结课作业。该网站为用户提供有关迪士尼影业及其电影的全面信息，并通过嵌入音乐增强了用户体验。
CSS属性：fit-content
Zing_ing的博客
08-12 528
/</</
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 236
【代码】原神4.8版本抽到角色和重点培养数据表。
HTML5+JavaScript绘制彩虹和云朵
cnds123的专栏
08-10 735
HTML5+JavaScript绘制彩虹和云朵，改进版云彩能动——从左向右不停地移动
原生HTML5、CSS、JavaScript实现简易网易云音乐播放
I am the light coursing in the soul of the moon.
08-13 350
【代码】原生HTML5、CSS、JavaScript实现简易网易云音乐播放。
028 酒店管理ssm.zip
最新发布
08-20
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《028 酒店管理ssm》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
大学生创业计划书(46)-两份资料.doc
08-20
大学生创业计划书(46)-两份资料.doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值