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

网格布局 HTML CSS grid layout demo

news 2026/2/8 14:56:13

文章目录

    • 页面效果
    • 代码 (HTML + CSS)
    • 参考

页面效果

在这里插入图片描述

代码 (HTML + CSS)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格布局 grid layout demo wuyujin1997</title><style>* {outline: auto;}.fill_parent {min-height: 60vh;max-width: 90%;}.grid_container > div {background-color: pink;/* 左右居中 */text-align: center;/* 上下居中 */align-content: center;}.item_header { grid-area: a; }.item_left_menu { grid-area: c; }.item_main_content { grid-area: d; }.item_right { grid-area: e; }.item_footer { grid-area: b; }.grid_container {display: grid;/* grid 或 grid-template-areas 都可以 */grid-template-areas:'a a a a a''c d d d e''c d d d e''b b b b b';grid-gap: 10px;background-color: gray;}</style>
</head>
<body><p>start p</p><div class="grid_container fill_parent"><div class="item_header"><span>header content</span></div><div class="item_left_menu"><span>left_menu content</span></div><div class="item_main_content"><span>main_content content</span></div><div class="item_right"><span>right content</span></div><div class="item_footer"><span>footer content</span></div></div><p>end   p</p></body>
</html>

参考

  • CSS grid layout
  • grid-area
  • grid-template-areas

相关文章：

网格布局 HTML CSS grid layout demo

文章目录 页面效果代码 (HTML CSS)参考 页面效果 代码 (HTML CSS) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2024/7/27 23:13:54

Java算法之递归算法-如何计算阶乘的值

上一篇学了递归之后&#xff0c;练习一下递归算法。 题目&#xff1a;使用递归算法计算阶乘的值&#xff0c;也就是5&#xff01;5*4*3*2*1&#xff0c;直接使用循环是非常简单的&#xff0c;这边练习一下递归算法。 先写一下两个条件 基线条件&#xff1a;等于1的时候返回1…...

编程日记 2024/7/27 23:11:52

python爬虫入门小案例

python爬虫 以下内容仅供学习交流,请勿用作其他用途,若涉及隐私和版权问题,请及时联系我删除 闲来无事,学了学爬虫小知识,适合入门,文笔拙劣,还望见谅 爬虫是什么: 爬取网页上的文字,图片,视频,音频 自动化操作浏览器,比如填写表单,打卡,提高工作效率爬虫的注意事项: 爬虫…...

编程日记 2024/7/27 23:07:48

【昇腾AI创新大赛集训营南京站学习笔记】-Ascend算子开发课程

昇腾AI创新大赛训练营 14:00-14:30 基础知识-理论课 一、CANN 、达芬奇架构和算子 1.AI Core逻辑架构 达芬奇架构包含三部分&#xff1a; 1&#xff09;计算类&#xff1a;矩阵计算单元&#xff08;两个矩阵扔进去相乘&#xff09;、向量计算单元、标量计算单元 2&#xff09;控…...

编程日记 2024/7/27 23:05:46

系统架构设计师教程 第4章 信息安全技术基础知识-4.5 密钥管理技术4.6 访问控制及数字签名技术-解读

系统架构设计师教程 第4章 信息安全技术基础知识-4.5 密钥管理技术&4.6 访问控制及数字签名技术 4.5　密钥管理技术4.5.1　对称密钥的分配与管理4.5.1.1 密钥的使用控制4.5.1.1.1 密钥标签4.5.1.1.2 控制矢量4.5.1.2 密钥的分配4.5.1.2.1物理方式14.5.1.2.2 物理方式24.5.1…...

编程日记 2024/7/27 23:02:43

C语言日常练习Day13

目录 一、设半径r1.5&#xff0c;圆柱高h3&#xff0c;求圆周长、圆面积、圆球表面积、圆球体积、圆柱体积 二、编写程序&#xff0c;用getchar函数读入两个字符给c1,c2&#xff0c;然后分别用putchar函数和printf函数输出这两个字符 三、输入4个整数&#xff0c;要求按由小…...

编程日记 2024/7/27 22:59:41

map、foreach、filter这些方法你还不知道什么时候该用哪个吗？那就看过来

forEach&#xff1a;‌主要用于遍历数组并对每个元素执行某种操作&#xff0c;‌通常用于改变当前数组里的值。‌它不会返回新数组&#xff0c;‌而是直接在原数组上进行操作。‌forEach方法不支持return、‌break、‌continue等语句&#xff0c;‌因为这些语句在forEach中不会…...

编程日记 2024/7/27 22:58:40

6.3 面向对象技术-设计模式

设计模式 创建型模式 结构型模式...

编程日记 2024/7/27 22:57:39

Mac 中安装内网穿透工具ngrok

ngrok 是什么&#xff1f; Ngrok 是一个网络工具&#xff0c;主要用于在网络中创建从公共互联网到私有或本地网络中运行的web服务的安全隧道。它充当了一个反向代理&#xff0c;允许外部用户通过公共可访问的URL访问位于防火墙或私有网络中的web应用程序或服务。Ngrok 特别适用…...

