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

如何只用 CSS 制作网格？

news 2025/12/16 7:34:31

来源：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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/12/9 2:48:30

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/12/15 23:55:59

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/12/9 18:16:09

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/12/14 14:26:01

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/12/14 4:22:48

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/11/3 16:36:06

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2025/12/14 23:22:00