DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 使用DIV解決固定寬度布局問題(2)
使用DIV解決固定寬度布局問題(2)
編輯：CSS詳解     

下面的XHtml標記生成圖A所示的頁面。（出於簡單考慮，內容被截短。）

  1. <body> 
  2. <DIVidDIVid="head"> 
  3. <h1>header</h1> 
  4. </DIV> 
  5. <DIVidDIVid="columns"> 
  6. <DIVidDIVid="side1"> 
  7. <h3>side1</h3> 
  8. <ul> 
  9. <li>Letmenottothemarriageoftrueminds</li> 
  10. <li>Admitimpediments;loveisnotlove</li> 
  11. <li>Whichalterswhenitalterationfinds</li> 
  12. <li>Orbendswiththeremovertoremove</li> 
  13. <li>Oh,no,itisaneverfixedmark</li> 
  14. </ul> 
  15. </DIV> 
  16. <DIVidDIVid="content"> 
  17. <h2>maincontent</h2> 
  18. <p>Thatlooksontempests...hisheightbetaken.</p> 
  19. <p>Butbearsitout...alterationfinds.</p> 
  20. <p>Whoseworth'sunknown,...theremovertoremove.</p> 
  21. </DIV> 
  22. <DIVidDIVid="side2"> 
  23. <h3>side2</h3> 
  24. <ul> 
  25. <li>Letmenottothemarriageoftrueminds</li> 
  26. <li>Admitimpediments;loveisnotlove</li> 
  27. <li>Whichalterswhenitalterationfinds</li> 
  28. </ul> 
  29. </DIV> 
  30. </DIV> 
  31. <DIVidDIVid="foot"> 
  32. <h3>footer</h3> 
  33. <p>Orbendswith...heightbetaken.</p> 
  34. </DIV> 
  35. </body> 
  36.

下面是將頁面設計為固定寬度布局的CSS代碼。

  1. body{  
  2. font-family:Verdana,Arial,Helvetica,sans-serif;  
  3. font-size:12px;  
  4. margin:0px;  
  5. padding:0px;  
  6. }  
  7. h2,h3{  
  8. margin-top:0px;  
  9. padding-top:0px;  
  10. }  
  11. DIV#head{  
  12. position:absolute;  
  13. width:750px;  
  14. height:100px;  
  15. left:0px;  
  16. top:0px;  
  17. background-color:#FFFF66;  
  18. }  
  19. DIV#columns{  
  20. position:relative;  
  21. width:750px;  
  22. top:100px;  
  23. background-color:#CCCCCC;  
  24. }  
  25. DIV#side1{  
  26. position:absolute;  
  27. width:150px;  
  28. top:0px;  
  29. left:0px;  
  30. background-color:#FF6666;  
  31. }  
  32. DIV#content{  
  33. position:relative;  
  34. width:450px;  
  35. top:0px;  
  36. left:150px;  
  37. background-color:#999999;  
  38. }  
  39. DIV#side2{  
  40. position:absolute;  
  41. width:150px;  
  42. top:0px;  
  43. left:600px;  
  44. background-color:#00FF66;  
  45. }  
  46. DIV#foot{  
  47. position:relative;  
  48. width:750px;  
  49. clear:both;  
  50. margin-top:100px;  
  51. background-color:#99FFFF;  
  52. }  
  53.

CSS詳解
DIV CSS網頁布局開發參考規范(1)
你對DIV CSS網頁布局開發參考規范是否熟悉，這裡和大家分享一下，本規范既是一個開發規范，也是一
CSS語法手冊（二）文本屬性
 1、letter-spacing功能：控制文本元素字母間的間距，所設置的距離適用於整個
DIV+CSS中border和clear屬性用法剖析(2)
clear屬性◆另一個要說明的就是clear:both，表示清除左、右所有的浮動，在接下來的布局中

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS選擇器性能 電腦技術：CSS中的背景部分編程學習教程 關於浏覽器文字選中顏色 “自動定位”的應用 用 CSS 隱藏頁面元素的 5 種方法 CSS樣式實時切換技巧剖析 DIV+CSS網頁布局中CSS無效的原因揭秘 字符顏色顯示變化(動畫效果啊) 狀態欄中顯示頁面載入進度 DIV+CSS中padding和margin屬性用法
熱門推薦
CSS padding用法詳解 DIV＋CSS設計IE6、IE7、Firefox兼容性(1) 浮動元素對浏覽器的支持 CSS3 Transform的perspective屬性 學習筆記 如何解決IE6 position:fixed固定定位問題 CSS的優化寫法與手寫技巧 DIV+CSS技術是否適合中國中小網站(1) 主流浏覽器CSS 3和HTML 5兼容清單(2) CSS學習筆記:任意大小圖片是自適應居中
大家都在看
10.5 延遲時間transition-delay JavaScript中的Math.SQRT1_2屬性使用簡介 JavaScript對象的property屬性詳解 JS聲明變量背後的編譯原理剖析 HTML Table 空白單元格補全的簡單實現 javascript實現俄羅斯方塊游戲的思路和方法 [js]一個獲取頁面ip的正則 6.2 創建節點
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved