Demo-1（Dinesy）

最新推荐文章于 2024-08-29 08:55:17 发布
最新推荐文章于 2024-08-29 08:55:17 发布
阅读量732 收藏
点赞数
分类专栏： demo 文章标签： html css 练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36683228/article/details/53241878
版权

做一些简单的页面练练
都是网上一些比较早的页面了
现在大半都应该改版了吧…

好了，下面分别是HTML和css
没什么特别的，所以就没有Js了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"/>
    <title>Disney</title>
</head>
<body>
<div class="content">
    <header>
        <nav>
            <ul>
                <li>
                    <i></i>
                    <a href="#">首页</a>
                </li>
                <li>
                    <i></i>
                    <a href="#">商店</a>
                </li>
                <li>
                    <i></i>
                    <a href="#">乐园</a>
                </li>
                <li>
                    <img src="pic/b_logo.png" alt=""/>
                </li>
                <li>
                    <i></i>
                    <a href="#">影视</a>
                </li>
                <li>
                    <i></i>
                    <a href="#">数码</a>
                </li>
                <li>
                    <i></i>
                    <a href="#">会员</a>
                </li>
            </ul>
        </nav>
        <div>

        </div>
    </header>

    <div class="main">
    <div class="clear"></div>

    <div class="banner">
        <img src="pic/160216172223655101.jpg" alt="banner"/>
    </div>
    <div class="clear"></div>

    <div class="star">
        <h1>明 星</h1>
        <ul>
            <li>
                <img src="pic/151209173849244246.jpg" alt="Micky"/>
                <p>米奇和他的朋友们</p>
            </li>
            <li>
                <img src="pic/151209173747572402.jpg" alt="princiss"/>
                <p>迪士尼公主</p>
            </li>
            <li>
                <img src="pic/151130185638114248.jpg" alt="car"/>
                <p>赛车总动员</p>
            </li>
            <li>
                <img src="pic/151130185656630780.jpg" alt="Sofia"/>
                <p>小公主苏菲亚</p>
            </li>
            <li>
                <img src="pic/151130185733287815.jpg" alt="Ice"/>
                <p>冰雪奇缘</p>
            </li>
            <li>
                <img src="pic/151130185754146838.jpg" alt="battle"/>
                <p>星球大战</p>
            </li>
        </ul>

    </div>
    <div class="clear"></div>

    <div class="shop">
        <h1>商 店</h1>
        <div class="s1">
            <div class="s2">
                <img src="pic/160322141822716049.jpg" alt="1"/>
            </div>
            <div class="s2">
                <div class="s3">
                    <div class="s3-1">
                        <img src="pic/151130185754146838.jpg" alt="1"/>
                        <p>星球大战</p>
                    </div>
                    <div class="s3-2">
                        <img src="pic/151130185754146838.jpg" alt="1"/>
                        <p>星球大战</p>
                    </div>
                </div>
                <div class="s3">
                    <div class="s3-3">
                        <img src="pic/151130185754146838.jpg" alt="1"/>
                        <p>星球大战</p>
                    </div>
                    <div class="s3-4">
                        <img src="pic/151130185754146838.jpg" alt="1"/>
                        <p>星球大战</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <div class="news">
        <h1>迪士尼资讯</h1>
        <div class="n1">
            <div class="n2">
                <div class="p1">
                    <img src="pic/160113121641905797.jpg" alt="p1"/>
                </div>
                <div class="t1">
                    <i></i>
                    <h2>上海迪士尼乐园开业在即！</h2>
                    <p>自2016年6月16日起，您将可以探索一个前所未有的神奇世界，每个人能在这里点亮心中奇梦。
                        <i class="point"></i>
                    </p>
                </div>

            </div>
            <div class="n2">
                <div class="n3">
                    <div class="p2">
                        <img src="pic/160321105131828720.jpg" alt="p2"/>
                    </div>
                    <div class="t2">
                        <i></i>
                        <h3>《疯狂动物城》票房突破10亿人民币！</h3>
                        <p>《疯狂动物城》上映第16日登顶中国动画卖座第一，并成为史上首部破10亿动画片。
                            <i class="point"></i>
                        </p>
                    </div>
                </div>
                <div class="n3">
                    <div class="p3">
                        <img src="pic/160225171114064621.jpg" alt="p3"/>
                    </div>
                    <div class="t3">
                        <i></i>
                        <h3>全球首座迪士尼音乐报时钟楼正式落成</h3>
                        <p>迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。
                            <i class="point"></i>
                        </p>
                    </div>
                </div>
                <div class="n4">
                    <div class="p4">
                        <img src="pic/160229155948703765.jpg" alt="p4"/>
                    </div>
                    <div class="t4">
                        <i></i>
                        <h3>《头脑特工队》获得第88届奥斯卡最佳动画长片</h3>
                        <p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！
                            <i class="point"></i>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <footer>
        <div class="about">
            <div class="logo">
                <img src="pic/b_logo.png" alt=""/>
            </div>
            <div class="code">
                <img src="pic/weibo.jpg" alt=""/>
                <p>关注我们的微博</p>
            </div>
            <div class="code">
                <img src="pic/weibo.jpg" alt=""/>
                <p>关注我们的微信</p>
            </div>

        </div>
        <div class="link">
            <a href="#">关于我们</a>
            <a href="#">加入我们</a>
            <a href="#">法律条款</a>
            <a href="#">隐私政策</a>
            <a href="#">退换货政策</a>
            <p>Disney | Pixar All rights resvered.备案号:沪B2-20040339-3</p>
        </div>
    </footer>
    <div class="clear"></div>

    <div class="BackToTop">
        <a href="#">TOP</a>
    </div>

    </div>
