写一个html程序和一个css程序完成显示六张图片和他们的文字介绍
HTML程序：
<!DOCTYPE html>
<html>
<head>
<title>图片展示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>图片展示</h1>
<div class="image-container">
<div class="image-box">
<img src="https://picsum.photos/id/1/300/200" alt="图片1">
<p>这是图片1的介绍</p>
</div>
<div class="image-box">
<img src="https://picsum.photos/id/2/300/200" alt="图片2">
<p>这是图片2的介绍</p>
</div>
<div class="image-box">
<img src="https://picsum.photos/id/3/300/200" alt="图片3">
<p>这是图片3的介绍</p>
</div>
<div class="image-box">
<img src="https://picsum.photos/id/4/300/200" alt="图片4">
<p>这是图片4的介绍</p>
</div>
<div class="image-box">
<img src="https://picsum.photos/id/5/300/200" alt="图片5">
<p>这是图片5的介绍</p>
</div>
<div class="image-box">
<img src="https://picsum.photos/id/6/300/200" alt="图片6">
<p>这是图片6的介绍</p>
</div>
</div>
</body>
</html>
CSS程序：
h1 {
text-align: center;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-box {
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
text-align: center;
}
.image-box img {
margin-bottom: 10px;
}
.image-box p {
font-size: 14px;
line-height: 1.5;
}
说明：
-
首先，HTML程序中包含了一个标题和一个div元素，用于包含六张图片和它们的文字介绍。
-
我们使用了CSS来布局和样式化这些元素。
-
在CSS中，我们使用了flexbox布局来实现图片的自适应排列，并使用了margin、border和padding来美化图片盒子的外观。
-
我们还使用了font-size和line-height属性来设置图片介绍文本的字体大小和行高，以使其易于阅读
原文地址: https://www.cveoy.top/t/topic/fuXj 著作权归作者所有。请勿转载和采集!