用HTML編寫迪士尼樂園頁面

来源:https://www.cnblogs.com/yangkaiming/archive/2018/04/22/8908379.html
-Advertisement-
Play Games

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/r ...


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/disini.css"/>
</head>
<body>
<div class="disini">
    <!--頭部-->
    <header>
        <nav>
            <a href="#"><i class="aa"></i>首頁</a>
            <a href="#"><i class="bb"></i>商店</a>
            <a href="#"><i class="cc"></i>樂園</a>
            <img src="../images/b_logo.png" alt=""/>
            <a href="#"><i class="dd"></i>影視</a>
            <a href="#"><i class="ee"></i>數位</a>
            <a href="#"><i class="ff"></i>會員</a>
        </nav>
    </header>
    <img src="../images/160216172223655101.jpg" alt=""/>
    <!--img,figcaption是figure的子級-->
    <div>
        <h1 class="red">明星</h1>
        <figure class="yes"><img src="../images/151209173849244246.jpg" alt=""/>
            <figcaption>米老鼠和他的朋友們</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151209173747572402.jpg" alt=""/>
            <figcaption>迪士尼公主</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185638114248.jpg" alt=""/>
            <figcaption>賽車總動員</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185656630780.jpg" alt=""/>
            <figcaption>小公主蘇菲亞</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185733287815.jpg" alt=""/>
            <figcaption>冰雪奇緣</figcaption>
        </figure>
        <figure class="yes"><img src="../images/151130185754146838.jpg" alt=""/>
            <figcaption>星球大戰</figcaption>
        </figure>
    </div>
    <!--img,figcaption是figure的子級-->
    <div class="blue">
        <h1>商店</h1>
        <img class="yellow" src="../images/160322141822716049.jpg" alt=""/>
        <figure ><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
        <figure><img class="green" src="../images/161124154351492230.jpg" alt=""/>
            <figcaption></figcaption>
        </figure>
    </div>
    <!--div迪士尼資訊-->
    <div class="ll">
        <h1>迪士尼資訊</h1>
    </div>
    <div  class="end">
        <div class="op">
            <div>
                <img class="ab" src="../images/160113121641905797.jpg" alt=""/>
            </div>
            <div class="cd">
                <h1>上海迪士尼樂園開園在即！</h1>
                <a href="">自2016年6月16日起，你將可以探索一個前所未有的神奇世界，每個人都能在這裡點亮心中奇夢。<i></i></a>
            </div>
        </div>
        <div class="op">
            <div>
                <div class="op" >
                    <div> <img about="ef" src="../images/160321105131828720.jpg" alt=""/></div>
                    <div class="gh"><h1><strong>《瘋狂動物城》票房突破10億人名幣！</strong></h1>
                        <a href="">《瘋狂動物城》上映16日登頂中國動物賣座第一，併成為史上首部破10億動畫片<i></i></a>
                    </div>
                </div>
                <div class="mn">
                    <div><img class="ef" src="../images/160225171114064621.jpg" alt=""/></div>
                    <div class="gh">
                        <h1><strong>全球首座迪士尼音樂報時鐘樓正式落成</strong></h1>
                        <a href="">迪士尼鐘樓將與迪士尼旗艦店一起為上海帶來一份奇妙而夢幻的娛樂購物體驗。<i></i></a>
                    </div>
                </div>
            </div>
            <div class="op" >
                <div class="op"><img class="ef" src="../images/160229155948703765.jpg" alt=""/></div>
                <div class="mm" >
                    <h1><strong>《頭腦特工隊》獲得第88屆奧斯卡最佳動畫長片</strong></h1>
                    <a href="">皮克斯《頭腦特工隊》獲得88屆奧斯卡最佳動畫長片！實至名歸.<i></i></a>
                </div>
            </div>
        </div>
    </div>
   <!--頁腳-->
    <div>
        <footer>
            <div class="" >
                <div class="hh"><img src="../images/b_logo.png" alt=""/></div>
                <div>
                    <div class="oo">
                        <figure><img src="../images/weibo.jpg" alt=""/>
                            <figcaption>關註我們的微博</figcaption>
                        </figure>
                    </div>
                    <div class="oo"> <figure><img src="../images/weibo.jpg" alt=""/>
                        <figcaption>關註我們的微信</figcaption>
                    </figure>
                    </div>
                </div>
            </div>
            <div class="yy">
                <div class="tt">
                <a href=""><strong>關於我們</strong></a>
                <a href=""><strong>加入我們</strong></a>
                <a href=""><strong>法律條規</strong></a>
                <a href=""><strong>隱私政策</strong></a>
                <a href=""><strong>退換貨政策</strong></a>
                </div>
                <p>Disney!Pixar All rights reserved.備案號：瀘B2-20040339-3</p>
             </div>
        </footer>
    </div>