</div>

</body>
</html>
*{
    margin: 0;
    padding: 0;
    font-family: "Arial", "Microsoft Yahei";
}
h1{
    text-align: center;
    margin-bottom:24px;
}
.clear{
    clear: both;
}

/*body区域*/
.content{
    width: 1200px;
    height: auto;
    margin: auto;
    /*outline: 1px solid;*/
}

/*除header以外的所有内容，固定头部时启用top*/
.main{
    position: relative;
    /*top: 80px;*/
}

/*头部固定，跟随页面*/
/*怎么变化头部高度，页面开始下滑后，头部高度变小O.O*/
/*header{*/
    /*position: fixed;*/
    /*background: rgba(255,255,255,0.8);*/
    /*z-index: 999;*/
/*}*/

/*nav*/
nav ul{
    display: inline-block;
    padding: 10px 0 20px;
    /*margin: 0 0 20px;*/
}
nav ul li{
    display: inline-block;
    list-style: none;
    float: left;
    width: 180px;
    text-align: center;
    height: 60px;
    /*outline: 1px solid;*/
}
nav ul li:nth-child(4){
    width: 120px;
}
nav ul li i{
    display: inline-block;
    vertical-align: middle;
    /*outline: 1px solid;*/
    background-image: url(pic/icon.png);
}
nav ul li i:first-child{
    width: 21px;
    height: 20px;
}
nav ul li:first-child:hover i{
    background-position: -22px 0;
}
nav ul li:nth-child(2) i{
    background-position: 0 -19px;
}
nav ul li:nth-child(2):hover i{
    background-position: -22px -19px;
}
nav ul li:nth-child(3) i{
    height: 23px;
    background-position: 0 -40px;
}
nav ul li:nth-child(3):hover i{
    background-position: -22px -40px;
}
nav ul li:nth-child(5) i{
    height: 17px;
    background-position: 0 -63px;
}
nav ul li:nth-child(5):hover i{
    background-position: -22px -63px;
}
nav ul li:nth-child(6) i{
    height: 22px;
    background-position: 0 -80px;
}
nav ul li:nth-child(6):hover i{
    background-position: -22px -80px;
}
nav ul li:nth-child(7) i{
    height: 18px;
    background-position: 0 -101px;
}
nav ul li:nth-child(7):hover i{
    background-position: -22px -101px;
}
nav ul li a{
    text-decoration: none;
    color: #000;
    line-height: 60px;
}
nav ul li:hover a{
    color: red;
}

/*banner*/
.banner{
    padding: 20px 0;
}

/*star*/
.star{
    padding: 40px 0;
}
.star ul li{
    display: inline-block;
    list-style: none;
    width: 200px;
    float: left;
    text-align: center;
}
.star ul li img{
    width: 60%;
    height: 50%;
}
.star ul li p{
    line-height: 48px;
}

