首页用xhtml画一个可以放 2*4 8个圆角小正方形图片有上下左右边距，图形之间上下左右有间距代码

用xhtml画一个可以放 2*4 8个圆角小正方形图片有上下左右边距，图形之间上下左右有间距代码

时间: 2024-12-19 13:24:47 浏览: 12

要使用XHTML和CSS创建一个包含2行4列、每个单元格都是带圆角的小正方形图片，同时设置上下左右的边距以及相邻单元格之间的间距，你可以这样做： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; /* 设置相邻单元格间的间距 */ margin: 20px; /* 设置整体容器的边距 */ } .square { width: 50px; height: 50px; border-radius: 10px; /* 圆角 */ background-size: cover; /* 图片填充整个单元格 */ } </style> </head> <body> <div class="container">   <img class="square" src="image1.jpg"> <img class="square" src="image2.jpg">  </div> </body> </html> ``` 在这个例子中，`.container` 是一个网格布局容器，`.square` 是每个单元格的样式。你需要替换 `src` 属性为你的图片路径，并按照需要添加更多的 `<img>` 标签。

阅读全文