当前位置： 首页 > article >正文

基于 CSS Grid 的网页，拆解页面整体布局结构

article 2025/9/19 1:55:53

通过以下示例拆解网页整体布局结构：

一、基础结构（HTML骨架）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Globe Trekk - HTML Traveling Template">
</head>
<body><!-- 页面内容 -->
</body>
</html>

代码解释： 

  1. DOCTYPE声明：定义HTML版本（如<!DOCTYPE html>）。

  2. HTML根标签：<html lang="zh-CN">（语言声明为中文）。

  3. 头部（Head）：

    • <meta charset="UTF-8">（支持全球几乎所有的语言字符）。

    • <meta http-equiv="X-UA-Compatible" content="IE=edge">（指定网页在 IE 浏览器中的渲染模式）。

    • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">（控制网页在移动设备上的显示方式，实现响应式设计。

    • <meta name="description" content="Globe Trekk - HTML Traveling Template">（为网页添加描述信息）

  4. 主体（Body）：网页核心内容区域，如页眉、导航、内容区、页脚

二、布局设计

1. 布局模式选择

  • Flexbox：适合一维布局（横向或纵向排列）。

  • CSS Grid：适合二维复杂布局（行和列）。

  • 表单布局：输入项为横向排列（PC端）或纵向排列（移动端）

2. 响应式设计

  • 移动端适配：

    1. 汉堡式菜单 和 搜索表单 会垂直堆叠。

    2. 输入框和按钮宽度调整为 100%，适应小屏幕。

3. 典型布局结构

  • 页眉（Header）

    1. 顶部导航栏：

      1. "MENU"（菜单按钮，用于全局导航）。

      2. "BOOK NOW"（行动号召按钮，高亮显示，可跳转至指定页面）

    2. Logo：包含文字 "GLOBE" 和 "TREKK"，采用 Logo + 品牌名称的组合，字体较大以强调品牌

  • 主体内容（Main Content）：核心标语 + 搜索/筛选表单 + 行为按钮。

三、核心组件

  1. 导航栏（Navbar）：水平或垂直菜单，支持响应式折叠（移动端汉堡菜单）。

  2. 内容容器：卡片（Card）、列表（List）、网格（Grid）展示内容。

  3. 交互元素：按钮、表单、模态框（Modal）等。

  4. 页脚内容：多列链接、社交媒体图标、版权声明。

四、布局结构

整个页面由 contain容器 包裹着，使用 Kooboo 平台 中的 CSS Grid代码生成工具，可视化搭建页面结构，提高开发效率！

1. grid-template-columns

用于定义网格列的尺寸。在左侧 “grid - template - columns” 区域，可以添加多列，每列的值可设置：

  • fr 单位：代表弹性单位，按比例分配空间。比如设置1fr 1fr 1fr，表示三列将平均分配容器宽度。
  • px 单位：设置固定像素宽度，如100px ，列宽就是 100 像素。
  • 其他长度单位：像 em、rem 等也可使用 ，比如2em 。

2. grid-template-rows

用于定义网格行的尺寸，操作和grid-template-columns类似。在 “grid - template - rows” 区域设置：

  • 例如0.2fr 1fr 1fr ，第一行占容器高度的较小比例（0.2 份），后两行按 1:1 比例分配剩余空间。

设置好相关属性值后，点击左侧对应属性旁的 “add” 添加设置，或点击右侧代码区域上方的 “Save” 保存设置，就能应用网格长度设置到对应的.container类元素上 。

3. row - gap 和 column - gap

  • 功能：分别用于设置网格行与行之间、列与列之间的间距。当前值都为0px ，意味着网格项之间没有间隙。可修改数值和单位（如 px、em 等）来调整间距大小。

