首頁 > 文章 > web前端 > 如何使用HTML和CSS建立投資組合畫廊

如何使用HTML和CSS建立投資組合畫廊

王林轉載: 2023-09-02 19:57:161424瀏覽

概述

一個作品集畫廊可以是組織過去工作的任何類型的照片和影片的集合。為了建構一個作品集畫廊，我們將使用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刪除

上一篇：根據世界標準時間，設定指定日期的小時數？下一篇：根據世界標準時間，設定指定日期的小時數？

看更多