HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素
|
14. 点菜系统15. |
|
|
21. 菜品 22. 23. 小鸡炖蘑菇 24. 家常豆腐 25. 酸辣土豆丝 26. 27. |
30. 小鸡炖蘑菇： 31. 幼鸡一只 32. |
| 世俗孤岛的餐厅 | |
39.
40.
41.
CSS 文件
CSS Code
1./*整个点餐系统的界面*/
2.#container
3.{
4. width: 600px;
5. margin: 100px;
6. /*取消单元格边框之间的边距*/
7. border-spacing: 0;
8.}
9./*点餐系统界面的头部*/
10.#header
11.{
12. background-color: red;
13. text-align: center;
14.}
15.h1
16.{
17. margin-bottom: 0px;
18.}
19./*点餐系统界面的菜单*/
20.#menu
21.{
22. background-color: #FFD700;
23. height: 200px;
24. width: 150px;
25.}
26.#dishes
27.{
28. padding-top: 10px;
29. padding-left: 10px;
30. line-height: 20px;
31.}
32./*点餐系统界面的菜品详情*/
33.#content
34.{
35. background-color: gray;
36. height: 200px;
37. width: 450px;
38.}
39./*点餐系统界面的尾部*/
40.#footer
41.{
42. background-color: blue;
43. height: 25px;
44. text-align: center;
45.}