HTML CSS + DIV實現整體布局

1、技術目標：

開發(fā)符合W3C標準的Web頁面

理解盒子模型

實現DIV+CSS整體布局

2、什么是W3C標準？

W3C：World Wide Web Consortium，萬維網聯盟

W3C的職能：負責制定和維護Web行業(yè)標準

W3C標準包括一系列的標準：

HTML內容方面：XHTML

樣式美化方面：CSS

結構文檔訪問方面：DOM

頁面交互方面：ECMAScript

……等等

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

XHTML負責內容組織

CSS負責頁面樣式

4、符合W3C規(guī)范頁面的結構：

Html代碼??

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

charset=gb2312"/>

無標題文檔

......頁面內容部分

html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

charset=gb2312"?/>

無標題文檔

......頁面內容部分

5、XHTML基本規(guī)范

標簽名和屬性名稱必須小寫

HTML標簽必須關閉

屬性值必須用引號括起來

標簽必須正確嵌套

文檔必須擁有一個根元素，所有的XHTML元素必須嵌套于根元素中

屬性不能簡寫，如：

6、頁面開發(fā)需要注意的地方：

不要使用淘汰的標簽：、、等，可參考官方文檔(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外邊距

可統(tǒng)一設置或四邊分開設置，如圖：

???

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

11、水平居中和垂直居中

水平居中包含兩種情況：

塊級元素的水平居中：margin:0px auto;

文字內容的水平居中：text-align: center;

垂直居中：

常見的單行文字的垂直居中可設置文字所在行的height與

行高樣式屬性一致，比如：

div{

width: 400px;

height: 400px;

line-height: 400px;/*行高與div高度一致*/

}

12、案例的首頁布局分析

只保留DIV的布局分析：

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

HTML結構代碼：

頂部(header)主體部分(main)底部(footer)

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結構代碼：

第1塊div第2塊div第3塊div

CSS樣式代碼：

#first, #second, #third{

width:100px;

height:50px;

border:1px #333 solid;

margin:5px;

}

執(zhí)行效果如圖：

樣式中加入 float:left;

執(zhí)行效果如圖：

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

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

HTML結構代碼：

Java代碼??

頂部(header)商品分類(cat)內容(content)右側(sidebar)底部(footer)頂部(header)商品分類(cat)內容(content)右側(sidebar)底部(footer)

CSS樣式代碼(在第13節(jié)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屬性的應用場合？有哪些取值？

總結

以上是生活随笔為你收集整理的创建一个水平盒子java_盒子模型理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。