首页用html5做几个盒子

用html5做几个盒子

时间: 2023-09-18 22:06:38 浏览: 76

好的，这里是一个简单的HTML5代码示例，用于创建三个带有不同背景颜色的盒子： ```html <!DOCTYPE html> <html> <head> <title>HTML5盒子示例</title> <style> .box { height: 100px; width: 100px; margin: 10px; float: left; text-align: center; line-height: 100px; font-size: 24px; color: #fff; border-radius: 5px; } .box1 { background-color: #f00; } .box2 { background-color: #0f0; } .box3 { background-color: #00f; } </style> </head> <body> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </body> </html> ``` 在这个示例中，我们创建了一个名为“box”的CSS类，它定义了一个100像素高、100像素宽、带有边框半径的文本中心化盒子。然后，我们创建了三个不同的“box” div元素，并为它们设置了不同的背景颜色。最后，通过float属性将它们放在一行中。你可以根据自己的需要进行修改和添加，如更改颜色、大小、形状等等。

阅读全文