</div>

</body>
</html>

以下是css
.disini{
    width: 1200px;
    height: 4000px;
    margin: 0 auto;
    border: 1px solid gray;
}
header{
    text-align: center;
    background-color: #ffffff;
}
nav>a{
    display:inline-block;
    width: 14.28%;
    color: black;
}
.aa{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
}
header{
    margin-bottom: 20px;
}
nav>a:hover{
    color: red;
}
.aa:hover{
    background-position:-21px 0 ;
}
.bb{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
    background-position: 0 -20px;
}
.bb:hover{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url("../images/icon.png");
    background-position: -22px -20px;
}
.cc{
    display: inline-block;
    width: 21px;
    height: 23px;
    background-image: url("../images/icon.png");
    background-position: 0 -42px;
}
.cc:hover{
    display: inline-block;
    width: 21px;
    height: 23px;
    background-image: url("../images/icon.png");
    background-position: -22px -42px;
}
.dd{
    display: inline-block;
    width: 21px;
    height: 18px;
    background-image: url("../images/icon.png");
    background-position: 0 -64px;
}
.dd:hover{
    display: inline-block;
    width: 21px;
    height: 18px;
    background-image: url("../images/icon.png");
    background-position: -22px -64px;
}
.ee{
    display: inline-block;
    width: 13px;
    height: 22px;
    background-image: url("../images/icon.png");
    background-position: 0 -82px;
}
.ee:hover{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: -22px -82px;
}
.ff{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: 0 -102px;
}
.ff:hover{
    display: inline-block;
    width: 21px;
    height: 17px;
    background-image: url("../images/icon.png");
    background-position: -22px -102px;
}

/*div明星*/
.red{
    text-align: center;
    font-size: 40px;
    margin-top: 56px;
    margin-bottom: 42px;
}
figure>img{
    width: 114px;
}
.yes{
    margin:0 40px ;
    float: left;
}
/*div 商店*/
.blue>h1{
    text-align: center;
    font-size: 40px;
    margin-top: 60px;
    margin-bottom:38px ;
}
.yellow{
    width:600px ;
    height: 520px;
    float: left;
}
.green {
    width: 300px;
    height: 260px;
    float: left;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    border-left:  1px solid gray;
    box-sizing: border-box;
}
/*迪士尼資訊*/
.ll>h1{
    text-align: center;
    margin-top: 60px;
    margin-bottom:42px ;
    font-size: 40px;
}

.end a{
    color: gray;
    font-size: 14px;
}
.ab{
    width: 600px;
    height:480px ;
}
.cd{
    width: 600px;
    height: 300px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    border-right:  1px solid gray;
    box-sizing: border-box;
}
.ef{
    width: 300px;
    height: 300px;
}
.gh{
    width: 299px;
    height: 180px;
    border-left:  1px solid gray;
    box-sizing: border-box;
}

