資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS建立作品集相簿
概述
作品集相簿可以是任何型別的照片和影片的集合，這些照片和影片代表組織過去的工作。為了構建作品集相簿，我們將使用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://tutorialspoint.tw/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://tutorialspoint.tw/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://tutorialspoint.tw/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>
下面的圖片是上面例子輸出的響應式圖片。以上作品集相簿程式碼具有響應性。它可以在任何檢視螢幕上檢視。下面的螢幕是桌面、平板電腦和移動螢幕。
桌面檢視可以在大螢幕上看到，可以很好地檢視作品集網站。
結論
作品集相簿是一個元件，可以用於許多型別的網站，例如組織網站，它在作品集相簿中展示即將開展的專案及其在該領域的專業知識，這可以讓他們的客戶決定是否與特定公司合作。作品集相簿也用於開發人員向招聘公司展示他們最好的專案。換句話說，我們也可以說它就像我們的手機相簿，包含照片和影片的集合。
更新於：2023年11月9日
1K+ 次瀏覽
廣告