CSS div 網頁排版教學 -「三欄式版型」

woff

HTML 網頁如下：

1. <div id="WRAPPER"> <!--最外層包裝 -->
   
2. 
   
3. <div id="HEADER">....</div> <!--頁首 -->
   
4. 
   
5. <div id="MAIN_NAV">....</div> <!--主選單 -->
   
6. 
   
7. <div id="SUB_NAV_1">....</div> <!--次選單 1 -->
   
8. 
   
9. <div id="SUB_NAV_2">....</div> <!--次選單 2 -->
   
10. 
    
11. <div id="CONTENT">....</div> <!--內容區 -->
    
12. 
    
13. <div id="FOOTER"> ...</div> <!--頁尾 -->
    
14. 
    
15. </div> <!--最外層包裝 結尾-->
    

複製代碼

CSS 語法如下：

1. 
   
2. body, div, h1, h2, h3, h4, p, ul, li {
   
3. margin:0;
   
4. padding:0;
   
5. }
   
6. body {
   
7. background-color: #666666;
   
8. }
   
9. /*---- 最外層包裝 ----*/
   
10. #WRAPPER {
    
11. width: 800px;
    
12. margin:0 auto;
    
13. padding:0 10px;
    
14. background-image: url(images/outer_bg.gif);
    
15. }
    
16. /*---- 頁首 ----*/
    
17. #HEADER {
    
18. background-color: #FFFFFF;
    
19. }
    
20. #HEADER h1 a {
    
21. text-indent: -9999px;
    
22. display: block;
    
23. width: 800px;
    
24. height: 200px;
    
25. background-image: url(images/header.gif);
    
26. }
    
27. /*---- 主選單 ----*/
    
28. #MAIN_NAV {
    
29. background-color: #000000;
    
30. overflow:auto;
    
31. width: 800px;
    
32. }
    
33. #MAIN_NAV ul {
    
34. list-style-type:none;
    
35. }
    
36. #MAIN_NAV li {
    
37. float: left;
    
38. }
    
39. #MAIN_NAV li a {
    
40. display: block;
    
41. padding: 5px 10px 5px 10px;
    
42. background-color: #000000;
    
43. color: #FFFFFF;
    
44. font-weight: bold;
    
45. font-family: Arial;
    
46. font-size: 12px;
    
47. text-decoration: none;
    
48. border-right:1px solid #FFFFFF;
    
49. }
    
50. #MAIN_NAV li a:hover {
    
51. background-color: #FFFFFF;
    
52. color: #000000;
    
53. }
    
54. /*---- 次選單 1 ----*/
    
55. #SUB_NAV_1{clear: both; float:left; width:150px;}
    
56. #SUB_NAV_1 a{ color:#6699FF;}
    
57. #SUB_NAV_1 a:hover{ color:#FF0000;}
    
58. #SUB_NAV_1 p,#SUB_NAV_1 h2{ text-align:center; padding:5px 10px;}
    
59. 
    
60. /*---- 次選單 2 ----*/
    
61. #SUB_NAV_2{ float:right; width:150px;}
    
62. #SUB_NAV_2 a{ color:#6699FF;}
    
63. #SUB_NAV_2 a:hover{ color:#FF0000;}
    
64. #SUB_NAV_2 p,#SUB_NAV_2 h2{ text-align:center; padding:5px 10px;}
    
65. 
    
66. 
    
67. /*---- 內容區 ----*/
    
68. #CONTENT {
    
69. background-color: #EEE;
    
70. margin-left:150px;
    
71. margin-right:150px;
    
72. }
    
73. #CONTENT h2, #CONTENT h4, #CONTENT p {
    
74. padding:6px 20px 6px 20px;
    
75. font-size:12px;
    
76. }
    
77. #CONTENT h2 {
    
78. font-family: Arial;
    
79. font-size: 24px;
    
80. text-align: center;
    
81. padding-top: 10px;
    
82. background-color:#666;
    
83. color:#FFF;
    
84. letter-spacing:10px;
    
85. border-top:2px #999 solid;
    
86. }
    
87. /*---- 頁尾 ----*/
    
88. #FOOTER {
    
89. clear: both;
    
90. background-color: #000000;
    
91. }
    
92. #FOOTER h2, #FOOTER p {
    
93. font-size: 12px;
    
94. padding:5px 20px;
    
95. font-family: Arial;
    
96. color: #FFFFFF;
    
97. }
    
98. .clearfloat {
    
99. clear:both;
    
100. height:0;
     
101. font-size: 1px;
     
102. line-height: 0px;
     
103. }

複製代碼