数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用HTML和CSS创建作品集图库
概述
作品集图库可以是任何类型的照片和视频的集合，这些照片和视频代表组织过去的工作。为了构建作品集图库，我们将使用HTML和CSS。HTML将帮助我们构建作品集图库的框架，而CSS则用于制作作品集的样式。由于作品集也将是我们网站的主要组成部分，因此我们将使用一些CSS属性使此页面具有响应性。
算法
步骤1 - 在您的文本编辑器中创建一个HTML基本结构。
步骤2 - 为页面的标题创建一个容器。
步骤3 - 现在创建另一个div容器来创建一个图库，并使容器flex和flex wrap。使页面具有响应性。
<div class="gallery"></div>
步骤4 - 将卡片添加到图库并修复卡片的大小。
<div class="card">
<div class="imgs">
<img src="https://tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
</div>
<p>Java projects 2023 Edition</p>
</div>
步骤5 - 如果你想向div容器添加更多卡片，请重复步骤4。
步骤6 - 在卡片中添加图片。
步骤7 - 作品集图库创建成功。
示例
在这个例子中，我们创建了两个文件，它们帮助我们创建作品集图库。在HTML文件中，我们链接了样式表以提供页面的样式。
<html>
<head>
<title>Portfolio Gallery</title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin-top: 0;
font-family: 'Segoe UI';
}
.title{
font-size: 2rem;
font-weight: 700;
background-color: white;
width: 100%;
}
.subtitle{
font-size: 0.8rem;
}
.dash{
width: 100%;
height: 2px;
background-color: rgb(143, 143, 143);
margin-bottom: 0.5rem;
}
.gallery{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
padding: 1rem 0;
}
.card{
width: 15rem;
height: 15rem;
box-shadow: 0 0 5px rgb(165, 165, 165);
border-radius: 5px;
padding: 0.5rem;
}
.card:hover{
transform: scale(1.009);
cursor: pointer;
}
.imgs{
background: rgb(219, 218, 218);
height: 60%;
border-radius: 5px;
}
img{
width: 100%;
height: 100%;
border-radius: 5px;
}
p{
padding: 1rem 0.5rem;
font-weight: 600;
}
</style>
</head>
<body>
<div class="title">
Portfolio
<div class="subtitle">
Developers best projects of all the domain
</div>
<div class="dash"></div>
</div>
<div class="gallery">
<div class="card">
<div class="imgs">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt="">
</div>
<p>HTML5 and CSS3 projects 2023 Edition</p>
</div>
<div class="card">
<div class="imgs">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt="">
</div>
<p>Python projects 2023 Ediiton</p>
</div>
<div class="card">
<div class="imgs">
<img src="https://tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
</div>
<p>Java projects 2023 Edition</p>
</div>
<div class="card">
<div class="imgs">
<img src="https://tutorialspoint.com/android/images/android-mini-logo.jpg" alt="">
</div>
<p>Android Development projects 2023 Edition</p>
</div>
<div class="card">
<div class="imgs">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg" alt="">
</div>
<p>Fullstack Projects 2023 Edition</p>
</div>
</div>
</body>
</html>
下面的图片是上面例子输出的响应式图片。以上作品集图库代码具有响应性。它可以在任何视图屏幕上查看。下面的屏幕是桌面、平板电脑和移动屏幕。
桌面视图可以在大屏幕上看到，可以很好地查看作品集网站。
结论
作品集图库是一个组件，可以用于许多类型的网站，例如组织网站，它在作品集图库中展示即将开展的项目及其在该领域的专业知识，这可以让他们的客户决定是否与特定公司合作。作品集图库也用于开发人员向招聘公司展示他们最好的项目。换句话说，我们也可以说它就像我们的手机图库，包含照片和视频的集合。
更新于：2023年11月9日
1K+ 次浏览
广告