3個簡單的頁面布局示例

本文內容：

　　1.利用HTML5及float布局

　　2.利用inline block布局

　　3.利用CSS表格（table）布局

---

 

                  示例代碼 -1 (利用HTML5標簽及浮動布局)

1. <style>
2. header nav ul {
3. margin:15px;
4. list-style: none;
5. height:50px;
6. }
8. header nav ul li {
9. font-size:1.5em;
10. color: coral;
11. margin:10px;
12. float: left;
13. }
15. header nav ul li a {
16. text-decoration: none;
17. }
19. aside {
20. margin-right:50px;
21. float: left;
22. width:200px;
23. }
25. aside ul {
26. list-style: none;
27. }
29. article {
30. float: left;
31. }
33. footer {
34. font-family:Arial;
35. clear: both;
36. text-align: center;
37. }
38. </style>
39. <!--定義頁眉-->
40. <header>
41. <nav>
42. <ul>
43. <li><ahref="#">主鏈接一</a></li>
44. <li><ahref="JavaScript:void (0)">主鏈接二</a></li>
45. <li><aonclick="return false"href="index.html">主鏈接三</a></li>
46. </ul>
47. </nav>
48. </header>
49. <hr/>
52. <!--定義左邊側欄導航-->
53. <aside>
54. <ul>
55. <li>左側導航欄鏈接1</li>
56. <li>左側導航欄鏈接2</li>
57. </ul>
58. </aside>
60. <!--定義右邊內容顯示區-->
61. <article>
62. <section>
63. <h2>主題內容標題1</h2>
64. <p>
65. ......
66. </p>
67. </section>
68. <section>
69. <h2>主題內容標題2</h2>
70. <p>
71. .......
72. </p>
73. </section>
74. <section>
75. <h2>主題內容標題3</h2>
76. <p>
77. .......
78. </p>
79. </section>
80. </article>
82. <!--定義頁腳-->
83. <footer>
84. <hr/>
85. <!--footer的樣式設置為clear:both,以便使其始終居於底部，並占滿整行。-->
86. &copy;Jener_Yan <spanid="DateSpan"></span>
87. </footer>
88. <script>
89. /*獲取當前年份*/
90. var d = document.getElementById("DateSpan");
91. varNowYear=newDate();
92. d.innerHTML =NowYear.getFullYear();
94. </script>

網頁效果圖

注意點：浮動的設置

******************************************************************************************************

 

               示例代碼 -2 (利用inline block布局)

1. <style>
2. body {
3. text-align: center;
4. }
6. div {
7. display:inline-block;
8. min-height:200px;
9. padding:5px;
10. margin:0;
11. }
13. header, footer {
14. background-color: aquamarine;
15. padding:5px;
16. margin:5px;
17. }
19. main {
20. width:100%;
21. margin:0;
22. }
24. #main-l {
25. background-color: chartreuse;
26. width:20%;
27. }
29. #main-m {
30. background-color: bisque;
31. width:50%;
32. /*此處的寬度占比不取60%是因為，還得留些空間給內邊距（Padding）和外邊距（Margin）*/
33. }
35. #main-r {
36. background-color: coral;
37. width:20%;
38. }
39. </style>
41. <h2>inline block布局</h2>
42. <header>
43. header
44. </header>
45. <main>
46. <divid="main-l">左側欄寬 20%</div>
47. <divid="main-m">中部欄寬 50%</div>
48. <divid="main-r">右側欄寬 20%</div>
49. </main>
50. <footer>&copy;Jener_Yan &nbsp;<spanid="DateSpan"></span></footer>
52. <script>
53. /*獲取當前年份*/
54. var d = document.getElementById("DateSpan");
55. varNowYear=newDate();
56. d.innerHTML =NowYear.getFullYear();
58. </script>

網頁效果圖

注意點：width中對margin的預留空間。

******************************************************************************************************

               示例代碼 -3 (利用CSS表格式布局)

示例代碼

1. <style>
2. /*全局設置*/
3. div {
4. min-height:100px;
5. margin:0auto;
6. padding:6px;
7. }
9. header, footer {
10. padding:3px;
11. background-color: darkgray;
12. margin:4px0;
13. width:100%;
14. }
16. .container {
17. text-align: center;
18. }
20. .content {
21. display: table;
22. /*將div轉化為表格模式顯示*/
23. width:100%;
24. }
26. /*上部三個欄目*/
27. .upContent {
28. display: table-row;
29. /*將div轉換為行顯示*/
30. }
32. .upContentL {
33. background-color:#fffefe;
34. width:20%;
35. display: table-cell;
36. /*將div轉化為單元格顯示*/
37. }
39. .upContentM {
40. background-color: aqua;
41. width:60%;
42. display: table-cell;
43. }
45. .upContentR {
46. display: table-cell;
47. background-color: skyblue;
48. width:20%;
49. }
51. /*下部兩個欄目*/
52. .downContent {
53. display: table-row;
54. width:100%;
55. }
57. .downContentL {
58. background-color: aquamarine;
59. display: table-cell;
60. width:30%;
61. }
63. .downContentR {
64. background-color: lightcyan;
65. width:70%;
66. display: table-cell;
67. }
68. </style>
69. <divclass="container">
70. <h2>
71. CSS表格式布局
72. </h2>
73. <header>
74. header
75. </header>
76. <divclass="content">
77. <divclass="upContent">
78. <divclass="upContentL">上部左欄 20%</div>
79. <divclass="upContentM">上部中欄 60%</div>
80. <divclass="upContentR">上部右欄 20%</div>
81. </div>
82. </div>
83. <divclass="content">
84. <divclass="downContent">
85. <divclass="downContentL">下部左欄 20%</div>
86. <divclass="downContentR">下部右欄 80%</div>
87. </div>
88. </div>
89. <footer>&copy;Jener_Yan &nbsp;<spanid="DateSpan"></span></footer>
90. </div>
91. <script>
92. var date =newDate();
93. document.getElementById("DateSpan").innerHTML = date.getFullYear();
95. </script>

網頁效果圖

注意點：采用表格式布局注意顯示（display）屬性值的設置，table → table-row → table-cell 

來自為知筆記(Wiz)