CSS - 圖片庫

歡迎，有志於網頁設計的您！今天，我們要深入探索 CSS 圖片庫的精彩世界。作為你親切友善的鄰居電腦老師，我非常高興能夠引導你走過這段旅程。讓我們把那些枯燥的靜態圖片變成引人注目的互動庫，讓你的網站閃耀！

簡單的圖片庫

我們從基礎開始。一個簡單的圖片庫就像在牆上排列照片一樣——重點在展示。以下是如何使用 CSS 創建一個圖片庫的方法：

<div class="gallery">
<img src="image1.jpg" alt="圖片 1">
<img src="image2.jpg" alt="圖片 2">
<img src="image3.jpg" alt="圖片 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

在這個例子中，我們使用 flexbox 來創建一個響應式佈局。flex-wrap: wrap 屬性確保我們的圖片會在沒有足夠空間時折行。justify-content: center 屬性則將圖片水平居中。

带有悬停效果的图库

現在，讓我們添加一些互動性！悬停效果可以使你的图库更具吸引力。就像添加了一個只有當你仔細觀察時才會出現的秘密信息。

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="圖片 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- 重複其他圖片 -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

這段 CSS 會在悬停時創建一個出現的遮罩。transition 屬性給它一個平滑的淡入效果。

使用媒体查询的响应式图库

在如今的多种设备世界，响应式設計是关键。讓我們使我们的图库适应不同的屏幕尺寸：

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

這段 CSS 使用 CSS Grid 來創建一個响应式佈局。minmax 函数確保我們的圖片至少有 200px 寬，但如果空間允許，它們可以變得更大。媒体查询会调整布局以适应小屏幕。

语法

讓我們花一會兒時間來理解我們一直在使用的语法。CSS 屬性遵循以下結構：

selector {
property: value;
}

以下是一個常用于图库的 CSS 属性表格：

属性	描述	示例
display	指定元素的显示行为	display: flex;
width	设置元素的宽度	width: 200px;
height	设置元素的高度	height: 200px;
margin	设置元素的边距	margin: 10px;
object-fit	指定图像如何调整大小	object-fit: cover;
position	指定使用的定位方法	position: relative;
opacity	设置元素的不透明度级别	opacity: 0;
transition	指定过渡效果	transition: .5s ease;

水平滚动的图库

有时，你希望你的图库水平滚动。就像一个可以滑动的照片卷：

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="圖片 1">
<img src="image2.jpg" alt="圖片 2">
<!-- 添加更多图片 -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

这段 CSS 创建了一个水平滚动的图库。overflow-x: auto 属性在需要时添加一个水平滚动条。

垂直滚动的图库

垂直滚动的图库非常适合在紧凑的空间中展示大量图片：

<div class="gallery-vertical">
<img src="image1.jpg" alt="圖片 1">
<img src="image2.jpg" alt="圖片 2">
<!-- 添加更多图片 -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

这段 CSS 创建了一个垂直滚动的图库。overflow-y: scroll 属性添加了一个垂直滚动条。

CSS Grid 图库

CSS Grid 是一个强大的工具，用于创建复杂布局。让我们使用它来创建一个动态图库：

<div class="grid-gallery">
<img src="image1.jpg" alt="圖片 1">
<img src="image2.jpg" alt="圖片 2">
<img src="image3.jpg" alt="圖片 3">
<img src="image4.jpg" alt="圖片 4">
<img src="image5.jpg" alt="圖片 5">
</div>

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

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

这段 CSS 创建了一个网格布局，其中一些图片跨越多个列或行，形成一个更动态的布局。

选项卡式图库

选项卡式图库是一种组织不同图片集的好方法：

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">自然</button>
<button class="tablinks" onclick="openTab(event, 'City')">城市</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="自然 1">
<img src="nature2.jpg" alt="自然 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="城市 1">
<img src="city2.jpg" alt="城市 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

这段 CSS 创建了一个选项卡界面。你需要一些 JavaScript 来使其功能正常：

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS 幻灯片

让我们创建一个简单的幻灯片：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

你需要一些 JavaScript 来控制幻灯片：

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // 每2秒更改一次图片
}

CSS 幻灯片图库

最后，让我们将幻灯片与缩略图结合，以获得更互动的体验：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

你需要修改 JavaScript 以处理缩略图点击：

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

就这样！我们已经涵盖了多种 CSS 图库技术。记住，熟能生巧。尝试将这些技术结合起来，创建你自己的独特图库。快乐编码！

Credits: Image by storyset