HTML页面仿WORD样式
公司要求不再浏览器中添加office插件的前提下。展示WORD文档中的内容要求一一对应。经过查询资料以及调整,得出如下相关资料:
1 标题样式:
目录 -- 宋体 小二 加粗 一级标题 -- 微软雅黑 四号 加粗 <div style="font-family:微软雅黑;font-size:19px;font-weight: bold;">1 XXX</div> 二级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1 XXX</div> 三级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1.1 XXX</div> 表格标题 -- 宋体 五号 加粗 <div style="text-align:center;font-family:宋体;font-size:14px;font-weight: bold;"> </div> 正文文本 -- 宋体 小四 <div style="text-indent:25px;line-height:35px;height:auto;font-family:宋体;font-size:16px;"></div>
2 style 部分标签:
加粗:font-weight: bold;
斜体:font-style: italic;
font-style:设定字体样式。normal 默认/italic,oblique斜体;
font-weight:设定字体粗细。normal 默认/bold 粗体/bolder 比bold更粗/lighter 比较细的字体
font-size:设定字体大小。字体大小 可以用px表示 默认字体大小为 12px
font-family:设定字体/“微软雅黑”/“宋体”/“黑体”
3 字号、pt、px、em换算对照表:
初号 42pt 56px 3.5em 小初 36pt 48px 3em 34pt 45px 2.75em 32pt 42px 2.55em 30pt 40px 2.45em 29pt 38px 2.35em 28pt 37px 2.3em 27pt 36px 2.25em 一号 26pt 35px 2.2em 25pt 34px 2.125em 小一 24pt 32px 2em 二号 22pt 29px 1.8em 20pt 26px 1.6em 小二 18pt 24px 1.5em 17pt 23px 1.45em 三号 16pt 22px 1.4em 小三 15pt 21px 1.3em 14.5pt 20px 1.25em 四号 14pt 19px 1.2em 13.5pt 18px 1.125em 13pt 17px 1.05em 小四 12pt 16px 1em 11pt 15px 0.95em 五号 10.5pt 14px 0.875em 10pt 13px 0.8em 小五 9pt 12px 0.75em 8pt 11px 0.7em 六号 7.5pt 10px 0.625em 7pt 9px 0.55em 小六 6.5pt 8px 0.5em 七号 5.5pt 7px 0.4375em 八号 5pt 6px 0.375em
(部分内容摘抄自他人撰写内容,如有意见请联系作者更改)
HTML页面仿WORD样式的更多相关文章
- WPF仿Word头部格式,涉及DEV RibbonControl,NarvbarControl,ContentPresenter,Navigation
时隔1个月,2015/06/17走进新的环境. 最近一个星期在学习仿Word菜单栏的WPF实现方式,废话不多说,先看一下效果. 打开界面后,默认选中[市场A],A对应的菜单栏,如上图, 选择[市场B] ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- 【MVC】 非常简单的页面导出 WORD, EXCEL方法
[MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 【CSS】如何在一个页面中引入样式css
CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...
- HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...
随机推荐
- 小白开学Asp.Net Core 《九》
小白开学Asp.Net Core <九> — — 前端篇(不务正业) 在<小白开学Asp.Net Core 三>中使用了X-admin 2.x 和 Layui将管理后端的界面重 ...
- jQuery甘特图/日程图/横道图/插件
基于JQ的一款灵活高效,支持自定义拓展的甘特图/日程图插件 支持月/周/小时等显示方式 支持拖动改变时间 展开与收起 添加/删除,刷新 节假日高亮 clicked,dblClicked,changed ...
- HTML--网页练习--(360导航首页的一部分)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java--重载与重写的区别
1.重写必须继承,重载不用.2.重写的方法名,参数数目相同,参数类型兼容,重载的方法名相同,参数列表不同.3.重写的方法修饰符大于等于父类的方法,重载和修饰符无关.4.重写不可以抛出父类没有抛出的一般 ...
- webstorm mac 版破解
一.打开终端,输入: sudo vim /etc/hosts 回车后输入密码,编辑 hosts 文件,如图: 二.进入编辑模式(按 i 键),在最后一行添加如下代码: 0.0.0.0 account. ...
- IIS身份验证和文件操作权限(一、身份验证配置)
最近有一个项目服务器需要升级,主要是Web项目.因为以前是只写代码,不管发布.所以在环境构筑方面就出现自己的知识盲点.盲点一:IIS的身份验证的作用盲点二:IIS的身份验证和文件操作权限的关系(重点) ...
- 2019牛客暑期多校训练营(第三场)H题目
题意:给你一个N×N的矩阵,求最大的子矩阵 满足子矩阵中最大值和最小值之差小于等于m. 思路:这题是求满足条件的最大子矩阵,毫无疑问要遍历所有矩阵,并判断矩阵是某满足这个条件,那么我们大致只要解决两个 ...
- 使用secureCRT上传下载
secureCRT 的 下载 http://pan.baidu.com/s/1c1Mz1ks 下载完成后,输入yum install lrzsz,安装这个东西, 然后就可以直接在secureCRT中输 ...
- export,export default,module.exports,import,require之间的区别和关联
module.exports Node 应用由模块组成,采用 CommonJS 模块规范.根据这个规范,每个文件就是一个模块,有自己的作用域.在这些文件里面定义的变量.函数.类,都是私有的,对外不可见 ...
- CentOS系统故障 | 一桩"血案"引发的容器存储驱动比较
写在前面: 由于红帽在Linux界的影响力,相信很多朋友在测试和生产系统用的是RedHat或者CentOS系统,这次我在CentOS系统上遇到了一个很有意思的故障,通过这次故障的原因分析及解决,特意写 ...