博客 / 詳情

返回

html常見的頁面佈局

説明

查找了網絡上各位大佬寫的大致類型的文章，頁面佈局和網頁佈局大致上是可以一起討論的。它們都指的是在設計網站或應用時，頁面上各個元素（如導航欄、內容區、側邊欄、頁腳等）的排列方式和結構。

不過，也可以根據上下文理解為：

網頁佈局（Web Layout）：通常強調網頁的整體設計和結構，包括不同頁面之間的一致性、響應式設計和跨瀏覽器兼容性等。網頁佈局更多地涉及整個網站或多個頁面的佈局設計。在這裏我認為是指固定寬度佈局，流式佈局，柵格化佈局和響應式佈局等佈局方式。

頁面佈局（Page Layout）：可以理解為單個頁面的設計結構，強調頁面內的內容組織和視覺效果，關注特定頁面上各個模塊和元素的排布，在這裏我認為是頁眉，導航欄，內容區，側邊欄，頁腳等。

簡單來説，網頁佈局可以看作是多個頁面設計的集合，而頁面佈局則更側重單一頁面的具體結構設計。兩者的概念相近，具體含義可能會因為上下文的不同而有所變化。

所以我們這裏就簡單介紹一下HTML頁面佈局通常包括的主要部分以及一下經典的佈局案例。

HTML頁面佈局的主要部分

部分 位置 作用 元素
頁眉（Header） 通常包含網站的logo、導航菜單、聯繫信息或搜索框等。 作用 <header>, <nav>, <h1>等。
導航欄（Navigation Bar） 通常位於頁面的頂部或側邊。 為用户提供網站各個部分的鏈接。 <nav>, <ul>,<li>, <a> 等。
內容區（Content Area） 頁面的主要部分。 顯示網頁的主要內容，如文章、圖片、視頻等。 <main>, <article>, <section>,<div>等。
側邊欄（Sidebar） 通常位於頁面的左右兩側。 顯示次要內容或附加信息，如廣告、推薦文章、社交媒體鏈接等。 <aside>, <div> 等。
頁腳（Footer） 頁面的底部。 通常包含版權信息、鏈接、聯繫信息或網站地圖等。 <footer>, <address>, <small> 等。
麪包屑導航（Breadcrumbs） 通常位於頁面內容的上方或頁眉下方。 提供用户當前所在位置的層級導航，方便返回上一級頁面。 <nav>, <ul>, <li>, <a> 等。
呼叫行動按鈕（Call to Action, CTA） 可以位於頁面的不同位置，通常在內容區或側邊欄。 引導用户進行特定操作，如“購買”、“註冊”、“瞭解更多”等。 <button>,<a> 等。
表單（Forms） 通常位於內容區或側邊欄。 用於用户輸入信息並提交，如登錄表單、搜索框、註冊表單等。 <form>, <input>, <label>, <textarea> 等。
圖片/視頻區（Media Section） 根據頁面設計，可在內容區、側邊欄等。 展示圖片、視頻、音頻等多媒體內容。 <img>, <video>, <audio> 等。
廣告區域（Ad Section） 通常位於側邊欄、內容區、頁腳或頭部區域。 展示廣告內容。 <div>, <iframe> 等。

常見的頁面佈局案例

三欄佈局

通常用於信息量較大的網站，如門户網站或新聞網站

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三欄佈局</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        header, footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        .container {
            display: flex;
            flex-grow: 1;
        }
        aside {
            flex: 1;
            background-color: #f4f4f4;
            padding: 2rem;
        }
        main {
            flex: 2;
            padding: 2rem;
        }
    </style>
</head>
<body>

<header>
    <h1>頭部</h1>
</header>
<div class="container">
    <aside>
        <h3>左側邊欄</h3>
        <p>這是左側邊欄</p>
    </aside>
    <main>
        <h2>內容主體</h2>
        <p>主要內容</p>
    </main>
    <aside>
        <h3>右側邊欄</h3>
        <p>這是右側邊欄</p>
    </aside>
</div>
<footer>
    <p>&copy; 尾部</p>
</footer>
</body>
</html>

F型佈局

