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

如何只用 CSS 制作网格？

news 2026/2/7 19:14:50

来源：how-to-make-a-grid-like-graph-paper-grid-with-just-css

在看 用于打印到纸张的 CSS 这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。

样式1

效果图：
在这里插入图片描述

样式代码：

<!DOCTYPE html>
<html>
<style>
html
{width: 100%;height: 100%;background-color: lightblue;background-size: 1cm 1cm;background-image:linear-gradient(to right, grey 1px, transparent 1px),linear-gradient(to bottom, grey 1px, transparent 1px);
}
</style>
<body><h1>Sample text</h1><h2>Sample text</h2><h3>Sample text</h3><h4>Sample text</h4><p>sample text</p><h1>示例文字</h1><h2>示例文字</h2><h3>示例文字</h3><h4>示例文字</h4><p>示例文字</p>
</body>
</html>

打印预览无边距时，选择A4纸时的尺寸和格子数量刚好一样，用这种背景比较方便做排版和套打，下图是打印后的效果：
在这里插入图片描述
和A4纸的尺寸 21.0 x 29.7厘米(8.27 x 11.69英寸) 是一致的。

样式2

效果图：
在这里插入图片描述

样式代码：

<!DOCTYPE html>
<html>
<style>
html
{width: 100%;height: 100%;background-color: lightblue;background-size: 40px 40px;background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
</style>
<body><h1>Sample text</h1><h2>Sample text</h2><h3>Sample text</h3><h4>Sample text</h4><p>sample text</p><h1>示例文字</h1><h2>示例文字</h2><h3>示例文字</h3><h4>示例文字</h4><p>示例文字</p>
</body>
</html>

样式3

效果图：
在这里插入图片描述

样式代码：

<!DOCTYPE html>
<html>
<style>
html
{width: 100%;height: 100%;background-color: lightblue;background:linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),linear-gradient(-90deg, #aaa 1px, transparent 1px),linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),linear-gradient(#aaa 1px, transparent 1px),#f2f2f2;background-size:4px 4px,4px 4px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px;
}
</style>
<body><h1>Sample text</h1><h2>Sample text</h2><h3>Sample text</h3><h4>Sample text</h4><p>sample text</p><h1>示例文字</h1><h2>示例文字</h2><h3>示例文字</h3><h4>示例文字</h4><p>示例文字</p>
</body>
</html>

样式4

效果图：
在这里插入图片描述

样式代码：

<!DOCTYPE html>
<html>
<style>
html
{width: 100%;height: 100%;background-color: lightblue;--grid-size: 30px;--grid-strength: 1px;--grid-dash: 10px;--grid-gap: 5px;--grid-color: #ddd;--paper-color: #fff;background-color: var(--paper-color);background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);background-image:linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));}
</style>
<body><h1>Sample text</h1><h2>Sample text</h2><h3>Sample text</h3><h4>Sample text</h4><p>sample text</p><h1>示例文字</h1><h2>示例文字</h2><h3>示例文字</h3><h4>示例文字</h4><p>示例文字</p>
</body>
</html>

相关文章：

如何只用 CSS 制作网格？

来源&#xff1a;how-to-make-a-grid-like-graph-paper-grid-with-just-css 在看 用于打印到纸张的 CSS 这篇文章时&#xff0c;对其中的网格比较好奇&#xff0c;作者提供了 stackoverflow 的链接&#xff0c;就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较…...

编程日记 2024/10/2 18:23:37

Linux安装RabbitMQ安装

1. RabbitMQ介绍 1.1 RabbitMQ关键特性 异步消息传递&#xff1a;允许应用程序在不直接进行网络调用的情况下交换消息。 可靠性&#xff1a;支持消息持久化&#xff0c;确保消息不会在系统故障时丢失。 灵活的路由&#xff1a;支持多种路由选项&#xff0c;包括直接、主题、…...

编程日记 2024/10/2 18:22:36

SpringBoot驱动的社区医院信息管理平台

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理社区医院信息平台的相关信息成为必然。开发…...

编程日记 2024/10/2 18:21:35

MyBatis-Plus如何分页查询？

MyBatis-Plus提供了一种简单而强大的分页查询功能&#xff0c;可以通过使用Page对象和Mapper接口中的方法来实现。以下是分页查询的基本步骤&#xff1a; 添加分页插件依赖 确保你的项目中已经添加了MyBatis-Plus的分页插件依赖。 <dependency><groupId>com.bao…...

编程日记 2024/10/2 18:20:34

云原生之容器编排实践-OpenEuler23.09离线安装Kubernetes与KubeSphere

背景 有互联网的日子确实美好&#xff0c;不过有时候&#xff0c;仅仅是有时候&#xff0c;你可能会面临离线部署 Kubernetes 与 KubeSphere 集群的要求。。 我们借助由青云开源的容器平台&#xff0c; KubeSphere 来进行可视化的服务部署。 KubeSphere 是在 Kubernetes 之上…...

编程日记 2024/10/2 18:17:32

构建企业数字化转型的战略基石——TOGAF框架的深度解析

数字化时代的企业变革需求 在全球范围内&#xff0c;数字化转型已成为企业提高竞争力、优化运营流程、提升客户体验的核心战略。数字技术的迅猛发展&#xff0c;不仅改变了传统行业的运作模式&#xff0c;也迫使企业重新思考其业务架构和技术基础设施。TOGAF&#xff08;The O…...

编程日记 2024/10/2 18:16:30

docker -私有镜像仓库 - harbor安装

文章目录 1、镜像仓库简介2、Harbor简介3、下载与安装3.1、下载3.2、安装3.2.1、上传harbor-offline-installer-v2.8.2.tgz到虚拟机中解压并修改配置文件3.2.2、解压tgz包3.2.3、切换到解压缩后的目录下3.2.4、准备配置文件3.2.5、修改配置文件 4、启动Harbor5、启动关闭命令6、…...

编程日记 2024/10/2 18:15:29

头号积木玩家——软件工程专业职业生涯规划报告

说明&#xff1a;本报告为博主在浙江科技学院&#xff08;现浙江科技大学&#xff09;就读软件工程本科专业时&#xff0c;在必修课程《计算机导论》中撰写的报告。&#xff08;报告主体2021年11月定稿&#xff0c;有删改&#xff09; 标题说明&#xff1a;在电影《头号玩家》…...

编程日记 2024/10/2 18:13:27

Redis（初步认识和安装)

初识Redis 认识NoSQLSQL结构化&#xff1a;structure关联的&#xff1a;RelationalSQL查询ACID NoSQL非结构化无关联的非SQLBASE 认识Redis安装Redis 认识NoSQL SQL和NoSQL比较 SQL 结构化&#xff1a;structure 数据库中表的字段都有固定的结构 关联的&#xff1a;Relati…...

编程日记 2024/10/2 18:11:25

计算机网络：计算机网络概述：网络、互联网与因特网的区别

文章目录 网络、互联网与因特网的区别网络分类 互联网因特网基于 ISP 的多层次结构的互连网络因特网的标准化工作因特网管理机构因特网的组成 网络、互联网与因特网的区别 若干节点和链路互连形成网络&#xff0c;若干网络通过路由器互连形成互联网 互联网是全球范围内的网络…...

编程日记 2024/10/2 18:09:23

网络编程套接字TCP

前集回顾 上一篇博客中我们写了一个UDP的echo server&#xff0c;是一个回显服务器&#xff1a;请求是啥&#xff0c;响应就是啥 一个正常的服务器&#xff0c;要做三个事情&#xff1a; 读取请求并解析根据请求&#xff0c;计算响应把响应写回到客户端 DatagramPacket res…...

编程日记 2024/10/2 18:03:14

Git

Git-2.34.1-64-bitGit-2.34.1-64-bitTortoiseGit-2.4.0.2-64bitTortoiseGit-LanguagePack-2.4.0.0-64bit-zh_CN 下载Git-2.34.1-64-bit、TortoiseGit-2.4.0.2-64bit、TortoiseGit-LanguagePack-2.4.0.0-64bit-zh_CN&#xff0c;依次安装。 # 配置本地Git的用户名与邮箱 git c…...

编程日记 2024/10/2 18:01:13

【日常记录】现在遇到的Y7000P亮度无法调节问题，无需改动注册表进行调整的方法。

1、winR 2、输入&#xff1a;services.msc 3、找到下面红框内的服务 4、右键后&#xff0c;点击重启任务&#xff0c;重启任务后&#xff0c;再次按热键即可恢复亮度调节。...

编程日记 2024/10/2 17:57:09

ubuntu20.04.6 触摸屏一体机，外接视频流盒子开机输入登录密码触屏失灵问题解决方法

1. 首先直接运行xrandr命令&#xff0c;查看设备的相关信息&#xff1a; 运行之后会显示当前连接设备的屏幕信息&#xff0c;如下图&#xff0c;LVDS和VGA-0&#xff0c;而HDMI屏幕为disconnect&#xff0c;意为没有连接&#xff1a; 2. 设置开机主屏幕显示&#xff1a; xrand…...

编程日记 2024/10/2 17:54:06

师生健康信息管理：SpringBoot技术指南

第3章 系统分析 3.1 需求分析 师生健康信息管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性&#xff0c;…...

编程日记 2024/10/2 17:52:03

手机/平板端 Wallpaper 动态壁纸文件获取及白嫖使用指南

Wallpaper 动态壁纸文件获取及使用指南 目录 壁纸文件获取手机 / 平板使用手机 / 平板效果预览注意事项PC/Mac 使用 1. 壁纸文件获取链接 链接&#xff1a;夸克网盘分享 复制链接到浏览器打开并转存下载即可。 &#xff08;主页往期视频的 4K 原图和 mpkg 动态壁纸文件&#xf…...

编程日记 2024/10/2 17:51:02

【软件工程】模块化思想概述

一、定义 模块化&#xff08;modularization&#xff09;&#xff0c;也称为模组化&#xff0c;是产品设计以及项目管理中被广泛使用的一种设计理念。 模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程&#xff0c;有多种属性&#xff0c;分别反映其内部…...

编程日记 2024/10/2 17:49:00

解决方案：机器学习中，出现欠拟合和过拟合，这两种情况分别如何解决

文章目录 一、现象二、解决方案欠拟合&#xff08;Underfitting&#xff09;过拟合&#xff08;Overfitting&#xff09; 一、现象 在工作中&#xff0c;在机器学习中&#xff0c;出现欠拟合和过拟合的时候&#xff0c;需要有对应的解决方法&#xff0c;所以整理一下 二、解决…...

编程日记 2024/10/2 17:47:59

腾讯 25 届秋招算法工程师面经

最近已有不少大厂都在秋招宣讲了&#xff0c;也有一些在 Offer 发放阶段。 节前&#xff0c;我们邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点、大模型技术趋势、算法项目落地经验分享等热门话题进行了…...

编程日记 2024/10/2 17:43:55

MySQL 实验1：Windows 环境下 MySQL5.5 安装与配置

MySQL 实验1&#xff1a;Windows 环境下 MySQL5.5 安装与配置 目录 MySQL 实验1&#xff1a;Windows 环境下 MySQL5.5 安装与配置一、MySQL 软件的下载二、安装 MySQL三、配置 MySQL1、配置环境变量2、安装并启动 MySQL 服务3、设置 MySQL 字符集4、为 root 用户设置登录密码 一…...

编程日记 2024/10/2 17:41:52

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/5 21:09:35

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/1 1:28:58