PHP.5-DIV+CSS布局網站首頁執行個體

標籤：##   不同   ext   功能表列   邊框   str   指定   圖片   margin   

DIV+CSS布局網站首頁執行個體

網站頁面配置

http://www.sj33.cn/digital/wyll/201501/42379.html【頁頭、頁尾、側邊欄和內容地區】

#避免各瀏覽器對CSS的解析差異，需對其進行測試

 

不同瀏覽器的區別【http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html】

 

1、IE和FF置中不一樣

 

text-align:center  #包中所有文本置中

 

2、IE指定的最小高度為18px，FF都可以

定義小於18px的，預設18px

3、IE會自動調整塊高度，而FF不會，指定多高就是多高【高度不隨內容高度增高而增高】

 

 

#把原背景高度去掉

 

 

4、FF如果使用浮動則是正常的顯示，脫離文字資料流 5、IE和FF在列表不區別

內外邊距清零，無需列表（清除樣式）

6、H不一樣 7、Border IE=內容+框，FF邊框另算 

 

執行個體實現

#命名需遵循命名規範

0、定義檔案

在css檔案中定義實現各功能的不同的樣式【解析度設定：1024*768px】

 

1、初步編輯【定義標籤、主體（分布）、css】｛瀏覽器差異問題1：置中｝

id:只調用一次的時候使用，調用多次的時候使用類

#定義類（nav），分割條

clear:both;   //清除浮動區塊     overflow:hidden;  //超出部分隱藏

 

2、頁頭、菜單

#header分為三部分logo、banner（廣告位：動圖等）、tool（快捷操作）【全部脫離文字資料流進行操作，頁面可更美觀】｛瀏覽器差異問題2、3、4｝

float:脫離文字資料流操作   #margin-left:10px  //浮動框右邊留10px空位

 

 

#menu功能表列｛瀏覽器差異問題5｝

 

3、主體（body）

先分成左右兩邊，中間為廣告位，欄目塊為圖片【選項高度以圖片高度為準】

#瀏覽器差異問題6

#

##IE與Firefox的邊界界定有幾個像素差異

#!important   #優先順序，為Firefox等瀏覽器優先識別標誌

 

4、內容地區

#通常為列表，在content裡面

###成果展示

 

遺留問題：

當content定義高度時，在IE中則會頁面被撐大疊加

##暫時解決方案：content不設高度

 

PHP.5-DIV+CSS布局網站首頁執行個體