PHP.3-DIV+CSS標準網頁布局準備工作（上）

標籤：分行符號   需要   jsb   nts   dom   div+css   優點   ref   style   

DIV+CSS標準網頁布局準備工作（上）

概述

 

使用“DIV+CSS”對網站進行布局符合W3C標準，採用這種方式布局通常是為了說明與HTML表格定位方式的區別。因為現在的網站設計標準中，已經不再使用表格定位技術，而是採用DIV+CSS的方式實現各種定位。通過使用div盒子模型結構將各部分內容劃分到不同的區塊，然後用css來定義盒子模型的位置、大小、邊框、內外邊距、相片順序等。簡單地說，div用於搭建網站結構（架構）、css用於建立網站表現（樣式/美化）。該標準簡化了HTML頁面代碼，獲得一個較優秀的網站結構，有利於日後網站維護、協同工作和便於搜尋引擎抓取。當然並不是所有的網頁都需要用div布局，例如資料頁面、報表之類的頁面，還是使用HTML的表格會比較方便，web標準裡並沒有說要拋棄table。 【w3C：http://baike.baidu.com/view/459077.htm】

 

網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括物件模型（如W3C DOM）、ECMAScript等

 

DIV+CSS標準的優點

·變現和內容分離

·代碼簡潔，提高頁面瀏覽速度

·易於維護和改版，降低維護成本

·提高搜尋引擎對網面的索引效率

 

布局網站注意的問題

各個瀏覽器之間的差異，就算在不同的瀏覽器中效果不完全一至，也要做到大概一至

安裝多種瀏覽器，對比差異進行調試，主要分為微軟（IE）與非微軟（firefox）。

對於不同的IE版本，可以通過安裝ietester【ie瀏覽器多版本測試載入器】，進行測試

Firefox瀏覽器：在firefox中安裝Firebug【組件，用於調試頁面】。Firebug 為你的 Firefox 整合了瀏覽網頁的同時隨手可得的豐富開發工具。你可以對任何網頁的 CSS、HTML 和 JavaScript 進行即時編輯、調試和監控

 

 

“無意義”的元素div和span 

 

HTML只是賦予內容的手段，大部分HTML標籤都有其意義（例如，標籤p建立段落，h1標籤建立標題等等）的，然而div和span標籤似乎沒有任何內容上的意義，聽起來就像一個泡沫做成的鎚子一樣無用。但實際上，與CSS結合起來後，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標籤。它們的存在純粹是應用樣式，所以當樣式表失效時它就沒有任何的作用它們被用來組合成一大塊的HTML代碼並賦予一定的資訊，大部分用類屬性class和識別屬性id與元素聯絡起來。span和div的不同之處在於span是內聯的，用在一小塊的內聯HTML中。而div（division）元素是塊級的（簡單地說，它等同於其前後有斷行），用於組合一大塊的代碼，為HTML文檔內大塊的內容提供結構和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便於建立不同整合的類。div的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

 

盒子模型

 

每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子裡面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）【外邊距】。

 

 

布局中的主要樣式

 

?font?line-height?color?margin?padding?border?text-align?background?width:?height?float:?clear?display

 

定位屬性 

屬 性	描 述
Position	用於定義一個元素是否absolute（絕對），relative（相對），static（靜態），或者fixed（固定）
Top	層距離頂點縱座標的距離
Left	層距離頂點橫座標的距離
Width	層的寬度，可以用一個長度或“auto”值來指定其寬度，不允許使用負值
Height	層的高度，可以用一個長度或“auto”值來指定其高度，不允許使用負值
z-index	決定層的先後順序和覆蓋關係，值高的元素會覆蓋值比較低的元素
Display	是一個顯示內容，設定block值是以塊狀顯示，在元素後面添加分行符號，既其他元素不能在其後面並列顯示。如果設定inline值則內聯顯示，在元素後面刪除分行符號，多個元素可以在一行內並列顯示。使用值none將關閉指定元素及其子項目的顯示
Visibility	這個屬性是針對嵌套層的設定，如果存在嵌套的層（子層）和被嵌套的層（父層）時，可以使用inherit值設定子層繼承父層的可見度，如果父層可見，子層也可見。當使用visible值時，無論父層是否可見，子層都可見。而值為hidden時，無論父層是否可見，子層都隱藏
Overflow	用於設定層內的內容超出層所能容納的範圍處理方式，為該屬性設定visible值時，無論層的大小，內容都會顯示出來。當設定hidden值時，會隱藏超出層大小的內容。當設定值為scroll時，不管內容是否超出層的範圍，選中此項都會為層添加捲軸。而值使用auto值時，只在內容超出層的範圍時才顯示捲軸

 

 

PHP.3-DIV+CSS標準網頁布局準備工作（上）