css html 高仿word 格式，制作的可编辑的微软Word样式文档 HTML-Sheets-of-Paper

最新推荐文章于 2023-09-23 17:23:39 发布
最新推荐文章于 2023-09-23 17:23:39 发布
阅读量4.9k 收藏 9
点赞数
分类专栏： 架构 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelin042/article/details/105372213
版权

这是一款使用HTML和CSS3制作的可编辑的微软Word样式文档。该特效提供一组预定义的样式，用于在WEB页面中生成各种尺寸的Word样式的文档效果。它提供的样式包括：

  • sheets-of-paper-a4.css：A4纸(21cm × 29.7cm)
  • sheets-of-paper-a3.css：A3纸(29.7cm × 42cm)
  • sheets-of-paper-usletter.css：US letter(21.6cm × 27.9cm)
  • sheets-of-paper-uslegal.css：US legal(21.6cm × 35.6cm)
  • sheets-of-paper-ustabloid.css：US tabloid(27.9cm × 43.2cm)

 使用方法

在页面中引入你需要的尺寸的样式文件，如使用A4纸则引入sheets-of-paper-a4.css文件。


<!DOCTYPE html>
<!--
 * HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper)
 * Copyright (c) delight.im (https://www.delight.im/)
 * Licensed under the MIT License (https://opensource.org/licenses/MIT)
-->
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="Emulating real sheets of paper in web documents (using HTML and CSS)">
		<title>Sheets of Paper</title>
		<link rel="stylesheet" type="text/css" href="css/sheets-of-paper-a4.css">
	</head>
	<body class="document">
		<div class="page" contenteditable="true">
			<p>First <code>.page</code> element</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		</div>
		<div class="page" contenteditable="true">
			<p>Second <code>.page</code> element</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
			<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<div class="page-break" contenteditable="false"></div>
			<p>This sentence is preceded by a manual page break:<br />&nbsp;&nbsp;&nbsp;&nbsp;<code>&lt;div class="page-break" contenteditable="false"&gt;&lt;/div&gt;</code></p>
			<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
			<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
		<script type="text/javascript">
		// window.print();
		</script>
	</body>
</html>

下载：下载地址：

东边的小山
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML和CSS3制作的可编辑的微软Word样式文档
04-09
HTML和CSS3制作的可编辑的微软Word样式文档。该特效提供一组预定义的样式，用于在WEB页面中生成各种尺寸的Word样式的文档效果。它提供的样式包括： sheets-of-paper-a4.css：A4纸(21cm × 29.7cm) sheets-of-paper-a3.css：A3纸(29.7cm × 42cm) sheets-of-paper-usletter.css：US letter(21.6cm × 27.9cm) sheets-of-paper-uslegal.css：US legal(21.6cm × 35.6cm) sheets-of-paper-ustabloid.css：US tabloid(27.9cm × 43.2cm)
HTML 页面实现A4纸样式 显示效果
11-01
HTML 页面样式实现类似A4纸张页面效果，看起来像word文档
html页面仿word文档样式（vue页面也适用）
最新发布
夏日漱石的博客
09-23 568
html页面仿word文档样式（vue页面也适用）
html做的word申请表（样式）
liusaint1992的专栏
06-18 1万+
公司项目需求中要做用html做一个word申请表的样式出来。有点意思，贴上来大家看看。
HTML-And-JavaScript-Website:为JeeRank保存所有HTML和JavaScript代码
04-11
HTML和JavaScript网站 为JeeRank保存所有HTML和JavaScript代码
html+css 实现类似word目录效果并生成pdf
极飞的专栏
10-06 752
html+css实现类似word目录样式并生成pdf。
如何用 html 做出 word 表格的效果
每天进步一点点儿
11-09 6511
要做出word表格的效果，其实主要就在文本输入框这么处理的问题，如果把文本输入框不加边框并且整个单元格都可以点击就行，还要兼顾web端和手机端浏览器的效果。为此，可以使用如下样式： .myInput{ width: 100%; height: 100%; border: none; float: left; zoom:1; outline: m...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
weixin_27645199的博客
06-09 1724
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<要求不再浏览器中添加office插件的前提下。展示WORD文档中的内容要求一一对应。经过查询资料以及调整，得出如下相关资料：1标题样式：目录--宋体小二加粗一级标题--微软雅黑四号加粗1XXX二级标题--微软雅黑小四加粗1....
Jquery.Print实现表格打印
勤劳的代码搬运工
12-07 1616
使用Jquery.Print.JS进行自定义表格打印，功能包含分页打印。 1、样式以及引用js 备注：使用样式对页眉页脚进行隐藏 <style media="print"> @@page { margin: 0mm auto; size: auto; } </style> <link href="/css/word/sheets-of-paper.css" rel="styles...
html在线编辑器，模仿word，很简单很好用
youngerhao的专栏
09-15 1万+
今天，我做了一个html在线编辑器，样子就是模仿的word里面的工具，代码很简单的，而且很实用。下面我给大家说一下。     大家在网上搜索fckeditor的压缩包，下载好了以后解压出来，把它放到你的根目录里。接下来我们写下如下代码：     "disp.php" m
form-to-google-sheets:将HTML表单提交的文件存储在Google表格中
04-28
提交表单至Google表格| 如何使用普通的'ol JavaScript（ES6）， ， 和创建HTML表单，以将提交的表单数据存储在Google表格中。 1.创建一个新的Google表格 首先，转到然后使用Blank模板Start a new spreadsheet 。 将其重命名为“ Email Subscribers 。 无论如何，都没关系。 将以下标题放入第一行： 一种 乙 C ... 1个 时间戳记 电子邮件 要了解如何添加其他输入字段，请。 2.创建一个Google Apps脚本 单击Tools > Script Editor… ，这将打开一个新选项卡。 将其重命名为“将Submit Form to Google Sheets 。 在编辑脚本之前，请确保等待它实际保存和更新标题。 现在，在Code.gs标签中删除function myFunction() {}块。
placekey-googlesheets-addon:用于 Placekey 的 Google 表格插件
05-29
Placekey Google 表格插件 Placekey 是适用于任何物理地点的免费通用标准标识符。 这个 Google Sheets Add-on 可以很容易地为您的地址或 POI 数据生成 Placekeys。 完整文件 安装 从以下位置安装 Placekey Google Sheets Add-on： ://gsuite.google.com/marketplace/app/placekey/611255445050 用法 将您的地址或兴趣点信息导入到新的 Google 表格中。 或者做一个空白的来试验。 单击附加组件 -> Placekey -> 生成 Placekeys。 输入您的 API 密钥。 如果您没有，请在获取一个免费的 API 密钥。 将您的列映射到 API 字段并单击 Generate Placekeys。 贡献 拉请求是受欢迎的。 对于重大更改，请先打开一个问题
freeCodeCamp-HTML-CSS-Projects
05-23
freeCodeCamp-HTML-CSS-Projects 概述 欢迎陌生人！ 这是我在freeCodeCamp上HTML / CSS模块项目的git回购。 我是新来的，所以我很乐意收到建议和建议 项目清单 致敬页 调查表格 产品着陆页 技术文档页面 个人投资组合页面 内容描述 致敬页 这是我最喜欢的第一门编程语言Guido van Rossum的创建者致敬的页面。 多亏了他出色的工作，我才能迈出2020年冬季编码之旅的第一步。因此，我想创建这个网站来感谢他。 调查表格 这是我为MOSCED计算器调查所复制的Google表单。 除了基本元素之外，我还尝试通过更多功能更好地对其进行自定义。 产品着陆页 这是我的页面，向您介绍我在胡志明市（西贡）最喜欢的菜肴。 这些绝对是我记得在这里出国学习最多的食物。 技术文档页面 我已经完成了向Python初学者介绍数据结构的页面。 我对此的所有信息均来
css实现Word样式
01-18
css3 实现word样式 UI HTML 下载下来点击index页面既可以查看,纯前端代码！开箱就能用，也可以直接引入.page类中的class到自己的页面中。
像word的 HTML文本编辑器
03-20
HTML文本编辑器，功能强大，有像word一样的编辑区域，纯JS编写，小巧轻便，可以按自己所需要的定义编辑区域。
使用moment.js轻松管理日期和时间
热门推荐
书写人生
09-07 3万+
moment.js不依赖任何第三方库，支持字符串、Date、时间戳以及数组等格式，可以像PHP的date()函数一样，格式化日期时间，计算相对时间，获取特定时间后的日期时间等等，本文有如下举例。 格式化日期 当前时间： moment().format('YYYY-MM-DD HH:mm:ss'); //2014-09-24 23:36:09  今天是星期几： moment()
jQuery中JSONP的两种实现方式
书写人生
09-19 8819
$(function () { alert("start..."); // 第一种方式 $.ajax({ type: "get", url: "http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址，这里单纯
使用vue开发微信公众号，解决微信缓存
书写人生
03-26 7684
1.页面加入标红的代码，让页面不缓存&lt;!DOCTYPE html&gt;&lt;html manifest="IGNORE.manifest"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width,initial-scale=
picker 只显示年份或者只显示年月
书写人生
06-02 6668
只显示年份 var date = new Date() var month = date.getMonth()+1　　//获取当前月份 $('#time').picker({ toolbarTemplate:'<div class="toolbar"><div class="toolbar-inner"><a href="j...
sheets-of-paper-a4
09-08
A4纸是一种常见的纸张尺寸，它的尺寸是210毫米× 297毫米。A4纸通常被用于许多不同的应用，比如打印文件、书写笔记、绘画等等。 A4纸的长宽比是1: √2，这使得它成为了国际标准纸张尺寸ISO 216的一部分。除了一些特定的国家或地区可能使用其他尺寸的纸张，大多数国家都使用A4纸作为标准尺寸。 A4纸通常被分为许多单独的纸张，也就是"sheets of paper"。这些纸张可以被用来打印文件、备份重要信息、书写文稿等等。它们也可以被用作传统的纸张手工制作，比如折纸、剪纸等等。 A4纸是一种方便易用的纸张尺寸，因为它的大小适中，可以容纳大多数文件内容。此外，A4纸还具有较高的透明度和适度的厚度，使得打印的文字和图像清晰可见。 总的来说，A4纸是一种广泛使用的纸张尺寸，它适用于各种不同的应用。无论是在办公室、学校还是家庭，A4纸都是一种实用的工具，可以帮助我们记录信息、传达思想和实现创意。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值