利用记事本编写html代码和word实现A4信笺纸（信签纸）电子版的两种设计法

以前会议记录，申请书写等场合经常会用到信笺纸，随着计算机的普及，书写的地方越来越少，别说信笺纸，连普通纸都没有，唯一有的就只剩下打印纸，那么如果临时想用信签纸咋办？唯一的办法就是打印，现在就来说说如何运用记事本编辑html代码和word实现A4信笺纸电子版的两种做法。

一、html信笺纸电子版的制作方法

如果电脑中没有安装office之类的办公软件，同时又不想安装它们，可是又需要制作信笺纸电子版，这时就可以用到记事本，利用记事本来编辑html代码，通过css定义，就可以制作出信签纸的电子版，用打印机打印出来就是信笺纸了。下面就来说一下，如何利用记事本制作信笺纸的电子版。

首先要规划一下，信笺纸的行数。 A4纸的长宽比是1.414286，宽度为210mm，长度为297mm，信签纸的每线之间的距离是10mm左右，页眉与页脚留空20mm，就用297-20×2=257，再用这个数除以10,所以大约就是25线，根据dip的常数96，可以得1毫米约等于3.78像素，但是这个数值只是个大概，比如我的笔记本像素为1280×800，长宽为333×208，这样一来，又变成了1毫米大约3.84像素。值得庆幸的是，后边这种算法经过实际打印测试，的确超出了1毫米，所以还是用3.78像素为1毫米更为靠谱。

经过以上的计算和推断，我们有了大体的规划构思，下面开始进入主题。

在页面中输入1组ul标签：

再在里面插入一组li标签：

li标签是用来定义成横线的标签，通过上面的计算，一张A4纸可以插入25线，所以就复制出并粘贴出25组li标签，本来可以一个接一个的，但是为了美观和直观，可以写成一行一组li标签，样式如下：

<ul>
<li></li>
<li></li>
<li></li>
...
</ul>

记得总共25行li标签，完成后就可以进行css定义。

首先来定义li标签。

list-style-image: none;
list-style-type: none;

li标签本来就是一组序列标签，用上面这组CSS定义去掉项目符号图片和类型，不然就会出现像1、2、3或者小点之类的，这里不需要这样的序列样式。

height: 36.8px; /*高度*/
width: 96%; /*宽度*/
border-bottom-width: 1px; /*底部1像素的线条*/
border-bottom-style: solid;
border-bottom-color: #F00; /*颜色红色*/

信笺纸的线与线之间高度为10毫米，而每毫米宽度约为3.78个像素，10毫米就是37.8像素，考虑还有1条1像素的线条，因此高度就设为36.8个像素；宽度这里设置成自适应，但又不能设置成100%，那样要么就是线条两边都到边，要么就是一边长一边短，为了更好的适应纸张，经过验证，设置成96%是最适合不过；li标签在边框的设置上，跟其他的标签也是一样，全部设置就成了一个四边形，这里只需要下面一条就可以，线的宽度设置成1个像素，模式为实线条，solid英文意思为固体，这里可以解释为实线，当然也可以把它设置成dotted（虚线），根据个人爱好设置，一般的信笺纸基本是红色线条，所以线条颜色也设置为红色。

到了这一步，信笺纸的基本样式就已经出来了，在浏览器中看一下，如果要想看一下打印出来的样子，可以按Ctrl+P组合键，效果如下：

效果已经非常好了，但是你会发现，还是有一点怪怪的，正常的信笺纸上边和下边的线条都是比中间的要宽一点，那么我们就把最上面的和最下面的li标签重新定义一下，只需要在两个标签中加上不同的类就可以，代码如下：

<ul>
<li class="ym"></li> /*用ym代表页眉*/
<li></li>
<li></li>
...
<li class="yj"></li> /*用yj代码页脚*/
</ul>

上面的代码我已经备注出来，用ym代表页眉，用yj代码页脚，因为页眉和页脚都要重新定义，因此把它们单独列出来，首先来对页眉进行定义，代码如下：

.ym {
border-top-width: 3px; /*页眉最上面线条为3像素宽*/
border-top-style: solid;/* 线条也是实线*/
border-top-color: #F00; /*颜色同样红色*/
}

最上面的这组li标签，最下面的边线已经定义过了，所以只需要定义出最上面的边线。宽度为3像素的红色实线即可，上面代码中已经备注出来，应该看得明白。

下面就来定义下页脚。代码如下：

.yj {
border-bottom-width: 3px; /*同样页脚线条也是3像素宽度*/
}

页脚的线条颜色和边线位置在最上面的li标签中已经定义过，这里只需要将边线宽度定义成3个像素即可。在浏览器中按Ctrl+P组合键，看看打印的效果如下：

细心的你也许会看得出来，上面留空的距离比下面的窄多了，经过实践证明，只需在页眉标签中再加入50像素的边距定义就完美了，代码如下：

.ym {
border-top-width: 3px; /*页眉最上面线条为3像素宽*/
border-top-style: solid;/* 线条也是实线*/
border-top-color: #F00; /*颜色同样红色*/
margin-top: 50px; /*这是最后加上去的50像素边距定义*/
}

