首页html+css江西包括图片家乡介绍

html+css江西包括图片家乡介绍

时间: 2023-10-21 17:04:00 浏览: 231

以下是一个简单的 HTML+CSS 代码示例，用于展示江西家乡介绍和图片： ```html <!DOCTYPE html> <html> <head> <title>江西家乡介绍</title> <style> body { margin: 0; padding: 0; } .header { background-color: #1E90FF; color: white; padding: 20px; text-align: center; } .content { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .card { background-color: #f7f7f7; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin-bottom: 20px; width: 30%; } .card img { display: block; height: 200px; margin: 0 auto; object-fit: cover; width: 100%; } .card h2 { font-size: 24px; margin-top: 10px; text-align: center; } .card p { font-size: 16px; margin: 10px; text-align: justify; } </style> </head> <body> <header class="header"> <h1>江西家乡介绍</h1> </header> <div class="content"> <div class="card"> <img src="image1.jpg" alt="景点1"> <h2>景点1</h2> <p>这里是景点1的介绍文字，可以写一些相关的历史、文化或者地理信息。</p> </div> <div class="card"> <img src="image2.jpg" alt="景点2"> <h2>景点2</h2> <p>这里是景点2的介绍文字，可以写一些相关的历史、文化或者地理信息。</p> </div> <div class="card"> <img src="image3.jpg" alt="景点3"> <h2>景点3</h2> <p>这里是景点3的介绍文字，可以写一些相关的历史、文化或者地理信息。</p> </div> </div> </body> </html> ``` 你需要将上述代码保存为一个 HTML 文件，并将图片文件与 HTML 文件放在同一目录下，然后在浏览器中打开该 HTML 文件即可看到效果。当然，你需要将 `image1.jpg`、`image2.jpg` 和 `image3.jpg` 替换成你自己的图片文件名。

阅读全文