首页 > 文章 > web前端 > 如何使用HTML和CSS创建投资组合画廊

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

王林转载: 2023-09-02 19:57:161472浏览

概述

一个作品集画廊可以是组织过去工作的任何类型的照片和视频的集合。为了构建一个作品集画廊，我们将使用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">
      <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
   </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">
            <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>

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

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

Conclusion

一个作品集画廊是一个可以在许多类型的网站中使用的组件，比如一个组织网站，它在作品集画廊中展示即将到来的项目和他们在该领域的专业知识，为客户决定是否与特定公司合作提供参考。作品集画廊也被开发者用来展示他们最好的项目给招聘公司。换句话说，我们也可以说它就像我们的手机画廊，其中包含一系列的照片和视频。

以上是如何使用HTML和CSS创建投资组合画廊的详细内容。更多信息请关注PHP中文网其他相关文章！

css html this

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：根据世界标准时间，设置指定日期的小时数？下一篇：OpenCart教程：自定义配送方式（第一部分）

查看更多