html使用css制作图片库

63次阅读
没有评论

要制作CSS图片库,我们需要使用HTML中的列表元素(ul)和列表项元素(li),并将它们组合在一起以形成一个网格布局。我们还需要使用CSS来设置网格中的图片大小、间距和样式,以使其看起来更好。

下面是一个HTML页面的完整示例,其中包含一个带有CSS图片库的网格布局。该网格包括六个图像,每个图像都有一个标题。当用户将鼠标悬停在图像上时,图像将变暗。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS图片库</title>
	<style>
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20px;
		}
		
		li {
			position: relative;
		}
		
		img {
			display: block;
			max-width: 100%;
			height: auto;
			transition: filter 0.5s ease;
		}
		
		li:hover img {
			filter: brightness(80%);
		}
		
		figcaption {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 10px;
			margin: 0;
			opacity: 0;
			transition: opacity 0.5s ease;
		}
		
		li:hover figcaption {
			opacity: 1;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<img src="image1.jpg" alt="图片1">
			<figcaption>图片1</figcaption>
		</li>
		<li>
			<img src="image2.jpg" alt="图片2">
			<figcaption>图片2</figcaption>
		</li>
		<li>
			<img src="image3.jpg" alt="图片3">
			<figcaption>图片3</figcaption>
		</li>
		<li>
			<img src="image4.jpg" alt="图片4">
			<figcaption>图片4</figcaption>
		</li>
		<li>
			<img src="image5.jpg" alt="图片5">
			<figcaption>图片5</figcaption>
		</li>
		<li>
			<img src="image6.jpg" alt="图片6">
			<figcaption>图片6</figcaption>
		</li>
	</ul>
</body>
</html>

在上面的示例中,我们创建了一个ul元素,并将其样式设置为具有网格布局和间距的列表。每个列表项(li)包含一个图像和一个标题(figcaption)。我们还设置了CSS,以使图像在用户将鼠标悬停在上面时变暗,并显示标题。

在CSS中,我们定义了以下样式:

  • ul元素:将列表样式设置为无,将边距和填充设置为0,并将其显示设置为grid,以使其成为一个网格布局。我们使用grid-template-columns属性来定义列数和大小,并使用grid-gap属性来定义单元格之间的间距。
    • li元素:将其位置设置为相对,以使figcaption元素相对于其进行定位。
    • img元素:将其显示设置为块,并使用max-width属性和height属性来控制其大小。我们还使用transition属性定义了一个过渡效果,以使图像在用户将鼠标悬停在上面时平滑地变暗。
    • li:hover img:在用户将鼠标悬停在图像上时,我们使用filter属性将图像的亮度降低为80%。
    • figcaption元素:将其位置设置为绝对,并将其相对于其父元素(li)进行定位。我们使用background-color属性设置其背景颜色,并使用opacity属性设置其初始透明度为0。我们还使用transition属性定义了一个过渡效果,以使其在用户将鼠标悬停在图像上时平滑地显示。
    • li:hover figcaption:在用户将鼠标悬停在图像上时,我们将其透明度设置为1,使其显示出来。

    通过以上样式设置,我们可以创建一个具有美观效果的CSS图片库。

正文完
 
评论(没有评论)