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

如何只用 CSS 制作网格？

news 2025/10/30 0:34:16

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

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/10/26 16:33:24

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/24 15:26:57

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/10/24 9:31:39

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/10/24 16:08:31

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/10/28 2:48:05

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/10/22 9:03:10

Q1起重机指挥理论备考要点分析

Q1起重机指挥理论备考要点分析 一、考试重点内容概述 Q1起重机指挥理论考试主要包含三大核心模块&#xff1a;安全技术知识&#xff08;占40%&#xff09;、指挥信号规范&#xff08;占30%&#xff09;和法规标准&#xff08;占30%&#xff09;。考试采用百分制&#xff0c;8…...

编程新知 2025/9/21 22:30:35

【免杀】C2免杀技术（十五）shellcode混淆uuid/ipv6/mac

针对 shellcode 混淆（Shellcode Obfuscation） 的实战手段还有很多，如下表所示： 类型举例目的编码 / 加密XOR、AES、RC4、Base64、Poly1305、UUID、IP/MAC改变字节特征，避开静态签名或 YARA结构伪装PE Stub、GIF/PNG 嵌入、RTF OLE、UUID、IP/MAC看起来像合法文件/数据，弱…...

编程新知 2025/9/19 6:08:26

LeetCode 2894.分类求和并作差

目录 题目&#xff1a; 题目描述&#xff1a; 题目链接&#xff1a; 思路&#xff1a; 思路一详解&#xff08;遍历 判断&#xff09;&#xff1a; 思路二详解&#xff08;数学规律/公式&#xff09;&#xff1a; 代码&#xff1a; Java思路一&#xff08;遍历 判断&a…...

编程新知 2025/10/27 10:48:29