如何只用 CSS 制作网格?

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/55002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker简介、安装、基础知识

基础知识 Docker简介&#xff1a; 1.Docker是一种用于构建、发布及运行应用程序的开源项目&#xff0c;他通过容器化技术简化了应用程序的部署和管理 2.Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发&#xff0c;为应用打包、部署平台&#xff0c;而非单纯的虚…

【Redis技术进阶之路】「原理分析系列开篇」探索事件驱动枚型与数据特久化原理实现(数据持久化的实现RDB)

揭秘高效存储模型与数据结构底层实现 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 Redis数据持久化的必要Redis数据持久化的实现RDB的持久化机制RDB文件的创建与载入SAVEBGSAVESAVE与BGSA…

ceph pg rebalance

背景 1 个 osd full 超过 85% 使用率最近有大量的数据写入及数据删除操作$ ceph osd df tree | grep osd.158 ID CLASS WEIGHT REWEIGHT SIZE RAW USE DATA OMAP META AVAIL %USE VAR PGS STATUS TYPE NAME 15…

基于SpringBoot+Vue的社区智慧消防管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

Python数据分析和可视化详解

Python数据分析和可视化详解 Python 是当前最受欢迎的数据分析和可视化工具之一。凭借其简单的语法和强大的第三方库&#xff0c;Python 为数据科学家、分析师和工程师提供了广泛的工具&#xff0c;用于处理、分析和展示数据。本文将介绍如何使用 Python 进行数据分析与可视化…

Chocolatey升级

Chocolatey 是一个 Windows 平台上的包管理器&#xff0c;用于安装、升级、卸载和管理 Windows 软件包。关于 Chocolatey 的升级&#xff0c;主要包括以下几个方面&#xff1a; 1. 升级 Chocolatey 本身 为了确保能够使用最新的软件包和功能&#xff0c;建议定期升级 Chocola…

8.12 矢量图层面要素单一符号使用五(点符号填充)

8.12 矢量图层面要素单一符号使用五(点符号填充)_mapguide edit composite symbolization 使符号填充面-CSDN博客 目录 前言 点符号填充&#xff08;Point pattern fill&#xff09; QGis设置面符号为点符号填充&#xff08;Point pattern fill&#xff09; 二次开发代码实…

数学建模-线性规划讲解(Matlab版本)

引言 相信不少小伙伴刚开始接触数学建模时&#xff0c;第一个学习的算法就是运筹学的重要分支--数学规划&#xff0c;而数学规划当中重要的分支就是线性规划了。在这里笔者参考了司守奎和孙玺菁老师的《数学建模算法与应用》(第三版&#xff09;这本书&#xff0c;以此来讲讲关…

/etc/init.d/mysql

Since you’ve installed MySQL from source, you’ll need to create a custom init script to manage the MySQL server (start, stop, status) similarly to a service. Here’s a simple init.d script template for MySQL that you can use. This script assumes MySQL is…

leetcode刷题day33|动态规划Part02(62.不同路径、63. 不同路径 II、 343.整数拆分、96.不同的二叉搜索树)

62.不同路径 机器人从(0 , 0) 位置出发&#xff0c;到(m - 1, n - 1)终点。 动规五部曲 1、确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;到(i, j) 有dp[i][j]条不同的路…

【HTML5】html5开篇基础(3)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

多元函数微分学基础题

这是基础题&#xff01;&#xff01;原则上必须要在第一轮初学并做完课后习题之后再做这个基础题&#xff0c;不能有错误&#xff08;马虎大意除外&#xff09;或无法解答。如有错误&#xff0c;该单元需要重学&#xff01;&#xff01; 多元函数微分学填空题 一、填空题 如…

CentOS7查看时区、修改时区

使用 timedatectl 命令 推荐使用timedatectl来修改时区。如果没有timedatectl&#xff0c;可以用yum安装。 查看当前时区 timedatectl | grep "Time zone"列出所有时区 timedatectl list-timezones设置时区 sudo timedatectl set-timezone Asia/Shanghai/etc/lo…

在Pytorch中为不同层设置不同学习率来提升性能,优化深度学习模型

在深度学习模型的训练过程中&#xff0c;学习率作为一个关键的超参数&#xff0c;对模型的收敛速度和最终性能有着重大影响。传统方法通常采用统一的学习率&#xff0c;但随着研究的深入&#xff0c;我们发现为网络的不同层设置不同的学习率可能会带来显著的性能提升。本文将详…

基于Java的停车场管理微信小程序 停车场预约系统【源码+文档+讲解】

精彩专栏推荐订阅&#xff1a;在下方主页&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f496;&#x1f525;作者主页&#xff1a;计算机毕设木哥&#x1f525; &#x1f496; 文章目录 一、停车场管理微…

巴鲁夫rfid读头国产平替版——高频RFID读写器

随着RFID技术的不断发展&#xff0c;国内RFID企业的数量也在不断地变多&#xff0c;国产RFID读写器的质量也越来越高。具有着价格实惠、质量可靠等特点&#xff0c;成为了可平替国外RFID产品的首要选择。健永科技的高频RFID读写器JY-H830&#xff0c;是一款可平替巴鲁夫rfid读头…

基于SSM的“实习支教中小学学校信息管理系统”的设计与实现(源码+数据库+文档)

基于SSM的“实习支教中小学学校信息管理系统”的设计与实现&#xff08;源码数据库文档) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 主页 注册页面 师资力量界面 个…

分库分表方案中的数据倾斜问题及解决方案详解

引言 随着互联网业务的快速发展&#xff0c;数据量呈现出爆发式增长。在高并发、大数据量的场景下&#xff0c;单一数据库很难承载海量数据和请求压力。为此&#xff0c;分库分表成为一种常用的数据库架构优化方案。通过将数据水平切分到不同的数据库或表中&#xff0c;分库分…

机器学习(5):机器学习项目步骤(二)——收集数据与预处理

1. 数据收集与预处理的任务&#xff1f; 为机器学习模型提供好的“燃料” 2. 数据收集与预处理的分步骤&#xff1f; 收集数据-->数据可视化-->数据清洗-->特征工程-->构建特征集和数据集-->拆分数据集、验证集和测试集 3. 数据可视化工作&#xff1f; a. 作用&…

快速上手Cron表达式

参考&#xff1a;Cron - 在线Cron表达式生成器 (ciding.cc) 一、简介 Cron 表达式是一种用于指定定时任务执行时间的字符串表达式。它由 6 个字段组成&#xff0c;分别表示秒、分钟、小时、天数、月份和星期几。每个字段都可以使用特定的符号来指定时间范围或间隔。 ┌────…