4. Implicit Grid（隐式网格）相关

  • grid - auto - columns：定义隐式网格列的尺寸。隐式网格列是当在网格容器中放置的内容超出显式定义的网格列时，自动创建的列。点击 “add” 可添加多个设置值。
  • grid - auto - rows：定义隐式网格行的尺寸 。原理同grid-auto-columns，用于设置超出显式定义网格行时自动创建行的大小。
  • grid - auto - flow：控制隐式网格轨道的生成方向。当前值为row ，表示按行方向自动生成隐式轨道。其他可选值有column（按列方向生成）和dense（用于更紧凑的网格布局，与前两者结合使用 ）。

5. Grid Placement（网格放置）相关

  1. justify - items：设置网格项在网格轨道水平方向（主轴）上的对齐方式。
    1. initial是默认值，其他常见值如start（左对齐）、end（右对齐）、center（居中对齐）等 。
  2. align - items：设置网格项在网格轨道垂直方向（交叉轴）上的对齐方式。
    1. initial为默认，还有start（顶对齐）、end（底对齐）、center（居中对齐）等取值 
  3. justify - content：控制整个网格内容在网格容器水平方向上的对齐方式。
    1. initial为默认，还可设为start（左对齐）、end（右对齐）、center（居中对齐）、space - between（两端对齐，中间间隔均匀）等 。
  4. align - content：控制整个网格内容在网格容器垂直方向上的对齐方式。
    1. initial是默认，也有start（顶对齐）、end（底对齐）、center（居中对齐）、space - between（上下两端对齐，中间间隔均匀 ）等选项。

6. Area Box（区域框）相关

  • width 和 height：用于设置网格区域（由grid - template - areas定义的区域 ）的宽度和高度。当前值为auto ，表示宽度和高度根据内容自动调整，也可设置固定值（如100px ）或百分比值（如50% ）等。

五、总结

    通过对 HTML 基础骨架的搭建，以及深入剖析 CSS Grid 各项属性（如定义行列尺寸、设置间距、隐式网格、网格放置、区域框等相关属性），我们能够利用 Kooboo 平台的 CSS Grid 代码生成工具，高效且精准地构建网页整体布局结构。这种可视化且功能丰富的布局方式，为打造美观、响应式的网页提供了有力支持，助力开发者更便捷地实现网页设计需求。

相关文章：

基于 CSS Grid 的网页，拆解页面整体布局结构

通过以下示例拆解网页整体布局结构&#xff1a; 一、基础结构&#xff08;HTML骨架&#xff09; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…...

编程日记 2025/9/11 9:15:17

华为云Astro轻应用创建业务对象(BO)的概念梳理

目录 一、业务对象（BO）是什么？——【详细概念解释】 二、形象理解业务对象（BO） 🍱 类比方式： 📦 举个具体例子：以做一个“智能烟雾报警系统”应用 三、为什么使用BO很重要？ 四、小结： 一、业务对象（BO）是什么？——【详细概念解释】 在华为云Astro轻应用…...

编程日记 2025/7/7 1:58:01

利用systemd启动部署在服务器上的web应用

0.背景 系统环境&#xff1a; Ubuntu 22.04 web应用情况&#xff1a; 前后端分类&#xff0c;前端采用react&#xff0c;后端采用fastapi 1.具体配置 1.1 前端配置 开发态运行&#xff08;启动命令是npm run dev&#xff09;,创建systemd服务文件 sudo nano /etc/systemd/…...

编程日记 2025/7/16 8:01:47

ArkUI Tab组件开发深度解析与应用指南

ArkUI Tab组件开发深度解析与应用指南 一、组件架构与核心能力 ArkUI的Tabs组件采用分层设计结构&#xff0c;由TabBar&#xff08;导航栏&#xff09;和TabContent&#xff08;内容区&#xff09;构成&#xff0c;支持底部、顶部、侧边三种导航布局模式。组件具备以下核心特…...

编程日记 2025/9/17 16:28:41

psotgresql18 源码编译安装

