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常见的页面布局

说明

HTML页面布局的主要部分

常见的页面布局案例

三栏布局

效果演示

F型布局

效果演示

分屏布局

效果演示

单页布局

效果演示

全屏图像布局

效果演示

卡片布局

效果演示

失望的双杠_eJN3LI

引用和评论

java后端传时间戳给前端的三种方式

前端开发工具

浅谈sessionStorage的"继承"问题

html如何实现跳转到锚点

Thymeleaf的使用

vue3项目，word文件转html预览，mammoth.js

by组态-web组态软件