資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立響應式作品集畫廊網格？
如果你是一個攝影愛好者，並且熱愛攝影，你肯定想在網站上展示你的作品。為此，需要建立用於畫廊的網格，並且該網格也能在不同的裝置上正常工作。響應式設計也可以輕鬆設定。讓我們看看如何建立一個響應式作品集畫廊網格。
設定主要內容
在<main>內容下，設定父 div。在其中，放置影像的 divs 以及內容。在這裡，我們只為我們的作品集畫廊顯示了一個 div：
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
以下是我們為畫廊設定的四個影像：
<div class="portfolioContainer">
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/jira/images/jira-mini-logo.jpg" />
<h3>Picture 2</h3>
<p>JIRA</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/kubernetes/images/kubernetes-mini-logo.jpg" />
<h3>Picture 3</h3>
<p>Kubernates</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/ansible/images/ansible-mini-logo.jpg" />
<h3>Picture 4</h3>
<p>Ansible</p>
</div>
</div>
</div>
設定主要內容樣式
對於主要內容，使用 max-width 屬性設定最大寬度：
main {
max-width: 1000px;
margin: auto;
}
定點陣圖像
影像的 div 使用 float 屬性定位在左側：
.ImageCol {
float: left;
width: 25%;
}
img {
width: 100%;
}
設定響應式
媒體查詢用於設定響應式。當螢幕尺寸小於 900 畫素時，寬度設定為 50%：
@media screen and (max-width: 900px) {
.ImageCol {
width: 50%;
}
}
當螢幕尺寸小於 600 畫素時，寬度設定為 100%：
@media screen and (max-width: 600px) {
.ImageCol {
width: 100%;
}
}
示例
以下是使用 CSS 建立響應式作品集畫廊網格的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
font-family: monospace, serif, sans-serif;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
main {
max-width: 1000px;
margin: auto;
}
img {
width: 100%;
}
.portfolioContainer {
margin: 8px -16px;
}
.portfolioContainer,
.portfolioContainer > .ImageCol {
padding: 8px;
}
.ImageCol {
float: left;
width: 25%;
}
.portfolioContainer:after {
content: "";
display: table;
clear: both;
}
.portfolioContent {
background-color: white;
padding: 10px;
}
@media screen and (max-width: 900px) {
.ImageCol {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.ImageCol {
width: 100%;
}
}
</style>
</head>
<body>
<main>
<h1>Photography</h1>
<hr />
<div class="portfolioContainer">
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/jira/images/jira-mini-logo.jpg" />
<h3>Picture 2</h3>
<p>JIRA</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/kubernetes/images/kubernetes-mini-logo.jpg" />
<h3>Picture 3</h3>
<p>Kubernates</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://tutorialspoint.tw/ansible/images/ansible-mini-logo.jpg" />
<h3>Picture 4</h3>
<p>Ansible</p>
</div>
</div>
</div>
</main>
</body>
</html>
更新於：2023-12-14
478 次瀏覽
廣告