【Day 2】前端開發之旅－網頁結構

2024 iThome 鐵人賽

DAY 2

JavaScript

「前端開發快速入門：從基礎到現代框架的實戰之旅」系列第 2 篇

16th鐵人賽

dcheng0915

2024-09-16 23:56:33

105 瀏覽

分享至

讓我們先來初步建構網頁的版面！

<!DOCTYPE html>
<html lang="zh-TW">

<!DOCTYPE html> 是用來告訴瀏覽器 這是HTML5文檔
<html lang="zh-TW"> 則是用來指定文檔的語言為繁體中文

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: gray;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1024px;
            margin: 0 auto;
        }
        .header {
            min-height: 100px;
            background-color: lightskyblue;
        }
        .main {
            flex-grow: 1;
            background-color: lightgrey;
        }
        .footer {
            min-height: 100px;
            background-color: lightslategray;
        }
    </style>
</head>

<meta charset="UTF-8"> 將字元符號的編碼設定為 UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 確保移動設備上能正確地顯示版面
<title></title> 用來設定網頁標題
<style></style> 標籤內包含了 CSS 樣式

<body>
    <div class="container">
        <header class="header">
            <h1></h1>
        </header>

        <main class="main"></main>
        
        <footer class="footer"></footer>
    </div>
</body>

使用一個div把主要的內容排版為一頁式的排版方式，也就是由上往下，一個元素佔據一行。這裡的排版可以參考 <style></style> 標籤內的 CSS，基本上是在 div.container 這個元素中使用 flex ，並把排序方式從橫向改為縱向，讓主頁面的內容能由上往下的排序。在 main 中使用 flex-grow: 1 可以讓 main 這個元素填補高度扣掉上下兩個元素 header 與 footer 後，填滿剩餘為佔據的高度。

以下為 index.html 的完整程式碼：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: gray;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1024px;
            margin: 0 auto;
        }
        .header {
            min-height: 100px;
            background-color: lightskyblue;
        }
        .main {
            flex-grow: 1;
            background-color: lightgrey;
        }
        .footer {
            min-height: 100px;
            background-color: lightslategray;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1></h1>
        </header>

        <main class="main"></main>
        
        <footer class="footer"></footer>
    </div>
</body>
</html>