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)