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迪士尼网页实现代码的更多相关文章

  1. 用Android属性动画实现和演示迪士尼动画基本原则

    本文将介绍在Android平台上实现和演示迪士尼动画基本准则. 项目开源,GitHub: https://github.com/vhow/animation 说明: 演示动画原则的想法源自 Anima ...

  2. 迪士尼黑科技：爬墙机器人 VertiGo

    12 月 30 日,迪士尼研发出的一款爬墙机器人曝光了一段有趣的视频.从视频里可看出这个机器人碰到墙壁时迅速地作出反应爬了上去. 据了解,这个爬墙机器人名叫 VertiGo,由迪士尼研究中心和苏黎世联 ...

  3. 用HTML编写迪士尼乐园页面

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head lang="e ...

  4. 杂项-公司-百科：华特·迪士尼-un

    ylbtech-杂项-公司-百科:华特·迪士尼 华特·迪士尼(Walt Disney,全名Walter Elias Disney,又译沃尔特·迪士尼,1901年12月5日—1966年12月15日),出 ...

  5. HK游记 Day2迪斯尼(下）

    接下来我们要去看狮子王庆典,绕啊绕啊,终于进场了,说实话我对一大帮人扮演动物歌舞表演不是很感冒,静倒是觉得很好看,印象最深的是狮子王的主题曲,还有大象车,长颈鹿车,狮子王车,静举着手机拍视频. 看完表 ...

  6. php正则获取网页标题、关键字、网页描述代码

    php正则获取网页关键字,代码如下: function get_keywords($html) { $html=strtolower($html); preg_match("@<hea ...

  7. Html网页的代码

    Html网页的代码 很全哦 1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写 ...

  8. 网页HTML代码在线运行器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

随机推荐

  1. ecmall 入口文件解析 引入了什么

    每一个框架都有自动载入的工具库,搜了半天也没搜到相关介绍,就自己看入口文件琢磨了一下, <?php define('ROOT_PATH', dirname(__FILE__)); //定义项目根 ...

  2. HTML/overflow的认识

    1.overflow的定义:overflow属性规定当内容溢出元素框时应该做的处理.2.overflow:scorll; 是提供一种滚动的机制.3.关于overflow的其他相关值设置:

  3. C高级第二次作业

    PTA作业第一部分 6-7 删除字符串中数字字符(10 分) 删除一个字符串中的所有数字字符. 函数接口定义: void delnum(char *s); 其中 s是用户传入的参数. 函数的功能是删除 ...

  4. vim中将小写替换为大写--快速解决变量名风格

    将C语言的下划线分割快速替换为Java的驼峰方式. 命令如下 :%s/_\([a-zA-Z]\)/\U\1/g 参考文档

  5. BZOJ - 3170： 松鼠聚会 （切比雪夫转曼哈顿距离）

    pro:  有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离.0&l ...

  6. 一个页面从输入url到加载完成的过程都发生了什么，请详细说明

    1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作 3.在发送http请求前,需要域名解析(DN ...

  7. 常见模块(一) time/datetime

    1 time模块 1)时间三种格式的转化 2)time模块的相关方法 time.time()  打印当前时间的时间戳 单位是秒 距离1970年1月1日到当前的时间差 time.sleep(n)     ...

  8. 第三章泛型集合ArrayList 和Hashtable

    第三章泛型集集合 ArrayList 变量名 = new ArrayList();  //相当与一个容器 他的执行using 是  using System.Collections; 变量名.ADD( ...

  9. Python开发 基礎知識 3.類別&方法 (bool & str) (未完待續)

    類別 可使用type()查看 內建 [ 布爾:bool (Boolen) 字串:str (String) 數字:int (Integer) 小數:float 列表:list 元祖:tuple 字典:d ...

  10. cpgf如何实现lua script binding的？

    Lib: https://github.com/cpgf/cpgf/tree/master 代码 以下是operator的实现函数 int UserData_operator(lua_State * ...