如何使用HTML和CSS建立投資組合畫廊-html教學-PHP中文網

概述

Algorithm

Example

Conclusion

首頁

web前端

html教學

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

王林

Sep 02, 2023 pm 07:57 PM

html 使用組合投資組合畫廊 html: 投資 css: 創建

如何使用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">
      <img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg"  class="lazy" 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="/static/imghw/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg"  class="lazy" alt="">
         </div>
         <p>HTML5 and CSS3 projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghw/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png"  class="lazy" alt="">
         </div>
         <p>Python projects 2023 Ediiton</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg"  class="lazy" alt="">
         </div>
         <p>Java projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/android/images/android-mini-logo.jpg"  class="lazy" alt="">
         </div>
         <p>Android Development projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghw/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg"  class="lazy" alt="">
         </div>
         <p>Fullstack Projects 2023 Edition</p>
      </div>
   </div>
</body>
</html>

登入後複製

下面的圖片是上面範例的響應式圖片。上面的程式碼是響應式的，可以在任何視圖螢幕上查看。下面的螢幕是桌面、平板和手機螢幕。

可以在大螢幕上以良好的視角查看桌面視圖的作品集網站。