首页设计一个主体栏有四张图片田字型排列，每张图片下有描述文字

设计一个主体栏有四张图片田字型排列，每张图片下有描述文字

时间: 2024-03-03 11:47:15 浏览: 185

好的，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <style> /* 主体栏样式 */ .main { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; } .card { background-color: #eee; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); flex-basis: calc(50% - 20px); margin-bottom: 20px; padding: 20px; text-align: center; } .card img { max-width: 100%; height: auto; margin-bottom: 10px; } .card h2 { margin-top: 0; } </style> </head> <body>  <div class="main"> <div class="card"> <img src="image1.jpg" alt="Image 1"> <h2>Image 1</h2> <p>Description of Image 1</p> </div> <div class="card"> <img src="image2.jpg" alt="Image 2"> <h2>Image 2</h2> <p>Description of Image 2</p> </div> <div class="card"> <img src="image3.jpg" alt="Image 3"> <h2>Image 3</h2> <p>Description of Image 3</p> </div> <div class="card"> <img src="image4.jpg" alt="Image 4"> <h2>Image 4</h2> <p>Description of Image 4</p> </div> </div> </body> </html> ``` 这个示例中，主体栏采用了 flexbox 布局，并使用了 `justify-content: center;` 来将四张图片居中排列。每个卡片包含一张图片、一个标题和描述文字。您可以将示例代码中的图片和文字替换为您自己的内容。

阅读全文