环境&#xff1a; 系统&#xff1a;centos7.9 数据库&#xff1a;postgresql18beta1 #PostgreSQL 18 已转向 DocBook XML 构建体系&#xff08;SGML 未来将被弃用&#xff09;。需要安装 XML 工具链&#xff0c;如下&#xff1a; yum install -y docbook5-style-xsl libxsl…...

编程日记 2025/9/8 14:51:29

虚幻引擎5-Unreal Engine笔记之Pawn与胶囊体的关系

虚幻引擎5-Unreal Engine笔记之Pawn与胶囊体的关系 code review! 文章目录 虚幻引擎5-Unreal Engine笔记之Pawn与胶囊体的关系1. 什么是Pawn&#xff1f;2. 什么是胶囊体&#xff08;Capsule Component&#xff09;&#xff1f;3. Pawn与胶囊体的具体关系&#xff08;1&#x…...

编程日记 2025/9/8 17:27:59

python创建flask项目

好的&#xff0c;我会为你提供一个使用 Flask、pg8000 和 Pandas 构建的后台基本框架&#xff0c;用于手机理财产品 App 的报表分析接口。这个框架将包含异常处理、模块化的结构以支持多人协作&#xff0c;以及交易分析和收益分析的示例接口。 项目结构: financial_report_ap…...

编程日记 2025/9/18 18:52:21

Vue环境下数据导出PDF的全面指南

文章目录 1. 前言2. 原生浏览器打印方案2.1 使用window.print()实现2.2 使用CSS Paged Media模块 3. 常用第三方库方案3.1 使用jsPDF3.2 使用html2canvas jsPDF3.3 使用pdfmake3.4 使用vue-pdf 4. 服务器端导出方案4.1 前端请求服务器生成PDF4.2 使用无头浏览器生成PDF 5. 方法…...

编程日记 2025/9/8 17:27:58

Linux中的DNS的安装与配置

DNS简介 DNS&#xff08;DomainNameSystem&#xff09;是互联网上的一项服务&#xff0c;它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网。 DNS使用的是53端口 通常DNS是以UDP这个较快速的数据传输协议来查询的&#xff0c;但是没有查…...

编程日记 2025/9/8 17:27:57

linux服务器与时间服务器同步时间

内网部署服务器&#xff0c;需要同步时间 使用系统内置的systemctl-timesyncd进行时间同步 1.编辑配置文件 sudo nano /etc/systemd/timesyncd.conf修改添加内容入下 [Time] NTP10.100.13.198 FallbackNTP#说明 #NTP10.100.13.198&#xff1a;你的主 NTP 时间服务器 IP #Fall…...

编程日记 2025/9/17 15:17:27

【数据结构篇】排序1（插入排序与选择排序）

注&#xff1a;本文以排升序为例 常见的排序算法&#xff1a; 目录&#xff1a; 一 直接插入排序&#xff1a; 1.1 基本思想&#xff1a; 1.2 代码&#xff1a; 1.3 复杂度&#xff1a; 二 希尔排序&#xff08;直接插入排序的优化&#xff09;&#xff1a; 2.1 基本思想…...

编程日记 2025/9/8 11:29:57

《Linux服务与安全管理》| DNS服务器安装和配置

《Linux服务与安全管理》| DNS服务器安装和配置 目录 《Linux服务与安全管理》| DNS服务器安装和配置 第一步&#xff1a;使用dnf命令安装BIND服务 第二步&#xff1a;查看服务器server01的网络配置 第三步&#xff1a;配置全局配置文件 第四步&#xff1a;修改bind的区域…...

编程日记 2025/9/18 19:48:24

【NLP】34. 数据专题：如何打造高质量训练数据集

构建大语言模型的秘密武器&#xff1a;如何打造高质量训练数据集&#xff1f; 在大语言模型&#xff08;LLM&#xff09;如 GPT、BERT、T5 爆发式发展的背后&#xff0c;我们常常关注模型架构的演化&#xff0c;却忽视了一个更基础也更关键的问题&#xff1a;训练数据从哪里来…...

