如何使用HTML和CSS创建投资组合画廊-html教程-PHP中文网

如何使用HTML和CSS创建投资组合画廊

王林

发布： 2023-09-02 19:57:16

转载

1520人浏览过

如何使用html和css创建投资组合画廊

概述

一个作品集画廊可以是组织过去工作的任何类型的照片和视频的集合。为了构建一个作品集画廊，我们将使用HTML和CSS。HTML将帮助我们构建作品集画廊的骨架，而CSS用于制作作品集的样式。由于作品集也是我们网站的主要组成部分，所以我们将使用一些CSS属性使该页面具有响应性。

Algorithm

第一步 - 在你的文本编辑器上创建一个HTML样板。

步骤2 - 创建页面头部的容器。

第三步 - 现在创建另一个div容器来创建一个画廊，并使容器具有弹性和换行。以使页面具有响应性。

立即学习“前端免费学习笔记（深入）”；

<div class="gallery"></div>

登录后复制

Step 4 − Add the cards to the gallery and fix the size of the card.

<div class="card">
   <div class="imgs">
      @@##@@
   </div>
   <p>Java projects 2023 Edition</p>
</div>

登录后复制

第5步 - 如果您想要向div容器添加更多的卡片，请重复第4步。

Step 6 − Add the image in the cards.

第7步 - 画廊组合成功创建。

Example

In this example we have created two files which helps us to create the portfolio gallery. In the HTML file we have linked the stylesheet to provide the styling to the page. The

<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">
            @@##@@
         </div>
         <p>HTML5 and CSS3 projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            @@##@@
         </div>
         <p>Python projects 2023 Ediiton</p>
      </div>
      <div class="card">
         <div class="imgs">
            @@##@@
         </div>
         <p>Java projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            @@##@@
         </div>
         <p>Android Development projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            @@##@@
         </div>
         <p>Fullstack Projects 2023 Edition</p>
      </div>
   </div>
</body>
</html>

登录后复制

下面的图片是上面示例的响应式图片。上面的代码是响应式的，可以在任何视图屏幕上查看。下面的屏幕是桌面、平板和手机屏幕。

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