首页h5 布局正确居中上部分色块大小及背景色正确左部分色块大小及背景色正确右部分色块大小及背景色正确左右色块之间的间距设置正确上下色块与主题之间的间距及其对应属性书写正确下部分色块大小及背景色正确

h5 布局正确居中上部分色块大小及背景色正确左部分色块大小及背景色正确右部分色块大小及背景色正确左右色块之间的间距设置正确上下色块与主题之间的间距及其对应属性书写正确下部分色块大小及背景色正确

时间: 2024-01-21 21:17:13 浏览: 100

以下是一个基本的居中布局的HTML代码示例，你可以根据需要修改和调整样式： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> /* 设置整个页面的背景色 */ body { background-color: #f4f4f4; } /* 设置主题部分的样式 */ .theme { background-color: #fff; width: 800px; margin: 20px auto; padding: 20px; } /* 设置左侧色块的样式 */ .left { background-color: #ffcc66; width: 200px; height: 200px; margin-right: 20px; float: left; } /* 设置右侧色块的样式 */ .right { background-color: #66ccff; width: 200px; height: 200px; margin-left: 20px; float: right; } /* 清除浮动 */ .clearfix::after { content: ""; display: table; clear: both; } /* 设置下部分色块的样式 */ .bottom { background-color: #99cc99; width: 800px; height: 100px; margin: 20px auto; } </style> </head> <body> <div class="theme">  <div class="left"></div>  <div class="right"></div>  <div class="clearfix"></div> </div>  <div class="bottom"></div> </body> </html> ``` 在这个示例中，我们使用了 `margin: 0 auto;` 的方式将主题部分水平居中，使用了浮动的方式将左右两个色块分别放置在主题部分的左侧和右侧，使用 `clearfix` 类清除浮动，保证主题部分的高度能够被正确计算，最后使用 `margin` 控制上下色块与主题部分之间的间距。

阅读全文