首页1、index图宽：1000px；高：370px；背景颜色：#ccc; 2、页面中每张图片宽：235px; 高：300px; 3、要求四张平铺在一起图片在页面居中显示

1、index图宽：1000px；高：370px；背景颜色：#ccc; 2、页面中每张图片宽：235px; 高：300px; 3、要求四张平铺在一起图片在页面居中显示

时间: 2025-01-05 13:42:00 浏览: 8

为了满足您的需求，我们可以使用HTML和CSS来实现。以下是一个示例代码，展示如何创建一个宽1000px、高370px、背景颜色为#ccc的容器，并在其中居中显示四张宽235px、高300px的图片。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片居中显示</title> <style> .container { width: 1000px; height: 370px; background-color: #ccc; display: flex; justify-content: center; align-items: center; } .image { width: 235px; height: 300px; margin: 0 5px; } </style> </head> <body> <div class="container"> <img src="image1.jpg" alt="Image 1" class="image"> <img src="image2.jpg" alt="Image 2" class="image"> <img src="image3.jpg" alt="Image 3" class="image"> <img src="image4.jpg" alt="Image 4" class="image"> </div> </body> </html> ``` 在这个示例中： 1. `.container` 类定义了宽1000px、高370px的容器，并设置了背景颜色为#ccc。 2. 使用 `display: flex` 布局，将图片水平居中显示。 3. `.image` 类定义了每张图片的宽235px、高300px，并通过 `margin` 属性在图片之间添加了一些间距。这样，四张图片将在页面中居中显示。

阅读全文