编程日记 2025/6/21 8:33:23

Notepad++ 学习（三）使用python插件编写脚本：实现跳转指定标签页（自主研发）

目录 一、先看成果二、安装Python Script插件三、配置Python脚本四、使用脚本跳转标签页方法一&#xff1a;通过菜单运行方法二&#xff1a;设置快捷键&#xff08;推荐&#xff09; 五、注意事项六、进阶使用 官网地址&#xff1a; https://notepad-plus-plus.org/Python Scri…...

编程日记 2025/9/8 17:18:46

Stable Diffusion 学习笔记02

模型下载网站&#xff1a; 1&#xff0c;LiblibAI-哩布哩布AI - 中国领先的AI创作平台 2&#xff0c;Civitai: The Home of Open-Source Generative AI 模型的安装&#xff1a; 将下载的sd模型放置在sd1.5的文件内即可&#xff0c;重启客户端可用。 外挂VAE模型&#xff1a…...

编程日记 2025/9/8 17:27:58

python：pymysql概念、基本操作和注入问题讲解

python&#xff1a;pymysql分享目录 一、概念二、数据准备三、安装pymysql四、pymysql使用&#xff08;一&#xff09;使用步骤&#xff08;二&#xff09;查询操作&#xff08;三&#xff09;增&#xff08;四&#xff09;改&#xff08;五&#xff09;删 五、关于pymysql注入…...

编程日记 2025/9/8 14:46:29

Scala语言基础与函数式编程详解

Scala语言基础与函数式编程详解 本文系统梳理Scala语言基础、函数式编程核心、集合与迭代器、模式匹配、隐式机制、泛型与Spark实战&#xff0c;并对每个重要专业术语进行简明解释&#xff0c;配合实用记忆口诀与典型代码片段&#xff0c;助你高效学习和应用Scala。 目录 Scal…...

编程日记 2025/8/7 9:15:04

类的加载过程详解

类的加载过程详解 Java类的加载过程分为加载&#xff08;Loading&#xff09;、链接&#xff08;Linking&#xff09; 和 初始化&#xff08;Initialization&#xff09; 三个阶段。其中链接又分为验证&#xff08;Verification&#xff09;、准备&#xff08;Preparation&…...

编程日记 2025/6/4 23:57:39

机器学习-人与机器生数据的区分模型测试 - 模型融合与检验

模型融合 # 先用普通Pipeline训练 from sklearn.pipeline import Pipeline#from sklearn2pmml.pipeline import PMMLPipeline train_pipe Pipeline([(scaler, StandardScaler()),(ensemble, VotingClassifier(estimators[(rf, RandomForestClassifier(n_estimators200, max_de…...

编程日记 2025/9/8 17:29:31

机器学习 day03

文章目录 前言一、特征降维1.特征选择2.主成分分析&#xff08;PCA&#xff09; 二、KNN算法三、模型的保存与加载 前言 通过今天的学习&#xff0c;我掌握了机器学习中的特征降维的概念以及用法&#xff0c;KNN算法的基本原理及用法&#xff0c;模型的保存和加载 一、特征降维…...

编程日记 2025/9/8 17:28:01

《社交应用动态表情：RN与Flutter实战解码》

React Native依托于JavaScript和React&#xff0c;为动态表情的实现开辟了一条独特的道路。其核心优势在于对原生模块的便捷调用&#xff0c;这为动态表情的展示和交互提供了强大支持。在社交应用中&#xff0c;当用户点击发送动态表情时&#xff0c;React Native能够迅速调用相…...

编程日记 2025/8/6 3:40:53

嵌入式软件--stm32 DAY 6 USART串口通讯（下）

1.寄存器轮询_收发字符串 通过寄存器轮询方式实现了收发单个字节之后&#xff0c;我们趁热打铁&#xff0c;争上游&#xff0c;进阶到字符串。字符串就是多个字符。很明显可以循环收发单个字节实现。 然后就是接收字符串。如果接受单个字符的函数放在while里&#xff0c;它也可…...

