首页网页中如何将四张图片（图片长宽相同）添加黑色边框，并从左到右并列紧密排开，并给每张图片下备注文字（给文字添加超链接）

网页中如何将四张图片（图片长宽相同）添加黑色边框，并从左到右并列紧密排开，并给每张图片下备注文字（给文字添加超链接）

时间: 2024-09-24 20:29:31 浏览: 30

要在网页中将四张图片添加黑色边框，并从左到右并列紧密排开，同时给每张图片下备注文字（给文字添加超链接），可以使用HTML和CSS来实现。以下是一个示例代码： ### HTML部分： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片展示</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="image-container"> <div class="image-box"> <img src="image1.jpg" alt="图片1" class="image-border"> <p><a href="https://example.com/1">这是图片1的备注</a></p> </div> <div class="image-box"> <img src="image2.jpg" alt="图片2" class="image-border"> <p><a href="https://example.com/2">这是图片2的备注</a></p> </div> <div class="image-box"> <img src="image3.jpg" alt="图片3" class="image-border"> <p><a href="https://example.com/3">这是图片3的备注</a></p> </div> <div class="image-box"> <img src="image4.jpg" alt="图片4" class="image-border"> <p><a href="https://example.com/4">这是图片4的备注</a></p> </div> </div> </body> </html> ``` ### CSS部分（styles.css）： ```css body { font-family: Arial, sans-serif; } .image-container { display: flex; justify-content: left; gap: 10px; /* 调整间距 */ } .image-box { text-align: center; } .image-border { border: 2px solid black; /* 添加黑色边框 */ width: 200px; /* 设置图片宽度 */ height: auto; /* 高度自适应 */ } p { margin: 5px 0; /* 调整文字与图片之间的间距 */ } ``` 在这个示例中： 1. `.image-container`使用`display: flex;`来让图片从左到右排列。 2. `.image-border`类为图片添加了黑色边框。 3. 每张图片下面的`<p>`标签包含一个超链接，通过`<a>`标签实现。