首页第一行有5列，均匀排布5块深绿色区域，中间部分分为两列，左半边又分为三行，第一行为黄色，第二行左白右黑，第三行红色，右半边分为两行，第一行浅绿，第二行浅蓝。最后一行

第一行有5列，均匀排布5块深绿色区域，中间部分分为两列，左半边又分为三行，第一行为黄色，第二行左白右黑，第三行红色，右半边分为两行，第一行浅绿，第二行浅蓝。最后一行

时间: 2024-09-11 20:04:08 浏览: 52

为了实现这样的HTML布局，我们可以结合`<table>`和`<td>`标签来创建表格，或者使用CSS Grid或Flexbox来进行定位。这里以表格为例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px; padding: 10px; } .green-blocks { background-color: darkgreen; } .yellow-row td { background-color: yellow; } .black-and-white td:nth-child(even) { background-color: white; } .black-and-white td:nth-child(odd) { background-color: black; } .red-row td { background-color: red; } .left-column { grid-column: 1 / span 2; } .light-colors { background-color: lightgreen; background-color: lightblue; } /* 右侧第二行的顺序可能会因为浏览器差异略有不同 */ .right-column .row2 { grid-column: span 2; } </style> </head> <body> <div class="grid-container">  <div class="green-blocks green-blocks" style="width: 100%; height: 100px;"></div>  <div></div>  <div class="left-column">  <table> <tr class="yellow-row"> <td style="height: 100px;"></td> </tr>  <tr class="black-and-white"> <td></td> <td></td> </tr>  <tr class="red-row"> <td style="height: 100px;"></td> </tr> </table> </div>  <div>  <div class="row1 light-colors"></div>  <div class="row2 light-colors"></div> </div>  <div class="last-row" style="background-color: your-specific-color;"> 这是最后一行... </div> </div> </body> </html> ```

阅读全文