通常用於內容較多的網頁，如博客文章、新聞網站，在線雜誌，教育類網站等。研究表明，用户在瀏覽網頁時，眼睛通常會先橫向掃視頁面的頂部，然後垂直向下掃視左側的內容，最後再在頁面的中部或下部橫向掃視。這種瀏覽路徑類似於字母“F”的形狀，因此稱為F型佈局。

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>F-Pattern Layout</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
            background-color: white;
        }
        header {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: left;
        }
        nav {
            background-color: #444;
            color: white;
            padding: 1rem;
            margin-top: 1rem;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin-right: 1rem;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .content {
            display: flex;
            margin-top: 1rem;
        }
        .main-content {
            flex: 3;
            padding: 1rem;
        }
        .sidebar {
            flex: 1;
            padding: 1rem;
            background-color: #e9e9e9;
            margin-left: 1rem;
        }
        footer {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
            margin-top: 1rem;
        }
        h2 {
            margin-top: 0;
        }
    </style>
</head>
<body>

<div class="container">
    <header>
        <h1>F型佈局</h1>
    </header>

    <nav>
        <a href="#">首頁</a>
        <a href="#">論壇</a>
        <a href="#">文章</a>
        <a href="#">其他</a>
    </nav>

    <div class="content">
        <div class="main-content">
            <h2>文章標題</h2>
            <p>網頁佈局（Web Layout）：通常強調網頁的整體設計和結構，包括不同頁面之間的一致性、響應式設計和跨瀏覽器兼容性等。網頁佈局更多地涉及整個網站或多個頁面的佈局設計。在這裏我認為是指固定寬度佈局，流式佈局，柵格化佈局和響應式佈局等佈局方式。</p>
            <p>頁面佈局（Page Layout）：可以理解為單個頁面的設計結構，強調頁面內的內容組織和視覺效果，關注特定頁面上各個模塊和元素的排布，在這裏我認為是頁眉，導航欄，內容區，側邊欄，頁腳等。</p>
            <p>簡單來説，網頁佈局可以看作是多個頁面設計的集合，而頁面佈局則更側重單一頁面的具體結構設計。兩者的概念相近，具體含義可能會因為上下文的不同而有所變化。</p>
        </div>
        <aside class="sidebar">
            <h2>相關鏈接</h2>
            <ul>
                <li><a href="#">相關鏈接1</a></li>
                <li><a href="#">相關鏈接2</a></li>
                <li><a href="#">相關鏈接3</a></li>
            </ul>
        </aside>
    </div>

    <footer>
        <p>&copy; 尾頁</p>
    </footer>
</div>
</body>
</html>

分屏佈局

分屏佈局（Split Screen Layout）是一種將頁面分成兩個或更多垂直或水平部分的佈局方式。每個部分（屏）可以展示不同的內容或功能，同時保持頁面的整潔和有序。這種佈局常用於需要突出兩個主要內容塊或對比展示不同信息的場景。一般用於：

電商網站：一側展示產品信息，另一側展示產品圖片或視頻。

教育平台：一側展示課程介紹，另一側展示報名或登錄選項。

服務頁面：一側介紹服務內容，另一側展示服務優勢或客户評價。

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Screen Layout</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        .split-screen {
            display: flex;
            height: 100%;
        }
        .left, .right {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 2rem;
            box-sizing: border-box;
        }
        .left {
            background-color: #3498db;
        }
        .right {
            background-color: #2ecc71;
        }
        .content {
            text-align: center;
        }
        .content h1 {
            margin: 0 0 1rem;
        }
        .content p {
            margin: 0 0 1.5rem;
        }
        .content a {
            background-color: white;
            color: #333;
            padding: 0.5rem 1rem;
            text-decoration: none;
            border-radius: 5px;
        }
        .content a:hover {
            background-color: #eee;
        }
        @media (max-width: 768px) {
            .split-screen {
                flex-direction: column;
            }
            .left, .right {
                width: 100%;
                height: 50%;
            }
        }
    </style>
</head>
<body>

<div class="split-screen">
    <div class="left">
        <div class="content">
            <h1>歡迎回來</h1>
            <p>如果您已有帳户，請登錄。</p>
            <a href="#">登錄</a>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <h1>加入我們</h1>
            <p>如果您未註冊，請創建一個帳户。</p>
            <a href="#">註冊</a>
        </div>
    </div>
</div>
</body>
</html>

單頁佈局

單頁佈局（Single Page Layout），也稱為單頁面應用（Single Page Application, SPA），是一種將所有內容集中在一個頁面上的佈局方式。通過滾動或點擊導航鏈接，用户可以在同一頁面內瀏覽不同的內容部分，而無需加載新的頁面。單頁佈局常用於產品展示、個人作品集、宣傳頁等場景。

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page Layout</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }
        header {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 300;
        }
        header nav a {
            color: white;
            text-decoration: none;
            margin: 0 1rem;
        }
        section {
            padding: 6rem 1rem 2rem;
            min-height: 20vh;
        }
        #home {
            background-color: #3498db;
            color: white;
        }
        #about {
            background-color: #2ecc71;
            color: white;
        }
        #services {
            background-color: #e67e22;
            color: white;
        }
        #contact {
            background-color: #9b59b6;
            color: white;
        }
    </style>