.op{
    float: left;

}
.mn{
    float: right;
}
.mm{
    width: 300px;
    height: 300px;
    float: left;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray ;
    box-sizing: border-box;
}
.cd>h1{
    font-size: 30px;
    margin:44px 200px 30px 40px  ;
}
.cd>a{
    margin: 0 50px;
}
.end i{
    display: inline-block;
    width:14px;
    height: 14px;
    background-image: url("../images/icon.png");
    background-position: -49px -102px;
}

/*頁腳*/
.hh{
    height: 80px;
    float: left;
    padding-right:30px ;
    margin-left:400px ;
    margin-top: 110px;
    border-right: 1px solid gray;
}
.oo{
    float: left;
    margin-top: 110px;
    margin-right: 34px;
    margin-left: 68px;
}
footer{
    margin-top: 90px;
}
.hh>figure{
    margin-right: 68px;
    margin-left:78px ;
}

.tt{
    text-align: center;
    border-top: 1px solid gray;
    padding-top: 20px;

}
p{
    color: gray;
    font-size: 10px;
    text-align: center;
}
.yy{
    float: right;
    margin-right: 300px;
    margin-top: 30px;

}
.yy a{
    font-size: 18px;
    color: black;
    margin-right:40px ;
    text-decoration: none;
}



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 翻譯：XtraDB/InnoDB中的AUTO_INCREMENT處理方式(已提交到MariaDB官方手冊)
    本文為mariadb官方手冊：XtraDB/InnoDB中的AUTO_INCREMENT處理方式的譯文。 原文：https://mariadb.com/kb/en/auto_increment-handling-in-xtradbinnodb/ 我提交到MariaDB官方手冊的譯文：https:// ...
  • Android external擴展工程
    Android的擴展工程包含在external文件夾中，這是一些經過修改後適應Android系統的開源工程，這些工程有些在主機上運行，有些在目標機上運行； （主機）ext2文件系統生成工具 ...
  • LruCache的緩存策略
    一、Android中的緩存策略 一般來說，緩存策略主要包含緩存的添加、獲取和刪除這三類操作。如何添加和獲取緩存這個比較好理解，那麼為什麼還要刪除緩存呢？這是因為不管是記憶體緩存還是硬碟緩存，它們的緩存大小都是有限的。當緩存滿了之後，再想其添加緩存，這個時候就需要刪除一些舊的緩存並添加新的緩存。 因此L ...
  • 安卓開發：四種對話框
    先展示一下四種對話框的效果圖： 普通對話框 單選對話框： 多選對話框： 進度條對話框： 一個簡單的佈局，放四個按鈕： 四種對話框： ...
  • iOS中圖片拉伸，類似Android中的點9圖片
    UIImage* img=[UIImage imageNamed:@"name.png"];//原圖 UIEdgeInsets edge=UIEdgeInsetsMake(0, 10, 0,10); //UIImageResizingModeStretch：拉伸模式，通過拉伸UIEdgeInsets... ...
  • h5仿微信聊天(高仿版)、微信聊天表情|對話框|編輯器
    之前做過一版h5微信聊天移動端，這段時間閑來無事就整理了下之前項目，又重新在原先的那版基礎上升級了下，如是就有了現在的h5仿微信聊天高仿版，新增了微聊、通訊錄、探索、我四個模塊 左右觸摸滑屏切換，聊天頁面優化了多圖預覽、視頻播放，長按菜單UI，聊天底部編輯器重新優化整理(新增多表情)，彈窗則用到了自 ...
  • CSS3自定義字體
    原文摘自：https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html 總節： 1） 定義字體標準格式： 2）字體轉換網址： http://www.freefontconverter.com/https://everythingfo ...
  • WebStorm配置node.js調試
    最近因為工作關係，一直在做node.js的開發，學習了koa框架，orm框架sequelize，以及swagger文檔的配置。但是，最近因為swagger文檔使用了es6的修飾器那麼個東西(在java中被稱作註解)，所以，node.js無法編譯項目，所以就需要使用babel對es6進行轉換。因為這篇 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類