如何使用 HTML 和 CSS 创建作品集图库

htmlcssweb developmentfront end technology更新于 2024/3/21 22:36:17

概述

作品集图库可以包含任何类型的照片和视频，用于展示机构的过往作品。我们将使用 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.cainiaomax.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://www.cainiaomax.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.cainiaomax.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>

下图是上述示例输出的响应式图像。上述作品集图库代码本质上是响应式的。它可以在任何视图屏幕上显示。以下屏幕分别对应桌面、平板电脑和手机屏幕。

桌面视图可以在大屏幕上显示，并可以清晰地查看作品集网站。