Day28:全網頁螢幕製作流程

2024 iThome 鐵人賽

DAY 28

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 28 篇

16th鐵人賽

gogococo

2024-10-12 02:24:54

115 瀏覽

分享至

1. 設定基本 HTML 結構
首先，建立網頁的基礎結構。這可以使用 HTML 的基本標籤，例如、、和。

範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全螢幕網頁</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="fullscreen-container">
        <h1>全螢幕網頁範例</h1>
        <p>這是全螢幕的網頁設計。</p>
    </div>
</body>
</html>

2. CSS 全螢幕設置
要讓網頁佔滿整個螢幕，使用 CSS 來設置網頁的高和寬，並且移除預設的 margin 和 padding。

在 style.css 中，可以設定：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

.fullscreen-container {
    height: 100vh;
    width: 100vw; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; 
    text-align: center;
}

說明：

選擇器：移除了所有元素的預設邊距和填充，並設定 box-sizing: border-box，這樣所有的寬度和高度計算將包括邊框和內邊距。
html, body：確保 html 和 body 佔滿整個螢幕。
.fullscreen-container：使用 100vh 和 100vw 讓容器佔滿整個螢幕的高度和寬度，flexbox 用來讓內容居中顯示。

3. 設定視口和響應式設計
為了讓網頁在不同裝置上也能全螢幕顯示，使用 meta viewport 設定：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這可以讓使用者的網頁在行動裝置或縮小瀏覽器視窗時，也能自適應地呈現全螢幕效果。

4. 加入其他 CSS 屬性（可選）
你可以依據需求，加入更多樣式。例如背景圖片、按鈕、導航列等。

背景圖片：

.fullscreen-container {
    background-image: url('your-image.jpg');
    background-size: cover; /* 圖片覆蓋整個容器 */
    background-position: center;
}

字體與顏色：

h1 {
    font-size: 3rem;
    color: #333;
}

p {
    font-size: 1.2rem;
    color: #555;
}

5. 測試和調整
當 HTML 和 CSS 完成後，將網頁在不同瀏覽器和裝置上測試，確保全螢幕效果正確，並且內容自適應螢幕大小。

總結流程：
建立 HTML 結構：使用容器包裹內容。
撰寫 CSS：設置高度和寬度為 100vh 和 100vw，讓內容居中顯示。
響應式設計：設定視口和調整樣式，以確保不同裝置上的顯示效果。
測試：確保全螢幕效果在不同瀏覽器和設備上運行正常。
這些步驟能幫助你建立一個簡單且有效的全螢幕網頁。