</head>
<body>

<header>
    <nav>
        <a href="#home">首頁</a>
        <a href="#about">其他</a>
        <a href="#services">論壇</a>
        <a href="#contact">鏈接</a>
    </nav>
</header>

<section id="home">
    <h1>主頁部分</h1>
    <p>這是主頁部分。</p>
</section>

<section id="about">
    <h1>關於我們</h1>
    <p>這是關於部分</p>
</section>

<section id="services">
    <h1>服務</h1>
    <p>這是服務部分。</p>
</section>

<section id="contact">
    <h1>聯繫我們</h1>
    <p>這是聯繫部分。</p>
</section>
</body>
</html>

全屏圖像佈局

全屏圖像佈局（Full-Screen Image Layout）是一種將圖像充滿整個頁面或瀏覽器窗口的佈局方式，通常用於創造視覺衝擊力強的設計效果。此類佈局常見於網站的首頁、封面頁或背景，攝影作品展示，品牌宣傳，登陸頁面，組合導航等。以大尺寸、高質量的圖像作為背景，結合簡潔的文字和導航元素，讓用户專注於關鍵內容。

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏圖像佈局</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            color: white;
            overflow: hidden;
        }
        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://via.placeholder.com/1920x1080'); /* 替換為實際圖像URL */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;
        }
        .content {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            padding: 2rem;
            box-sizing: border-box;
        }
        h1 {
            margin: 0;
            font-size: 3rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }
        p {
            margin: 1rem 0;
            font-size: 1.5rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
        a {
            background-color: #3498db;
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            font-size: 1.25rem;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        a:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>

<div class="background-image"></div>

<div class="content">
    <h1>全屏圖像佈局</h1>
    <p>發現精彩內容，探索新的可能性。</p>
    <a href="#">開始使用</a>
</div>

</body>
</html>

卡片佈局

卡片佈局（Card Layout）是一種將內容組織成獨立的卡片形式的佈局方式。每個卡片通常包含圖像、標題、文本和操作按鈕等內容，排列在頁面上，形成網格或流式佈局。卡片佈局以其清晰、有序的設計風格，被廣泛用於展示產品、文章、社交媒體,用户檔案內容等。

效果演示

DESC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Layout Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-10px);
        }
        .card img {
            width: 100%;
            height: auto;
        }
        .card-content {
            padding: 1rem;
        }
        .card-title {
            font-size: 1.25rem;
            margin: 0;
            color: #333;
        }
        .card-description {
            margin: 0.5rem 0;
            color: #666;
        }
        .card-btn {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        .card-btn:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>

<div class="card">
    <img src="https://via.placeholder.com/300x200" alt="Card Image">
    <div class="card-content">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-description">對卡片內內容的簡短描述</p>
        <a href="#" class="card-btn">瞭解更多</a>
    </div>
</div>
<div class="card">
    <img src="https://via.placeholder.com/300x200" alt="Card Image">
    <div class="card-content">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-description">對卡片內內容的簡短描述</p>
        <a href="#" class="card-btn">瞭解更多</a>
    </div>
</div>
<div class="card">
    <img src="https://via.placeholder.com/300x200" alt="Card Image">
    <div class="card-content">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-description">對卡片內內容的簡短描述</p>
        <a href="#" class="card-btn">瞭解更多</a>
    </div>
</div>
</body>
</html>
頁面佈局 , HTML
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.