编程日记 2024/7/27 22:56:37

python count返回什么

描述 count() 方法用于统计字符串中某个子字符串出现的次数&#xff0c;可选参数为开始搜索与结束搜索的位置索引。 语法 count() 方法语法&#xff1a; S.count(sub[,start0[,endlen(S)]]) 参数 sub -- 搜索的子字符串。 S -- 父字符串。 start -- 可选参数&#xff0c;…...

编程日记 2024/7/27 22:54:34

mac清理软件哪个好用免费 MacBook电脑清理软件推荐 怎么清理mac

随着使用时间的增长&#xff0c;mac电脑会积累一些不必要的垃圾文件&#xff0c;这些文件会占用宝贵的存储空间&#xff0c;影响电脑的运行速度和稳定性。因此&#xff0c;定期清理mac电脑的垃圾文件是非常有必要的。市场上有许多优秀的Mac清理软件&#xff0c;包括一些出色的国…...

编程日记 2024/7/27 22:51:32

学生党百元蓝牙耳机哪个性价比高？精选四款超强性价比耳机型号

现阶段&#xff0c;蓝牙耳机技术逐渐成熟&#xff0c;蓝牙耳机在我们的学习和娱乐中承担着很重要的角色&#xff0c;那么在面对众多品牌和型号中&#xff0c;学生党们在选择蓝牙耳机上纠结不已&#xff0c;到底学生党百元蓝牙耳机哪个性价比高&#xff1f;作为一个蓝牙耳机重度…...

编程日记 2024/7/27 22:50:31

中文之美，美在辞藻富丽，也美在情感含蓄内敛。

文章目录 引言句句不提幸福，句句都是幸福句句不提释怀，句句都是释怀句句不提爱意，句句都是爱意句句不提安慰，句句都是安慰句句不提遗憾，句句都是遗憾句句不提思念，句句都是思念引言 许多句子没有将主题直抒胸臆，却通过字词间的呼应、碰撞，让人感受到“言未表而意无穷”…...

编程日记 2024/7/27 22:48:28

FPGA与ASIC：深入解析芯片设计的双子星

前言 在半导体世界里&#xff0c;FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;与ASIC&#xff08;Application-Specific Integrated Circuit&#xff0c;专用集成电路&#xff09;是两种截然不同的芯片设计策略&#xff0c;各自在…...

编程日记 2024/7/27 22:45:25

深入 Symfony 服务容器：依赖注入的艺术

“深入 Symfony 服务容器&#xff1a;依赖注入的艺术” 是一个涵盖了 Symfony 服务容器核心概念和依赖注入机制的复杂话题。为了全面理解 Symfony 服务容器的运作&#xff0c;我们将详细探讨以下几个方面&#xff1a; 服务容器的概念和作用依赖注入的基本原理Symfony 服务容器…...

编程日记 2024/7/27 22:44:24

基于Java+SpringMvc+Vue技术的慈善捐赠平台设计与实现(源码+LW+部署讲解)

项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑&#xff01; 软件开发环境及开发工具&#xff1a; 操作系统&#xff1a;Windows 10、Windows 7、Windows 8 开发语言&#xff1a;java 前端技术&#xff1a;JavaScript、VUE.j…...

编程日记 2024/7/27 22:38:18

dsp c6657 SYS/BIOS学习笔记

1 SYS/BIOS简介 SYS/BIOS是一种用于TI的DSP平台的嵌入式操作系统&#xff08;RTOS&#xff09;。 2 任务 2.1 任务调度 SYS/BIOS任务线程有0-31个优先级&#xff08;默认0-15&#xff0c;优先级0被空闲线程使用&#xff0c;任务最低优先级为1&#xff0c;最高优先级为15&am…...

编程日记 2024/7/27 22:37:17

分布式搜索引擎ES-DSL搜索详解

1.DSL搜索-入门语法 建立索引&#xff1a; xxx(自定义名称) 自定义mapping: POST /shop/_mapping {"properties": {"id": {"type": "long"},"age": {"type": "integer"},"username": {&quo…...

编程日记 2024/7/27 22:36:16

vue zip文件下载请求封装与使用

axios封装&#xff08;重点是响应拦截&#xff09; 这里把响应超时时间注释是文件下载接口返回需要较长时间 import axios from axios import {ElMessageBox} from "element-plus"; import router from "/router";const service axios.create({baseURL: …...

编程日记 2024/7/27 22:35:15

Windows波形音频MMEAPI简介

Windows波形音频MMEAPI简介 使用MMEAPI时需要导入头文件&#xff1a;#include<mmeapi.h> mmeapi.h文件的主要内容 mmeapi.h 文件是 Windows 多媒体 API 的一部分&#xff0c;主要用于处理波形音频&#xff08;Waveform Audio&#xff09;的输入和输出。以下是该文件的…...

编程日记 2024/7/27 22:34:14

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/7 23:18:37

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/5 4:39:34

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00