📅 第二十天：綜合運用前十九天所學，解構網站設計的核心-1！

2024 iThome 鐵人賽

DAY 20

佛心分享-IT 人自學之術

30天前端設計之旅系列第 20 篇

16th鐵人賽

mingt

2024-10-02 12:43:52

68 瀏覽

分享至

今天是我們的DAY 20，恭喜我們一起走到了「30天前端設計之旅」的三分之二！今天我們將結合使用前十九天所學的知識，深入解讀一個完整的網站範例。我們會逐步拆解程式碼，並將每一部分會和之前學習過的知識相對應，讓我們能更深刻理解這些技術是如何在實際開發中運作的。

第一部分：HTML 結構

在前幾天的學習中，你已經掌握了如何使用 HTML 標籤來構建網頁結構。以下是網站的基本結構，包括 header、nav、section、footer 等常見的 HTML 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可愛小圖</title>
</head>
<body>
    <header>
        <h1>可愛小圖</h1>
    </header>

    <nav>
        <a href="#home">首頁</a>
        <a href="#about">關於我們</a>
        <a href="#contact">聯絡我們</a>
    </nav>
</body>
</html>

對應學習日：第一天（HTML 基礎）、第二天（網頁結構）。
說明：header 用來放置網站標題，nav 則負責網站導航。這些標籤讓網站內容層次分明，易於閱讀。

第二部分：CSS 樣式設計

在第九到十一天，學習了 CSS 的基本語法、選擇器以及如何調整字型、文字、背景和顏色。在這裡，我們使用 CSS 來美化網站的外觀，選擇了柔和的莫蘭迪色系，為頁面提供溫暖的感覺。

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f6f2;
}

header {
    background-color: #c7b8a5;
    padding: 20px;
    text-align: center;
    color: #fff;
}

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    background-color: #8c8a83;
    padding: 15px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}