使用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>

輸出

Output

結論

在本文中，我們學習並理解了如何使用HTML和CSS設計作品集網頁。我們設計了一個包含導航欄、連結、徽標、按鈕和個人資料圖片的基本作品集網頁。

更新於：2024年10月29日

14K+ 瀏覽量

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告