HTML5-03 頁面佈局

時間 2019-12-09

標籤 html5 html 頁面佈局欄目 HTML5 简体版

原文原文鏈接

概述

HTML 文檔中的元素是一個接着一個排列的，只是簡單地在在塊級元素的先後加上拆行，是一種流水佈局。可是，咱們所見到的 Web 頁面按照必定的規則佈局排版的（一般是多列的），因此就要藉助必定的方法來實現這種佈局，一般的解決方案是：使用區塊元素 <div> 或 表格（<table>）來佈局 Web 頁面的內容。

表格實現佈局

概述css

使用表格進行佈局，是一種較老的佈局解決方案。並不推薦使用，咱們應該老是使用表格來顯示錶格化的數據。

示例

HTML 文檔html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="css/mystyle.css">
    <title>Island estaurant</title>
</head>
<body>
    <table id="container">
        <!-- 頭部 -->
        <tr>
            <td id="header" colspan="2">
                <h1>點菜系統</h1>
            </td>
        </tr>
        <!-- 主體 -->
        <tr>
            <!-- 菜單 -->
            <td id="menu">
                <b>菜品</b><br>
                <div id="dishes">
                    小雞燉蘑菇<br>
                    家常豆腐<br>
                    酸辣土豆絲<br>
                </div>
            </td>
            <!-- 內容 -->
            <td id="content">
                小雞燉蘑菇：<br>
                幼雞一隻
            </td>
        </tr>
        <!-- 尾部 -->
        <tr>
            <td id="footer" colspan="2">世俗孤島的餐廳</td>
        </tr>
    </table>
</body>
</html>

CSS 文件編程

/*整個點餐系統的界面*/
#container
{
    width: 600px;
    margin: 100px;
    /*取消單元格邊框之間的邊距*/
    border-spacing: 0;
}
/*點餐系統界面的頭部*/
#header
{
    background-color: red;
    text-align: center;
}
h1
{
    margin-bottom: 0px;
}
/*點餐系統界面的菜單*/
#menu
{
    background-color: #FFD700;
    height: 200px;
    width: 150px;
}
#dishes
{
    padding-top: 10px;
    padding-left: 10px;
    line-height: 20px;
}
/*點餐系統界面的菜品詳情*/
#content
{
    background-color: gray;
    height: 200px;
    width: 450px;
}
/*點餐系統界面的尾部*/
#footer
{
    background-color: blue;
    height: 25px;
    text-align: center;
}

效果圖佈局

<div> 元素實現佈局

概述spa

<div> 元素是一個塊級元素，一個 HTML 元素容器，其自己並無任何意義。一般與 CSS 協做來實現 Web 頁面佈局方案。是一種較 表格佈局 更新的佈局解決方案。

示例（實現表格佈局實現的效果）

內容
- 使用 <div> 元素來佈局一個簡單的點餐系統界面

代碼

HTML 文檔code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="css/mystyle.css">
    <title>Island estaurant</title>
</head>
<body>
    <!-- 基於 div 的佈局 -->
    <div id="container">
        <!-- 頭部 -->
        <div id="header">
            <h1>點菜系統</h1>
        </div>
        <!-- 菜單 -->
        <div id="menu">
            <b>菜品</b><br>
            <div id="dishes">
                小雞燉蘑菇<br>
                家常豆腐<br>
                酸辣土豆絲<br>
            </div>
        </div>
        <!-- 內容 -->
        <div id="content">
                小雞燉蘑菇：<br>
                幼雞一隻
        </div>
        <!-- 尾部 -->
        <div id="footer">
            世俗孤島的餐廳
        </div>
    </div>
</body>
</html>

CSS 文件htm

/*整個點餐系統的界面*/
#container
{
    width: 600px;
    margin: 100px;
}
/*點餐系統界面的頭部*/
#header
{
    background-color: red;
    text-align: center;
}
h1
{
    margin-bottom: 0px;
}
/*點餐系統界面的菜單*/
#menu
{
    background-color: #FFD700;
    height: 200px;
    width: 150px;
    float: left;
}
#dishes
{
    padding-top: 10px;
    padding-left: 10px;
    line-height: 20px;
}
/*點餐系統界面的菜品詳情*/
#content
{
    background-color: gray;
    height: 200px;
    width: 450px;
    float: left;
}
/*點餐系統界面的尾部*/
#footer
{
    background-color: blue;
    height: 25px;
    text-align: center;
    clear: both;
}

領悟

由上述的兩個示例，咱們能夠看到，儘管使用不一樣的方案實現相同的佈局效果，可是其 CSS 文件幾乎是沒有變化的。這是爲何呢？顯然，咱們會發現，兩個示例中的元素的標示 id 是沒有變化的，這已足以解釋緣由。但願同窗們都能體會到這一點。

關於 CSS 與 HTML 分離的一點見解

寫在前面blog

不知道同窗們，是如何看待編程的，也不知道你們是否喜歡當前從事的這個職業。我的以爲，編程不只僅是個人工做，它是個人生活，更是個人人生。我習慣用生活中的一些思惟去面對編程中遇到的一些東西，去體會它的發展。我喜歡跟着本身的思惟去創造和諧優雅的東西，一點點變換和固化本身的思惟，並全身心的享受這個過程。下面談談我對 CSS 與 HTML 分離的理解。

CSS 與 HTML 協做的前世此生
- 階段一
  - 最開始的 Web 頁面是沒有花哨的樣式的，只有簡單的文本。也就不用經過 CSS 來設置元素的樣式。
- 階段二
  - 後來逐漸出現了具有簡單樣式的 Web 頁面。可是咱們知道 HTML 元素，只具有語意，不會指定元素的內容顯示的樣式。在這種狀況下，就要使用 CSS 來指定元素的樣式。
  - 因爲此時的 Web 頁面一般是比較簡單的，順應時勢，元素樣式的定義以元素的屬性（style）的形式出如今了元素的開標籤中。
- 階段三
  - 可是人們逐漸地發現，將元素樣式放到元素的開標籤中，HTML 文檔會變得雜亂無章，且難以維護。此時就誕生了一種解決方案，即將這些定義元素樣式的代碼統一的放在 HTML 文檔的頭部。這只是一張過渡的解決方案。
  - 你們都知道，新事物的產生，必然會引起一系列的問題。此時咱們面臨的問題是：如何去找到咱們要設置樣式的元素呢？如下是該問題的解決方案，即便用 CSS 選擇器。
    - 使用元素標籤來選擇元素，只是用於簡單的頁面。
    - 咱們會發現元素標籤沒法去區分全部的元素，好比說：一個 HTML 文檔中一般會有不少 <p> 元素。這就產生了 id 和 class 連個屬性。顧名思義，class 用來標示一類元素，這類元素具備相同的樣式；而 id 用來標示一個元素，id 意味着是惟一的。
    - 隨着 Web 頁面複雜度的增長，也逐漸出現了一些更加複雜的選擇器（組合選擇符）。好比說：後代選取器、子元素選擇器、相鄰兄弟選擇器、普通相鄰兄弟選擇器
- 當前階段
  - 隨着 Web 項目的功能愈來愈複雜，爲了縮短開發週期，縮減維護成本，逐漸地將 CSS 從 HTML 文檔中分離出來，放到單獨的文件中。這就是咱們目前一般採用的方式。

關於ci

關於其中涉及到的知識，會在後面的博客中逐漸涉及到。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。