欢迎与我联系 　　

弹性盒子异形布局 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="container">
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">五一</div>
						<img src="https://picsum.photos/400/600.webp?r=1" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">劳动节</div>
						<img src="https://picsum.photos/400/400.webp?r=01" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">五一</div>
						<img src="https://picsum.photos/400/400?r=2" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">劳动节</div>
						<img src="https://picsum.photos/400/600?r=02" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">五一</div>
						<img src="https://picsum.photos/400/400?r=3" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=03" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/600?r=4" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=04" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">五一</div>
						<img src="https://picsum.photos/400/600?r=5" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=05" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=6" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=06" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/400?r=7" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/600?r=07" alt="" />
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="content_img">
						<div class="content_tag">背景</div>
						<img src="https://picsum.photos/400/600?r=8" alt="" />
					</div>
					<div class="content_img">
						<div class="content_tag">五一</div>
						<img src="https://picsum.photos/400/400?r=08" alt="" />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

　　

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	width: 90%;
	margin: 2em auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.column {
	flex: 1 1 0;
	display: flex;
	align-items: center;

}

.content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.content img {
	width: 100%;
	box-shadow: 0 0 3px #fff;
	border-radius: 5px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.content img:hover {
	transform: scale(1.1);
	/* 鼠标悬停时放大1.1倍 */
}

.content_img {
	position: relative;
}

.content_tag {
	position: absolute;
	right: 6px;
	top: 6px;
	background: linear-gradient(128deg, #ff5b15, #ff5967);
	color: #fff;
	border-radius: 2px 10px;
	padding: 0 6px;
	height: 20px;
	font-size: 12px;
	display: flex;
	align-items: center;
	z-index: 1;
	cursor: pointer;
}

　　

 

posted @ 2024-04-14 12:47  小珍珠在河里敲代码  阅读(30)  评论(0)    收藏  举报