最终效果如下：

懒得动手的同学，点击下面的链接就可以直接打印，这里我整理了两种信笺样式，一种单线，一种双线的，适应不同场合。

点击打印单线信笺纸电子版

点击打印双线信笺纸电子版

二、word信笺纸电子版的制作方法

如果电脑上已经安装office等办公软件的同学，也可利用它快速制作信笺纸的电子版，接下来我们就来讲讲怎样用word制作信笺纸。

规格和排版上面已经说了，这里不再重述。首先打开word，选择插入表格，列数1列，行数25行。如下图：

右键点出表格属性，在属性中找到行，指定高度为0.95厘米，行高值为固定值，如下图所示：

在表格属性中找到最全面的“表格”，然后找到下面的“边框和底纹”，再弹出边框和底纹的对话框中，点击左边的无，后边的样式选择横实线，颜色选择红色，宽度就用默认的0.5磅，再选择最右边中间小方框，接着选择上面一个方框，并将前面的宽度设置成2.5磅，如果发现右边的预览框中没有出现粗一点的横线，一定要多点两下，直到出现为止，同样再预览下边第三个小方框，也是修改宽度为2.5磅，方法如上，确定就可以。如下图所示：

接下来还可以插入页眉与页脚。页眉与页脚的设计是一样，我这里只演示页脚就行了，在插入中点击页脚，然后选择空白页脚，输入“第页”，字体选择宋体，字号四号，点击加粗，打印时才不至于看不到，颜色红色，居中选择靠右。打印出来样式如下图。

同样我这里也提供电子版下载

点击下载信笺纸电子版

访问密码: 8823

利用记事本编写html代码和word实现A4信笺纸（信签纸）电子版的两种设计法相关推荐

利用记事本编写Hello world 程序
利用记事本编写Hello world 程序 1.先下载notepad++软件 2.编写程序 3.在当前文件夹下运行cmd命令 4.输入 javac Hello.java命令编译程序,运行成功后可看到 ...
java编写一个彩票开奖的模拟程序.游戏共有两种玩法，一种是21选5，即玩家输入5个1到21内的不重复的数。另外一种玩法是6+1玩法，即要求玩家输入7个整数，代表所购买的彩票号码，最后一个是特码。
java编写一个彩票开奖的模拟程序.游戏共有两种玩法,一种是21选5,即玩家输入5个1到21内的不重复的数.另外一种玩法是6+1玩法,即要求玩家输入7个整数,代表所购买的彩票号码,最后一个是特码. 具 ...
POI读取word文件，（支持HSSF和XSSF两种方式）
POI读取word文件,(支持HSSF和XSSF两种方式) 参考:HSSF,XSSF,SXSSF三种方式 1.引用maven(版本必须一致) <dependency><groupId ...
FPGA Verilog AD7606驱动代码，包含SPI模式读取和并行模式读取两种
FPGA Verilog AD7606驱动代码,包含SPI模式读取和并行模式读取两种,代码注释详细编号:7428665912784264白衫如初oh
android 设置字体大小和不同颜色,Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果...
Android代码中设置字体大小,字体颜色,显示两种颜色在xml文件中字体大小用的像素 android:id="@+id/uppaid_time" android:layout_ ...
攻击者已利用ChatGPT编写恶意代码
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士自OpenAI 在2022年11月发布ChatGPT以来,安全研究人员就预测称,网络犯罪分子开始利用这个AI聊天机器人编写恶意软件和执行其它恶意 ...
Word文档怎么翻译？教你两种省时省力的翻译方法
Word文档里的内容怎么进行翻译呢?大家有没有过这样的经历,在下载或者接收到别人发来的一份Word文档时,一打开发现全是不认识的语言,又或者是接到老板要求,把Word文档内容翻译成英文或其他语言给客户 ...
python爬虫爬取图片代码_Python爬虫入门：批量爬取网上图片的两种简单实现方式——基于urllib与requests...
Python到底多强大,绝对超乎菜鸟们(当然也包括我了)的想象.近期我接触到了爬虫,被小小地震撼一下.总体的感觉就两个词--"强大"和"有趣".今天就跟大家分享 ...
Word文件加密的方法有哪些？两种方法告诉你
日常生活工作中,我们经常会使用到Word文档.有时里面有些比较重要的内容,我们不想别人随便可以更改我们输入的内容.窥探我们的隐私,我们该怎么做?建议给你的word文件加密,这样就能更好保护我们的信息. ...
c语言蓝屏代码大全,window_Win10系统出现蓝屏提示错误代码0x00000050两种解决方法，　　刚刚升级Win10系统的一段 - phpStudy...
Win10系统出现蓝屏提示错误代码0x00000050两种解决方法刚刚升级Win10系统的一段时间,容易出现蓝屏的问题.导致蓝屏故障的原因各不相同,我们需要根据错误代码来执行正确的解决方法.比如,最 ...

利用记事本编写html代码和word实现A4信笺纸（信签纸）电子版的两种设计法

利用记事本编写html代码和word实现A4信笺纸（信签纸）电子版的两种设计法相关推荐

最新文章

热门文章