/*shop*/
.shop{
    width: 100%;
    padding: 40px 0;
}
.s1 .s2 .s3 .s4{
    /*outline: 1px solid #000;*/
    overflow: hidden;
    /*text-align: center;*/
}
.s1{
    width: 1200px;
    height: 592px;
}
.s2{
    width: 50%;
    height: 100%;
    float: left;
}
.s3{
    width: 100%;
    height: 50%;
}
.s3-1{
    width: 299px;
    height: 295px;
    float: left;
    text-align: center;
    vert-align: middle;
    /*outline: 1px solid;*/
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
}
.s3-2{
    width: 299px;
    height: 295px;
    float: left;
    text-align: center;
    vert-align: middle;
    /*outline: 1px solid;*/
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
}
.s3-3{
    width: 299px;
    height: 294px;
    float: left;
    text-align: center;
    vert-align: middle;
    /*outline: 1px solid;*/
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
    border-bottom: 1px solid #bababa;
}
.s3-4{
    width: 299px;
    height: 294px;
    float: left;
    text-align: center;
    vert-align: middle;
    /*outline: 1px solid;*/
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
    border-bottom: 1px solid #bababa;
}
.s3 img{
    width: 160px;
    margin: 60px 0 20px;
}

/*news*/
.news{
    width: 100%;
    padding: 40px 0;
}
.news p{
    padding: 18px 28px;
}
.news h2{
    font-size: 32px;
    padding: 0 48px;
}
.news h3{
    font-size: 18px;
    padding: 0 28px;
}
.n1{
    width:100%;
    height: 769px;
}
.n2{
    width: 50%;
    height: 100%;
    float: left;
}
.n3{
    width: 50%;
    height: 473px;
    float: left;
}
.n4{
    width: 100%;
    height: 296px;
    clear: both;
}
.p1{
    width: 100%;
    height: 473px;
}
.t1{
    width: 599px;
    height: 295px;
    border-left: 1px solid #bababa;
    border-bottom: 1px solid #bababa;
}
.t1 p{
    padding: 18px 48px;
    position: relative;
    float: left;
}
.t2 p{
    position: relative;
    float: left;
}
.t3 p{
    position: relative;
    float: left;
}
.t4 p{
    position: relative;
    float: left;
}

.t1 i{
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    top: -25px;
    left: 50px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: 0 -195px;
}
.p2.p3{
    width: 100%;
    height: 300px;
}
.t2{
    width: 100%;
    height: 173px;
}
.t3{
    width: 298px;
    height: 173px;
    border-left: 1px solid #bababa;
    border-right: 1px solid #bababa;
}
.t2 i{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: -15px;
    left: 30px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: 0 -245px;
}
.t3 i{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: -15px;
    left: 30px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: 0 -245px;
}
.p4{
    width: 50%;
    height: 296px;
    float: left;
}
.t4{
    width: 299px;
    height: 294px;
    float: left;
    border-bottom: 1px solid #bababa;
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
}
.t4 i{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 30px;
    left: -15px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: 0 -245px;
}
.news .t1 p .point{
     display: inline-block;
     float: left;
     position: absolute;
     top: 40px;
     left: 220px;
     width: 22px;
     height: 22px;
     /*outline: 1px solid;*/
     background-image: url("pic/icon.png");
     background-position: -40px -171px;
}
.news .t2 p .point{
    display: inline-block;
    float: left;
    position: absolute;
    top: 60px;
    left: 140px;
    width: 22px;
    height: 22px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: -40px -171px;
}
.news .t3 p .point{
    display: inline-block;
    float: left;
    position: absolute;
    top: 60px;
    left: 104px;
    width: 22px;
    height: 22px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: -40px -171px;
}
.news .t4 p .point{
    display: inline-block;
    float: left;
    position: absolute;
    top: 62px;
    left: 28px;
    width: 22px;
    height: 22px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
    background-position: -40px -171px;
}

/*footer*/
.footer{
    text-align: center;
}
.about{
    height: 120px;
    width: 520px;
    margin: 100px auto 20px;
    border-bottom: 1px solid #bababa;
}
.logo{
    padding: 10px 30px;
    margin: 10px 0;
    float: left;
    border-right: 1px solid #bababa;
}
.code{
    text-align: center;
    padding: 0 30px 10px;
    margin: 10px 0;
    float: left;
}
.code p{
    font-weight: 700;
    color: #323232;
}
.link{
    margin: auto;
    text-align: center;
}
.link a{
    text-decoration: none;
    color: #323232  ;
    font-weight: 700;
    padding: 0 18px;
}
.link a:hover{
    color: red;
}
.link p{
    padding: 12px;
    color: #bababa;
}


