資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML和CSS設計作品集網頁
使用HTML和CSS設計作品集網頁可以有效地展示您的最佳作品，並吸引專業人士與您合作或招聘您。作品集網站作為展示您的作品和技能的平臺，其作用與簡歷(Curriculum vitae)相同。作品集網站將以引人入勝的視覺影像展示您的作品，通常比手寫的簡歷更詳細。
在本文中，我們將學習並瞭解如何透過逐步解釋和示例程式碼來使用HTML和CSS設計作品集網頁。
為什麼要建立作品集網站？
建立作品集網站有幾個原因，例如：
- 向潛在的僱主、客戶和合作者展示您的最佳作品，並突出您的能力。
- 作品集網站有助於建立您的個人品牌，並使您在您的領域成為專家。
- 它促進了與其他專業人士的聯絡，透過與他人分享此網站，他們可以瀏覽您的作品，如果他們有興趣與您合作或招聘您，則可以聯絡您。
作品集網站的基本佈局
在建立吸引客戶或合作者注意力的作品集網站佈局時，應包含以下部分：
- 主頁：這是訪問者的初始接觸點，因此要留下良好的第一印象，幷包含關於您自己以及您的技能和過去工作經歷的介紹。
- 關於我：向訪問者提供有關您的教育背景和先前經驗的詳細資訊。
- 專案：包含您的專案說明和專案連結。
- 聯絡我：新增您的專業聯絡方式，例如電子郵件、GitHub 個人資料、LinkedIn、YouTube 等。請勿包含您的個人聯絡方式。
設計作品集網頁的步驟
我們將按照以下步驟使用HTML和CSS設計作品集網頁。
使用HTML建立作品集佈局
- 我們使用了兩個div元素來定義作品集的頁首和正文部分。
- 作品集的頁首部分包含一個帶有各種連結和按鈕的導航欄，分別使用nav、anchor和button標籤建立，以及使用img標籤建立的徽標。我們使用了ul在導航欄中建立一個無序連結列表。
- 作品集的正文部分包含使用p和span標籤建立的簡短說明、按鈕和使用者的個人資料圖片。
<div class="header">
<nav>
<a href="#"><img src="/images/logo.png?v2"
alt="logo"></a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><button type="button" class="button-gfc">
Get Free Consultant
</button></li>
<li><button type="button" class="button-cv">
DOWNLOAD CV
</button></li>
</ul>
</nav>
<div class="body">
<p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
<h1>Hello <br> I'm <span class="green">Tutorials</span>
<span>Point.</span>
</h1>
<p class="demo2">
From concept to deployment, I bring ideas<br>
to life as a versatile full stack developer...
</p>
<button type="button" class="button-lrn">
LEARN MORE
</button>
<button type="button" class="button-hire">
HIRE ME
</button>
</div>
<div class="image">
<img src="/assets/questions/media/1269191-1730184507.jpg"
class="icon" alt="Profile Picture">
</div>
</div>
使用CSS設定作品集樣式
- 我們使用了**萬用字元選擇器**將margin和padding重置為0，並設定整個文件的字型。
- **header**類使用CSS的height和width屬性設定頁首的背景顏色和尺寸。
- 我們使用了**nav**元素選擇器來設定導航欄的樣式。display屬性使其成為flexbox。align-items屬性居中導航欄，justify-content用於均勻間距。它設定導航欄的邊距、填充和寬度。
- **li**樣式透過使用list-style屬性刪除其預設專案符號並水平顯示連結來設定列表項的樣式。
- **a**樣式透過使用text-decoration刪除連結的下劃線，更改文字顏色並使用font-weight屬性使連結變為粗體來設定所有連結的樣式。
- 我們使用了帶有錨點標籤的:hover偽類，它在懸停在連結上時會更改背景顏色、文字顏色並設定彎曲的邊緣。
- **button-cv, .button-gfc**樣式設定按鈕樣式。它設定背景顏色、文字顏色、彎曲的邊緣和transition效果，同時更改背景顏色。cursor屬性將滑鼠更改為指標，將左外邊距重置為0，設定填充並刪除邊框。
- 我們在懸停在這些按鈕上時更改了背景顏色和文字顏色。
- 然後，我們設定了**body**部分的左和頂邊距，並透過設定其字型大小、底部邊距和文字顏色來設定標題的樣式。
- 我們使用了**image**類來設定包含影像的div的樣式。我們設定了div的最大寬度、高度和位置。我們使用了bottom和right屬性來定位網頁中的影像。
- 最後，我們使用了**icon**類來設定影像的樣式，我們設定了它的高度和位置。left和transform屬性居中影像，clip-path建立影像的圓形形狀，使其看起來像個人資料圖片。
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.header {
width: 100%;
height: 100vh;
background-color: lightblue;
}
nav {
display: flex;
margin: auto;
width: 90%;
padding: 20px;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
list-style: none;
margin: 10px;
}
a {
text-decoration: none;
color: black;
font-weight: bolder;
padding: 5px;
}
a:hover {
background-color: seagreen;
border-radius: 2px;
color: white;
}
.button-cv, .button-gfc {
display: inline-block;
margin-left: 0%;
border-radius: 5px;
transition: background-color 0.5s;
background: black;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: none;
cursor: pointer;
}
.button-cv:hover {
background-color: white;
color: black;
}
.button-gfc {
background: lightsalmon;
}
.button-gfc:hover {
background-color: white;
color: black;
}
.body {
margin-left: 100px;
margin-top: 100px;
}
h1 {
font-size: 30px;
color: black;
margin-bottom: 20px;
}
.demo1 {
color: orange;
margin-bottom: 30px;
}
.demo2 {
line-height: 20px;
}
.button-lrn, .button-hire {
background: lightsalmon;
padding: 10px 12px;
text-decoration: none;
font-weight: bold;
color: whitesmoke;
display: inline-block;
margin: 30px 8px;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
letter-spacing: 1px;
cursor: pointer;
}
.button-lrn:hover {
background-color: whitesmoke;
color: black;
}
.button-hire {
background: black;
}
.button-hire:hover {
background-color: seagreen;
}
.green {
color: seagreen;
}
.image {
max-width: fit-content;
height: 70%;
position: absolute;
bottom: 25%;
right: 25%;
}
.icon {
height: 120%;
position: absolute;
left: 50%;
transform: translate(-60%);
clip-path: circle(26%);
}
完整的示例程式碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" , initial-scale="1.0">
<title>Personal portfolio</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.header {
width: 100%;
height: 100vh;
background-color: lightblue;
}
nav {
display: flex;
margin: auto;
width: 90%;
padding: 20px;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
list-style: none;
margin: 10px;
}
a {
text-decoration: none;
color: black;
font-weight: bolder;
padding: 5px;
}
a:hover {
background-color: seagreen;
border-radius: 2px;
color: white;
}
.button-cv, .button-gfc {
display: inline-block;
margin-left: 0%;
border-radius: 5px;
transition: background-color 0.5s;
background: black;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: none;
cursor: pointer;
}
.button-cv:hover {
background-color: white;
color: black;
}
.button-gfc {
background: lightsalmon;
}
.button-gfc:hover {
background-color: white;
color: black;
}
.body {
margin-left: 100px;
margin-top: 100px;
}
h1 {
font-size: 30px;
color: black;
margin-bottom: 20px;
}
.demo1 {
color: orange;
margin-bottom: 30px;
}
.demo2 {
line-height: 20px;
}
.button-lrn, .button-hire {
background: lightsalmon;
padding: 10px 12px;
text-decoration: none;
font-weight: bold;
color: whitesmoke;
display: inline-block;
margin: 30px 8px;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
letter-spacing: 1px;
cursor: pointer;
}
.button-lrn:hover {
background-color: whitesmoke;
color: black;
}
.button-hire {
background: black;
}
.button-hire:hover {
background-color: seagreen;
}
.green {
color: seagreen;
}
.image {
max-width: fit-content;
height: 70%;
position: absolute;
bottom: 25%;
right: 25%;
}
.icon {
height: 120%;
position: absolute;
left: 50%;
transform: translate(-60%);
clip-path: circle(26%);
}
</style>
</head>
<body>
<div class="header">
<nav>
<a href="#"><img src="/images/logo.png?v2"
alt="logo"></a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><button type="button" class="button-gfc">
Get Free Consultant
</button></li>
<li><button type="button" class="button-cv">
DOWNLOAD CV
</button></li>
</ul>
</nav>
<div class="body">
<p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
<h1>Hello <br> I'm <span class="green">Tutorials</span>
<span>Point.</span>
</h1>
<p class="demo2">
From concept to deployment, I bring ideas<br>
to life as a versatile full stack developer...
</p>
<button type="button" class="button-lrn">
LEARN MORE
</button>
<button type="button" class="button-hire">
HIRE ME
</button>
</div>
<div class="image">
<img src="/assets/questions/media/1269191-1730184507.jpg"
class="icon" alt="Profile Picture">
</div>
</div>
</body>
</html>
輸出
結論
在本文中，我們學習並理解了如何使用HTML和CSS設計作品集網頁。我們設計了一個包含導航欄、連結、徽標、按鈕和個人資料圖片的基本作品集網頁。
更新於：2024年10月29日
14K+ 瀏覽量
廣告