HTML报表合理布局案例解读

HTML 文本文档中的元素是1个接着1个排序的，只是简易地在在块级元素的前后左右再加拆行，是1种流水合理布局。可是，大家所见到的 Web 网页页面依照1定的标准合理布局排版的（一般是两列的），因此就要依靠1定的方式来完成这类合理布局，一般的处理计划方案是：应用区块元素 <div> 或 报表（<table>）来合理布局 Web 网页页面的內容。

应用报表开展合理布局，是1种较老的合理布局处理计划方案。其实不强烈推荐应用，大家应当一直应用报表来显示信息报表化的数据信息。

HTML 文本文档

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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.                 幼鸡1只   
  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. }  

实际效果图：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。