/*back to top*/
.BackToTop{
    position: fixed;
    width: 40px;
    right: 10px;
    bottom: 20px;
    background: #bababa;
    text-align: center;
    /*vertical-align: middle;*/
}
.BackToTop a{
    display: block;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
}
.BackToTop a:hover{
    color: #bababa;
    background: #000;
}
荒原芒果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS Diner
weixin_50698273的博客
12-30 1544
第一关：元素选择器 plate plate元素 select the plates 第二关：元素选择器 bento bento元素 select the bento plate 第三关：ID选择器 #fancy id为fancy的元素 select the fancy plate 第四关：后代选择器 plate apple plate祖先元素下的后代元素apple select the apple on the plate 第五关：结合后代和ID选择器 #f
CSS 选择器练习网站 CSS Diner
weixin_30800807的博客
05-16 626
http://flukeout.github.io/ 转载于:https://www.cnblogs.com/mkl7/p/10875514.html
CSS Diner游戏
weixin_43152725的博客
12-20 3087
答案： 1. plate 元素选择器 2. bento 元素选择器 3. #fancy ID选择器 4. plate &amp;gt; apple 后代元素选择器 5. #fancy pickle ID选择器 后代选择器 6. .small 类选择器 7. orange.small 元素选择器 类选择器 8. bento orange.small 后代选择器 符...
Css Diner攻略答案，不唯一
热门推荐
qq_33275405的博客
11-15 1万+
01. plate02. bento 03. #fancy 04. plate apple 05. #fancy pickle 06. apple.small 07. orange.small 08. bento orange.small 09. plate , bento 10. * 11. plate * 12. plate + apple 13.
30分钟从零开始入门拿下 HTML
Y_1215的博客
08-27 1039
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
html文本文字中保留空格和换行
qq_41985405的博客
08-26 285
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
你没有使用过（但应该使用）的前 5 个 HTML 功能
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
08-26 535
TML 已经有了很大的发展，这些特性展示了它已经变得多么强大和灵活。通过将这些鲜为人知的元素合并到你的项目中，你可以创建响应速度更快、动态更动态且用户友好的网页，同时减少对外部库和框架的依赖。因此，请尝试这些 HTML 功能 — 你可能会惊讶于它们可以在多大程度上增强你的开发过程。
html快速入门
m0_52049533的博客
08-22 705
/
深入源码，洞察迭代 8 年的 html 文本转换库
易迟的专栏
08-26 728
在前面RAG 项目结构化文件解析方案比较文章中对常见的 html 解析方案进行了比较，发现 html_text + python-readability 可以实现高质量的 html 内容提取。在前一篇文章迭代 14 年的高质量 html 提取方案中对 python-readability 库进行了介绍，这篇文章就对剩下的html_text库进行介绍。忽略内联样式、javascript、注释和其他用户通常不可见的文本；空白内容标准化，在内联元素周围添加空格分隔内容；
java一键生成数据库说明文档html格式
无极低码
08-26 382
要验收项目了，要写数据库文档，一大堆表太费劲了，直接生成一个吧，本来想用个别人的轮子，网上看了几个，感觉效果不怎么好，自己动手写一个吧。抽空再把字典表补充进去就OK了先看效果：目录快速导航生成效果。
Java学习Day33：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 955
JS语句;
Html 添加音效音乐音频播放和震动效果
最新发布
虎康的博客
08-29 87
此处如果表示音乐导入失败，可以使用 import 进行导入使用。点击指定点播放音乐，再次点击则停止音乐.给页面添加背景音乐和震动效果。
HTML实现俄罗斯方块
m0_65134936的博客
08-21 938
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
2301_78945238的博客
08-26 500
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
java 使用 aws s3 sdk 通过分段下载来实现 html 页面 video 的断点播放、拖动进度播放
heshiyuan1406146854的博客
08-26 306
【代码】java 使用 aws s3 sdk 通过分段下载来实现 html 页面 video 的断点播放、拖动进度播放。
【HTML】模拟二级菜单【附源代码】
Young_Pro的博客
08-25 922
通过 Html 搭配 CSS 模拟二级菜单的实现
Java学习Day33：HTML 第五章：沙门村（vue）
weixin_51721783的博客
08-26 878
(一) Vue 简介🔰Vue 是渐进式JavaScript框架。🔰官网文档：https://v2.cn.vuejs.org/v2/guide/🔰Vue是基于MVVM模式实现的一套框架（把页面分成Model、View 、ViewModel 三部分）。🔰MVVM的工作原理：当数据源发生变化时，会被ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model 数据源中。
html 基础标签
qq_65307874的博客
08-26 290
百度</a>-- 跳转本页面的 该id处 做锚点使用 --><a href="#s666">锚点666
HTML详解
2301_78319341的博客
08-23 1032
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言，它通过标签来定义网页的内容和结构。HTML中的标签非常丰富，涵盖了从文档结构、文本格式化、链接与图片、列表、表格、表单到多媒体等各个方面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值