如何使用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://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
   </div>
   <p>Java projects 2023 Edition</p>
</div>

步骤5 − 如果您想在容器中添加更多的卡片，请重复第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://www.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://www.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>

以下图像是上述示例的响应式图像。上述投资组合画廊的代码具有响应式特性，可以在任何视图屏幕上查看。下面的屏幕是桌面，平板和移动屏幕。

桌面视图可以在大屏幕上以良好的视图来查看投资组合网站。