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

网格布局 HTML CSS grid layout demo

news 文章来源：https://blog.csdn.net/wuyujin1997/article/details/140648533 2025/4/6 16:31:20

文章目录

    • 页面效果
    • 代码 (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

sklearn聚类算法用于图片压缩与图片颜色直方图分类

上期文章：机器学习之SKlearn（scikit-learn）的K-means聚类算法 我们分享了sklearn的基本知识与基本的聚类算法，这里主要是机器学习的算法思想，前期文章我们也分享过人工智能的深度学习，二者有如何区别，可以先参考如下几个实例来看看机器学习是如何操作的 不同K值下的聚…...

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

Llama 3.1要来啦？！测试性能战胜GPT-4o

哎呀&#xff0c;Meta声称将于今晚发布的Llama 3.1&#xff0c;数小时前就在Hugging Face上泄露出来了&#xff1f;泄露的人很有可能是Meta员工&#xff1f; 还是先来看泄露出来的llama3.1吧。新的Llama 3.1模型包括8B、70B、405B三个版本。 而经过网友测试&#xff0c;该base…...

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

C++使用opencv处理图像阴影部分

1. 直方图均衡化 直方图均衡化是一种增强图像对比度的方法&#xff0c;可以通过均衡化图像的灰度级分布来改善图像中阴影部分的亮度。 #include <opencv2/opencv.hpp>using namespace cv;int main() {// 读取图像Mat image imread("input_image.jpg", IMREA…...

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

4.Java Web开发模式(javaBean+servlet+MVC)

Java Web开发模式 一、Java Web开发模式 1.javaBean简介 JavaBeans是Java中一种特殊的类&#xff0c;可以将多个对象封装到一个对象&#xff08;bean&#xff09;中。特点是可序列化&#xff0c;提供无参构造器&#xff0c;提供getter方法和setter方法访问对象的属性。名称中…...

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

centos7 mysql 基本测试（6）主从简单测试

centos7 xtrabackup mysql 基本测试&#xff08;6&#xff09;主从简单测试 mysql -u etc -p 1234aA~1 参考&#xff1a; centos7 时区设置 时间同步 https://blog.csdn.net/wowocpp/article/details/135931129 Mysql数据库&#xff1a;主从复制与读写分离 https://blog.csd…...

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

信息安全工程师题

防火墙安全策略有两种类型&#xff1a;白名单策略、黑名单策略白名单策略&#xff1a;只允许符合安全规则的包通过防火墙&#xff0c;其他通信包禁止黑名单策略&#xff1a;禁止与安全规则相冲突的包通过防火墙&#xff0c;其他通信包允许实现网络地址转换的方式主要有静态NAT、…...

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

springcloud rocketmq 新增的消费者组从哪里开始消费

如果新建一个新的消费者组&#xff0c;是否会消费历史消息&#xff0c;导致重复消费&#xff1f; 直接在 console 界面新增消费者组&#xff0c;但是没有办法绑定订阅关系&#xff0c;没有找到入口&#xff0c;在 控制台项目源码 rocketmq-externals 也没有找到可以确定订阅关系…...

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

Redis-缓存

什么是缓存&#xff1f; 缓存就像自行车和越野车的避震器&#xff0c;降低硬着陆造成的损害 缓存就是系统的避震器&#xff0c;,防止过高的数据访问猛冲系统,导致其操作线程无法及时处理信息而瘫痪 缓存(Cache),就是数据交换的缓冲区,俗称的缓存就是缓冲区内的数据,一般从数…...

编程日记 2024/7/27 22:07:46

MySQL练习05

题目 步骤 触发器 use mydb16_trigger; #使用数据库create table goods( gid char(8) primary key, name varchar(10), price decimal(8,2), num int);create table orders( oid int primary key auto_increment, gid char(10) not null, name varchar(10), price decima…...

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

[C++][STL源码剖析] 详解AVL树的实现

目录 1.概念 2.实现 2.1 初始化 2.2 插入 2.2.1 旋转&#xff08;重点&#xff09; 左单旋 右单旋 双旋 2.❗ 双旋后&#xff0c;对平衡因子的处理 2.3 判断测试 完整代码&#xff1a; 拓展&#xff1a;删除 1.概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但…...

编程日记 2024/7/27 22:04:42