数据结构
网络
关系数据库管理系统 (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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/ansible/images/ansible-mini-logo.jpg" />
<h3>Picture 4</h3>
<p>Ansible</p>
</div>
</div>
</div>
</main>
</body>
</html>
更新于：2023-12-14
478 次浏览
广告