| 标题 | HTML表格布局实例讲解 |
| 内容 | HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素 <div> 或 表格（<table>）来布局 Web 页面的内容。 使用表格进行布局，是一种较老的布局解决方案。并不推荐使用，我们应该总是使用表格来显示表格化的数据。 HTML 文档 CSS Code 1.<!DOCTYPE html> 2.<html lang="en"> 3.<head> 4. <meta charset="UTF-8"> 5. <!-- 链接到外部样式表 --> 6. <link rel="stylesheet" href="css/mystyle.css"> 7. <title>Island estaurant</title> 8.</head> 9.<body> 10. <table id="container"> 11. <!-- 头部 --> 12. <tr> 13. <td id="header" colspan="2"> 14. <h1>点菜系统</h1> 15. </td> 16. </tr> 17. <!-- 主体 --> 18. <tr> 19. <!-- 菜单 --> 20. <td id="menu"> 21. <b>菜品</b><br> 22. <div id="dishes"> 23. 小鸡炖蘑菇<br> 24. 家常豆腐<br> 25. 酸辣土豆丝<br> 26. </div> 27. </td> 28. <!-- 内容 --> 29. <td id="content"> 30. 小鸡炖蘑菇：<br> 31. 幼鸡一只 32. </td> 33. </tr> 34. <!-- 尾部 --> 35. <tr> 36. <td id="footer" colspan="2">世俗孤岛的餐厅</td> 37. </tr> 38. </table> 39.</body> 40.</html> 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.} |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。