首頁 > 開發者 > 網站開發

HTML CSS + DIV實現整體布局

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

HTML CSS + DIV實現整體布局

1、技術目標：

  • 開發符合W3C標準的Web頁面
  • 理解盒子模型
  • 實現DIV+CSS整體布局

2、什麼是W3C標準？

W3C：World Wide Web Consortium，全球資訊網聯盟
W3C的職能：負責制定和維護Web行業標準
W3C標準包括一系列的標準：

  • HTML內容方面：XHTML
  • 樣式美化方面：CSS
  • 結構文檔訪問方面：DOM
  • 頁面互動方面：ECMAScript
  • ……等等

3、W3C倡導的Web結構要符合以下要求：

  • XHTML負責內容組織
  • CSS負責頁面樣式

4、符合W3C規範頁面的結構：

Html代碼  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.     <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <metahttp-equiv="Content-Type"content="text/html;
  6.                 charset=gb2312"/>
  7.         <title>無標題文檔</title>
  8.     </head>
  9.     <body>
  10.             ......頁面內容部分
  11.     </body>
  12.     </html>

[html] view plain copy

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.     <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html;
  6.                 charset=gb2312" />
  7.         <title>無標題文檔</title>
  8.     </head>
  9.     <body>
  10.             ......頁面內容部分
  11.     </body>
  12.     </html>

5、XHTML基本規範

  1. 標籤名和屬性名稱必須小寫
  2. HTML標籤必須關閉
  3. 屬性值必須用引號括起來
  4. 標籤必須正確嵌套
  5. 文檔必須擁有一個根項目，所有的XHTML元素必須嵌套於<html>根項目中
  6. 屬性不能簡寫，如：

<input checked="checked" />
<input readonly="readonly" />
<option selected="selected" />

6、頁面開發需要注意的地方：

  • 不要使用淘汰的標籤：<b>、<font>、<marquee>等，可參考官方文檔(http://www.w3c.org)
  • < img />標籤的alt屬性：為圖片增加alt屬性
  • 樣式和內容分離：將樣式和結構分離，不使用行類樣式
  • 表單的name和id：表單及表單元素要求設定name和id屬性
  • 使用CSS + DIV布局
  • 頁面的瀏覽器安全色性

7、為什麼需要盒子模型？

網頁可以看成由一個個"盒子"組成，

由可以看出，頁面分為上(網站導航)、中、下(著作權聲明)三個部分，
中間部分又分為左(商品分類)、中(主要部分)、右，這些版塊就像一個個
的盒子，這些"盒子"中放置著各種內容，頁面就是由這些"盒子"拼湊起來

8、盒子模型的相關屬性

  • margin（外邊距/邊界）
  • border（邊框）
  • padding（內邊距/填充 ）

我們看圖理解一下各屬性作用：

以上屬性又分為上、右、下、左四個方向

問題：頁面元素的寬度width、高度height如何計算？
答案：元素的實際佔位尺寸 = 元素尺寸 + padding + 邊框寬度
比如：元素實際佔位高度 = height屬性 + 上下padding + 上下邊框寬度

9、盒模型的層次關係

我們通過一個經典的盒模型3D立體結構圖來理解，

從上往下看，層次關係如下：

第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)

從這個層次關係中可以看出，當同時設定背景圖和背景色時，背景
圖將在背景色的上方顯示

10、margin外邊距

可統一設定或四邊分開設定，

具體的設定可查看CSS協助文檔(頁面下方提供下載)

11、水平置中和垂直置中

水平置中包含兩種情況：
區塊層級元素的水平置中：margin:0px auto;
文字內容的水平置中：text-align: center;

垂直置中：
常見的單行文字的垂直置中可設定文字所在行的height與
行高樣式屬性一致，比如：
div{
width: 400px;
height: 400px;
line-height: 400px;/*行高與div高度一致*/
}

12、案例的首頁布局分析

 

只保留DIV的布局分析：

13、首頁布局CSS + DIV程式碼分析

HTML結構代碼：
<div id="Container">
<div id="header">頂部（header）</div>
<div id="main">主體部分（main）</div>
<div id="footer">底部（footer）</div>
</div>

CSS樣式代碼：
/*主面板樣式*/
#container {
width:980px;
margin:0px auto;/*主面板DIV置中*/
}
/*頂部面板樣式*/
#header {
width:100%;
height:150px;
border:1px #F00 solid;
}
/*中間部分面板樣式*/
#main {
width:100%;
height:400px;
border:1px #F00 solid;
}
/*底部面板樣式*/
#footer {
width:100%;
height:100px;
border:1px #F00 solid;
}

14、為什麼需要float浮動屬性？

我們來看看：

問題：如何讓商品分類DIV、內容DIV和右側DIV並排放置？
答案：使用float(浮動)樣式

15、浮動屬性

理解浮動屬性首先要搞清楚，什麼是文檔流？
文檔流：瀏覽器根據元素在html文檔中出現的順序，
從左向右，從上到下依次排列

浮動屬性是CSS中的定位屬性，用法如下：
float: 浮動方向(left、right、none);

left為左浮動、right為右浮動、none是預設值表示不浮動
，設定元素的浮動，該元素將脫離文檔流，向左或向右移動
直到它的外邊距碰到父元素的邊框或另一個浮動元素的邊
框為止

浮動樣本，沒有使用浮動的3個DIV：
HTML結構代碼：
<div id="first">第1塊div</div>
<div id="second">第2塊div</div>
<div id="third">第3塊div</div>

CSS樣式代碼：
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}

執行效果

樣式中加入 float:left;
執行效果

你再修改為 float: right試試右浮動是什麼效果

16、讓商品分類DIV、內容DIV和右側DIV並排放置

HTML結構代碼：

Java代碼  
  1. <div id="container">
  2.     <div id="header">頂部（header）</div>
  3.     <div id="main">
  4.         <div class="cat">商品分類(cat)</div>
  5.         <div class="content">內容(content)</div>
  6.         <div class="sidebar">右側(sidebar)</div>
  7.     </div>
  8.     <div id="footer">底部（footer）</div>
  9. </div>

[java] view plain copy

 

  1. <div id="container">
  2.     <div id="header">頂部（header）</div>
  3.     <div id="main">
  4.         <div class="cat">商品分類(cat)</div>
  5.         <div class="content">內容(content)</div>
  6.         <div class="sidebar">右側(sidebar)</div>
  7.     </div>
  8.     <div id="footer">底部（footer）</div>
  9. </div>

CSS樣式代碼(在第13節CSS代碼基礎上加入)：

.cat, .sidebar {
float:left;
width:20%;
height:100%;
}
.content {
float:left;
width:60%;
height:100%;
}

17、clear清除

clear只對區塊層級元素有效，表示如果前一個元素存在左浮動或右浮動，則換行
clear屬性的取值：rigth、left、both、none

18、總結

    • 盒子模型有哪些屬性？各屬性又分別包含哪些屬性？
    • float屬性的應用場合？有哪些取值？   
    • clear屬性的應用場合？有哪些取值？

HTML CSS + DIV實現整體布局

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More