编程日记 2025/9/13 10:44:53

问题处理——在ROS2(humble)+Gazebo+rqt下，无法显示仿真无人机的相机图像

文章目录 前言一、问题展示二、解决方法&#xff1a;1.下载对应版本的PX42.下载对应版本的Gazebo3.启动 总结 前言 在ROS2的环境下&#xff0c;进行无人机仿真的过程中&#xff0c;有时需要调取无人机的相机图像信息&#xff0c;但是使用rqt&#xff0c;却发现相机图像无法显示…...

编程日记 2025/9/8 13:47:41

69、微服务保姆教程（十二）容器化与云原生

容器化与云原生 在微服务架构中，容器化和云原生技术是将应用程序部署到生产环境的核心技术。通过容器化技术，可以将应用程序及其依赖项打包成一个容器镜像，确保在任何环境中都能一致运行。而云原生技术则通过自动化的容器编排系统（如 Kubernetes），实现应用的动态扩展、自…...

编程日记 2025/8/11 19:26:32

朱老师，3518e系列，第六季

第一节&#xff1a;概述。 首先是 将 他写好的 rtsp 源码上传&#xff0c;用于分析。 已经拷贝完。 第二节&#xff1a; h264 编码概念。 编解码 可以用cpu, 也可以用 bsp cpu 编解码的效果不好。做控制比较好。 h264 由 VCL&#xff0c; NAL 组成。 NAL 关心的是 压缩…...

编程日记 2025/9/18 10:04:14

ElasticSearch-集群

本篇文章依据ElasticSearch权威指南进行实操和记录 1&#xff0c;空集群 即不包含任何节点的集群 集群大多数分为两类&#xff0c;主节点和数据节点 主节点 职责&#xff1a;主节点负责管理集群的状态&#xff0c;例如分配分片、添加和删除节点、监控节点故障等。它们不直接…...

编程日记 2025/9/8 17:28:02

一文掌握工业相机选型计算

目录 一、基本概念 1.1 物方和像方 1.2 工作距离和视场 1.3 放大倍率 1.4 相机芯片尺寸 二、公式计算 三、实例应用 一、基本概念 1.1 物方和像方 在光学领域&#xff0c;物方&#xff08;Object Space&#xff09;是与像方&#xff08;Image Space&#xff09;相对的…...

编程日记 2025/9/10 5:37:01

记录心态和工作变化

忙中带闲的工作 其实工作挺忙的, 总是在赶各种功能点. 好巧的是iOS那边因为上架的问题耽搁了一些时间, 从而让Android的进度有了很大的调整空间. 更巧的是后端那边因为对客户端的需求不是很熟悉, 加上Android海外这块的业务他也是第一次接触. 所以需要给他留一些时间把各个环节…...

编程日记 2025/7/8 15:14:03

深入理解 TypeScript 中的 unknown 类型：安全处理未知数据的最佳实践

在 TypeScript 的类型体系中&#xff0c;unknown 是一个极具特色的类型。它与 any 看似相似&#xff0c;却在安全性上有着本质差异。本文将从设计理念、核心特性、使用场景及最佳实践等方面深入剖析 unknown&#xff0c;帮助开发者在处理动态数据时既能保持灵活性&#xff0c;又…...

编程日记 2025/9/3 13:12:52

LabVIEW机械振动信号分析与故障诊断

利用 LabVIEW 开发机械振动信号分析与故障诊断系统&#xff0c;融合小波变换、时频分布、高阶统计量&#xff08;双谱&#xff09;等先进信号处理技术&#xff0c;实现对齿轮、发动机等机械部件的非平稳非高斯振动信号的特征提取与故障诊断。系统通过虚拟仪器技术将理论算法转化…...

编程日记 2025/9/8 17:29:57