css布局显示有一个相册-html代码-BFW代码库

代码语言：html

代码描述：css布局显示有一个相册

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");

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

body {
	background: #1d3557;
	font-family: "Roboto", sans-serif;
	height: 100vh;
	display: flex;
}

ul {
	list-style: none;
}

.hero-container {
	background: #fff;
	width: 800px;
	max-height: 100%;
	margin: auto;
	border-radius: 10px;
	display: flex;
	position: relative;
}

.navbar-container {
	width: 90px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.navbar__items-list {
	height: 370px;
	border-right: 1px solid #dedede;
	margin-top: 30px;
}

.navbar__item {
	display: flex;
	align-items: center;
	width: 90px;
	padding: 0 30px;
	margin: 30px 0;
}

.navbar__item.logo {
	fill: #6d8df0;
	margin-top: 0;
	margin-bottom: 60px;
}

.navbar__item:hover:not(.logo) svg {
	fill: #6d8df0;
}

.navbar__item a:focus svg {
	fill: #6d8df0;
}

.navbar__item:hover:not(.logo) {
	border-right: 3px solid #6d8df0;
}

.navbar__item:not(.logo) svg {
	fill: #dedede;
}

.navbar__user-avatar img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: 2px solid #6d8df0;
	margin: 30px;
	position: absolute;
	bottom: 0;
}

.content-container {
	height: 100%;
	width: 100%;
	padding: 30px 40px;
}

.content__image-count {
	color: #bfbfbf;
	font-weight: 500;
}

.content__album-header {
	margin: 30px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content__album-title {
	font-size: 3rem;
}

.content__more-btn {
	cursor: pointer;
	color: #6d8df0;
	background: #fff;
	padding: 10px 40px;
	border: 1px solid #6d8df0;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease-in-out;
}

.content__more-btn:hover {
	box-shadow: inset 0 0 0 1px #6d8df0;
}

.content__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
}

.grid-photo {
	width: 100%;
	height: 200px;
	position: relative;
}

.overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
	opacity: 0;
	background: rgba(0, 0, 0, 0.6);
	transition: 0.5s ease;
}

.grid-photo:hover .overlay {
	opacity: 1;
}

.overlay svg {
	fill: #fff;
	opacity: 0.4;
	margin: 10px;
}

.overlay svg:hover {
	opacity: 1;
}

.photo-2 {
	grid-column-start: 2;
	grid-column-end: 4;
}

.grid-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.content__album-header {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.content__more-btn {
		margin-top: 10px;
	}

	.content__gallery {
		display: flex;
		flex-direction: column;
		max-height: 600px;
		overflow-y: auto;
	}
}
</style>

</head>
<body translate="no">
<body>
<div class="hero-container">
<div class="navbar-container">
<ul class="navbar__items-list">
<li class="navbar__item logo">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M3 4l9 16 9-16H3zm3.38 2h11.25L12 16 6.38 6z" />
</svg>
</li>
<li class="navbar__item">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
</a>
</li>
<li class="navbar__item">
<a href="#" class="selected">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
</svg>
</a>
</li>
<li class="navbar__item">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z" />
</svg>
</a>
</li>
<li class="navbar__item">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z" />
</svg>
</a>
</li>
</ul>
<div class="navbar__user-avatar">
<img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" alt="" />
</div>
</div>
<div class="content-container">
<p class="content__image-count">29.309 images</p>
<div class="content__album-header">
<h1 class="content__album-title">Black & White</h1>
<button class="content__more-btn"&.........完整代码请登录后点击上方下载按钮下载查看