企业官网建设流程全解析

简介：这份资源围绕“ePub的排版和样式”展开，面向希望系统掌握电子书制作基础知识的编辑、独立出版人及爱好者，重点解决对ePub规范理解不清、排版样式难以落地的问题。内容从ePub格式的网页本质讲起，明确其基于HTML与CSS规范，经结构文件实现分章索引；随后逐步拆解文件结构、标签文本、属性写法、元素嵌套、空元素、关闭标签等核心概念，并结合epubBuilder介绍text-indent、text-align、font-size等常用排版属性与组合方式，帮助读者快速上手制作层次清晰、样式美观的电子书。资源包为1个doc文档，整包大小869KB，篇幅紧凑，适合对照epubBuilder边看边练。目前已有956人浏览学习，是一份简明实用的ePub入门参考资料。

1. 把 ePub 当成网页来做：排版的理论起点与能力边界

很多人一接触 ePub 电子书，脑子里还是 txt 的升级版：复制、粘贴、回车分段，结果排版一塌糊涂。我建议先扭转观念：ePub 是一种电子书的载体，不是一种麻烦的文本保存格式。它本质上是把文本、图片和样式按网页规范装进一个压缩包，再用结构文件让阅读器分章索引。换句话说，你排版 ePub 的思路，应该和排一个静态网页完全一样。这篇文章围绕一个非常具体的场景展开——用手工标签、内联样式和外部 CSS 控制段落、图片、边框与间距，把普通文稿做成阅读器里耐看的版式。适合刚开始接触 epubBuilder 这类工具的人，也适合需要批量整理文档、课程笔记的人当参考。

2. 标签文本与元素：用手写标签控制每一个段落

2.1 元素、空元素与关闭顺序：先搞懂这套规则再动手

在动手排版之前，先把标签文本这个东西弄清楚。所谓标签文本，就是用一对结构符号把内容包起来，告诉阅读器“这一段该怎么显示”。标准 HTML 里用的是尖括号 <>，而 epubBuilder 这类工具为了输入方便，在编辑区里通常用方括号 []。它生成的最终文件依然是标准的 HTML 结构，所以你在编辑器里写 [p] 和写

，本质是一回事，只是写法不同。

先看一个最小例子：

[p style="text-align:center"]这是一段文本[/p]

这段代码里，整个内容被称为一个“元素”。p 是开始标签，表示一个段落的开始；style="text-align:center" 是属性，声明了段落如何对齐；/p 是关闭标签，表示段落结束；“这是一段文本”是元素的内容。

开始标签和关闭标签必须成对出现。“所有标签必须被关闭”这句话在严格的 ePub 体系里是对的。虽然某些网页浏览器能容忍漏掉关闭标签，但阅读器内核各异，漏一个就可能让后面的整段样式失效。我在刚开始做电子书的时候，就因为忘记关闭 [p] 标签，结果后面十几个段落的对齐方式全部被带偏了，最后只能逐段排查。那次的教训直接改变了我的习惯：每写完一段，先数一遍开始和结束标签是否配对。

除了普通标签，还有一种没有内容的空元素。空元素不需要写关闭标签，直接在开始标签末尾加一个斜杠即可。最常用的是：

[br /] [hr /]

br 代表一个空行，类似 HTML 里的换行；hr 代表一条横线，适合在章节之间做视觉分隔。注意 br 后面的斜杠别漏，漏了容易被某些阅读器理解成开始标签，然后一直找不到关闭标签。

元素还可以嵌套。常见的包含顺序是 html → body → div → p → span。嵌套时必须遵守“先开的后关、后开的先关”。比如：

[div][p][span]元素[/span][/p][/div]

如果你把关闭顺序写反，写成 [div][p][span]元素[/p][/span][/div]，阅读器解析标签时就会迷路，最终显示出来的样式变成乱套。遇到这种问题，先别急着怀疑 CSS，去检查标签是否闭合、顺序是否正确。

2.2 常用属性速查：缩进、对齐、字号、颜色、行距

属性可以说是标签的调节旋钮。下面这组属性，覆盖了九成正文排版需求，你可以把它们看作基础工具箱。

先说单位。常用就这么三个：%、px、em。% 是相对默认值的百分比，px 是像素，em 是字符的相对单位。1em 等于当前字号下 1 个字符的高度或宽度。如果你设置了默认字号 16px，那么 1em=16px；如果某段文字放大到 20px，那么在这一段里 1em=20px。所以用 em 表示缩进和行距，比用 px 更耐得住字号调整。

text-indent 控制首行缩进。epubBuilder 默认给 text-indent 是 2em，这符合中文出版物的阅读习惯。如果你做的是标题、图片说明或者首字下沉，通常要把缩进清零：

[p style="text-indent:0em;text-align:center"]标题居中且不缩进[/p]

text-align 控制水平对齐。正文我一般用 justify 两端对齐，中文书这样做出来的右缘更整齐，不会出现参差不齐的锯齿。居中和靠右则用于标题、图片说明、落款。

font-size 有两种写法：固定像素和相对字符。初学者容易踩坑的是在正文里写死 15px、17px 这类数值，一旦读者在阅读器里调整全局字体大小，固定像素的文字就可能和全局设置冲突。我一般建议正文用默认字号，需要放大的地方用 1.2em、1.5em 相对放大，这样整体缩放时比例还能保持。

color 控制文字颜色。很多工具已经把颜色选择集成进去，但手写也很简单。用英文色名 red、darkred、gray 最方便，用十六进制 #333、#666 更精确。尽量避免过于鲜艳的颜色，阅读器背景不一定是纯白，浅灰文字在某些设备上可能看不清。

font-weight 和 font-style 分别控制粗细和倾斜。你可以用加粗的段落来做小标题，用斜体做引用文字。不建议用 b 或 i 标签代替，因为在严格页面结构里它们是表现性标签，语义含糊，属性控制更稳妥。

line-height 控制行距，注意它管的是同一段落内行与行之间的距离，不是段落与段落之间的间距。数值可以是 1em、1.5em，也可以是 130%。当年我把 line-height 理解成段间距，在段落之间拼命加行距数值，结果看起来并不是想要的效果。段间距应该交给 margin 和 padding 处理，这个放到下一章讲。

2.3 第一份可用代码：新建章节后手写样式

理论讲再多，不如直接打开工具新建一个章节实操。下面是我通常用来做正文页的一段样式代码：

[p style="text-align:center;font-size:1.2em;font-weight:bold;color:#333"]第一章 夜的边界[/p] [p style="text-indent:2em;text-align:justify;line-height:130%"]这是正文的第一段。段首自动缩进两字符，两端对齐，行距保持阅读器默认的 130%。[/p] [p style="text-indent:2em;text-align:justify;line-height:130%"]这是第二段。注意我没有在段落之间手动加空行，段落间距完全交给阅读器默认的 margin 值。[/p] [p style="text-indent:0em;text-align:right;color:#666"]——摘自某书稿[/p]

代码逻辑很简单：章标题用居中、加粗、相对字号放大；正文两段保持 2em 缩进和两端对齐；末尾落款居右且颜色调灰。这里有个容易被忽视的点：epubBuilder 会自动为每个新段落添加 p 与 /p，所以你不必手动加标签。实际使用时，你只需要在已有的 p 标签里面补上 style 属性即可。

参数怎么调？如果你是做散文、小说，行距 130% 是安全区，缩进 2em 是默认，都不太需要动。如果你做教程、技术文档，建议正文行距改成 150%，并且在要点段落里加 font-weight:bold 作为提示。如果你做诗歌，千万不要加 text-indent，诗行通常要顶格，也别用两端对齐，居左或居中更合适。

把这段代码放进新章节后的预期结果，是标题居中加粗、正文缩进、末尾落款居右。如果你发现正文没有缩进，先去确认是不是阅读器默认覆盖了 text-indent，再检查是否写成了 text-index 这类拼写错误。属性名多一个字母少一个字母，阅读器不会报错，只会静默忽略。这是我见过最多的“样式没生效”的原因。另外，属性值之间的分号要用英文分号，中文全角分号会被解析成非法字符，后面属性也会跟着失效。

做到这一步，你已经掌握了 ePub 排版的第一层能力：控制文字本身的显示。

3. 盒模型与浮动：图片绕排、分栏与小部件布局

3.1 每个元素都是一个框：width / height / margin / padding

如果要我说 ePub 排版里最容易养成的习惯，那就是把每个元素都想象成一个框。一段文字是一个框，一张图片是一个框，一个包含图片和说明文字的组合也是一个框。框与框之间是 margin 控制的外边距，框的内部和内容之间是 padding 控制的内边距。不理解这一层，后面做图文混排、做提示框、做图片下方的注脚，都会像在拆盲盒。

看一个例子：

[div][p]这是一个段落。[/p][p]这是另一个段落。[span]这是一段文本。[/span][/p][/div]

从外到内：div 是最外层的框，里面装着两个 p；第二个 p 里又装着一个 span。如果给 div 加背景色，背景区域会延伸到整个框的尺寸；如果给 span 加边框，边框会紧紧包住那一段内联文字。

width 和 height 控制框本身的宽高。取值最小是 0，可以是像素，也可以是百分比。在 ePub 里，width 常用百分比，比如图片的 max-width:50%，意思是图片最多占到容器的一半宽度，这是防止大图撑开版面最常用的保护手段。height 平时用得少，书籍排版里很少需要固定高度，让内容自然撑开更稳妥。

margin 和 padding 的取值方式比较多样。以 margin 为例，有三种等价写法：

margin:1px; margin:1px 1px 1px 1px; margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;

第一种给四个方向统一赋值；第二种按上、右、下、左的顺序分别赋值；第三种用独立的属性逐个声明。三种效果一样，用哪种看场景。如果你只需要右键距，就直接用第三个写法的简化版：

[p style="margin-right:5%"]这段文字右侧留出 5% 的外边距[/p]

padding 的写法和 margin 完全一样。区别在于：margin 是框与外部元素的距离，padding 是框与其内部内容的距离。用 div 做一个提示框时，padding 必不可少——没有 padding，文字会直接贴到边框上，看起来很挤。

3.2 float 和 clear：文字绕图、连续多图不挤团

搞清楚框模型之后，再来看浮动。元素的默认排列是从上往下的：文字逐段向下，图片插在中间就把文字挤开，这是标准文档流的规则。打破这个规则，让图片浮到段落的一侧、文字环绕图片，就需要 float 属性。

float 的取值只有 left 和 right。下面的代码会把一张图片浮到右侧，文字自动从左侧环绕：

[div style="float:right;margin:0.5em;max-width:50%"][img src="images/1.jpg" /][/div] [p style="text-indent:2em"]正文段落……[/p]

float 的坑在于，连续使用多张浮动图片时，它们会粘在一起。比如你在两小段文字之间各放一张图，并要求两张图都浮在右边，结果两张图会顺着浮动方向贴在一起，中间没有任何间距。这不是排版工具的问题，是 float 的自然行为——浮动元素不会自动避开其他浮动元素。

解决方式是用 clear 属性。clear 规定元素的两侧是否允许出现浮动元素，常用取值 right、left、both。以右侧浮动为例，只要给后续图片的浮动规则加上 clear:right，图片就不会继续往右上角叠加了：

img-float-right { float:right; margin:0.5em; max-width:50%; clear:right; }

这个属性在文字绕图场景里几乎成了标配。我的习惯是：只要页面里有一处图片用了 float，就一定把 clear 同步补上，省得返回去调二稿。

3.3 组合实践：带框标题、提示框和代码效果

把盒模型和浮动放在一起，可以组合出很多花式排版。下面三个做法，是我做电子书时高频使用的小部件。

第一个是带边框和标题的图片。思路是用 div 做一个箱子，图片和说明文字都装在里面，然后给箱子加边框。代码如下：

[div style="float:right;border-style:solid;border-width:1px;margin:0.5em;padding:0.5em;text-align:center;max-width:50%"] [img src="images/1.jpg" /] [p style="font-size:1em;font-weight:bold;text-align:center"]图 1：示例图片[/p] [/div]

这里用到了 border-style 边框样式和 border-width 边框宽度。border-style 常用取值有 solid 实线、double 双线、dotted 圆点、dashed 虚线。border-color 用来指定边框颜色，默认会和文字同色。用 div 包裹图片和文字，是为了让边框把两者整体围住，而不是只框住图片。

第二个是提示框。做法和带边框图片类似，加背景颜色即可：

[div style="background-color:#fdf6e3;border-style:dashed;border-width:2px;padding:0.8em;margin:1em 0em"] [p style="font-weight:bold;text-align:center;font-size:1.1em"]》》小贴士《《[/p] [p style="text-indent:0em;line-height:150%"]这是提示内容。注意背景色、边框和内边距的配合，文字不能贴边框。[/p] [/div]

background-color 可以直接用颜色名或十六进制值。这类提示框在教程类电子书里非常常用，适合放重点提醒，也适合做引用和注释。

第三个是悬挂缩进。所谓悬挂缩进，就是段首的编号标题突出在段落的左侧，整个段落主体向右缩进。它需要 text-indent 和 margin-left 配合使用：

.suspend { text-indent:-2em; margin-left:2em; }

注意，text-indent 用了负值，所以第一行会向左突出；如果不同时把 margin-left 设置为正值，突出的部分可能会跑出屏幕显示区域，这就是一个典型的边界坑。后面避坑章节会专门展开。

4. 外部样式表与类选择器：从逐段改到全册统一

4.1 CSS 文件的结构与修改流程

前面用的都是内联样式表，也就是把 style 属性直接写在开始标签里。它的好处是直观，但缺点也很明显：几十章的内容要统一调整一种样式，或者这个样式要重复使用二十次，内联方式就变得笨拙。这时候就需要 CSS 外部样式表。

在 ePub 里，外部样式表通常是一个 .css 文件。你用压缩软件打开做好的 ePub，就能看到类似 main.css 的文件，用任何文本编辑器都能打开。它的结构是这样：

p { text-indent:2em; text-align:justify; line-height:130%; }

p 是选择器，表示你要改的是所有 p 元素；花括号里是属性，冒号后面是值。你可以多行写，也可以写成一整行，格式不敏感但分号不能丢。

外部样式表的最大优势是全局生效。声明了 p 元素的样式之后，整本书里所有没有特殊覆盖的段落都会跟着变。这意味着统一排版这件事，不用再逐章手工去做。

epubBuilder 这类工具通常没有集成 CSS 编辑面板，所以要修改样式，流程往往是：先用工具生成 ePub，再用压缩软件打开，把修改好的 CSS 文件覆盖回去，最后重新打包。这个流程听起来简单，但容易在文件层级上翻车。最稳妥的做法是：先确认 .css 文件在压缩包里的路径，用相同路径替换，不要新建文件夹，不要改文件名。

如果你要新增一个外部样式表，而不是修改已有的，需要在内容文档里引入链接。常见做法是在 html 头部加一行：

<link rel="stylesheet" type="text/css" href="styles/main.css" />

路径必须和压缩包内的实际位置对应，我一般把 css 文件放在 epub 根目录下的 styles 文件夹里，这样层级清晰，替换时也好找。

4.2 类选择器的命名规则与调用方法

光改全局样式还不够，有时候你想要的是“一部分段落大字号加红”，另一部分段落“缩进并斜体”，这时候就要用类选择器。类选择器用点开头：

.red-big { font-size:1.5em; text-indent:0em; color:red; font-weight:bold; }

名称可以包含字母、数字、横杠和下划线，但绝不能以数字开头。下面这样命名没问题：

.style-1 { ... } .bigfont-red { ... } .conclusion { ... }

这样命名会出错：

.1-style { ... } .123 { ... }

类选择器命名最好能体现用途，比如 bigfont-red、float-img、tip-box。看到名字就想起要表达的效果，以后维护效率会高很多。

调用类选择器用的是 class 属性：

[p class="red-big"]这段文字会变成大号红色加粗[/p]

一个标签也可以同时调用多个类选择器，中间用空格隔开：

[p class="red-big tip"]这段文字同时应用 red-big 和 tip 两个类[/p]

多类并存时，谁的优先级更高，取决于样式表里的声明顺序。一般在 ePub 里不会遇到特别复杂的层叠冲突，但知道这个机制能少踩不少坑。

4.3 内联样式转类选择器：何时值得切换

以我个人习惯，一页里的两三处临时样式用内联足够。当一个样式在多个章节反复出现时，就应该迁移到类选择器。迁移的过程可以理解成三步：第一步，把重复用到的样式抽到 CSS 文件里，命名一个类；第二步，把原正文里的 style 属性删掉，改成 class；第三步，全书再次编译，确认显示效果没有变化。

示例：原来写在段落里的内联样式：

[p style="text-indent:0em;font-size:1.3em;font-weight:bold;color:darkred"]节标题[/p] [p style="text-indent:0em;font-size:1.3em;font-weight:bold;color:darkred"]另一个节标题[/p]

迁移成外部样式表：

.section-title { text-indent:0em; font-size:1.3em; font-weight:bold; color:darkred; }

正文段改成：

[p class="section-title"]节标题[/p] [p class="section-title"]另一个节标题[/p]

这样做的收益在后期的全局修改：如果节标题颜色要换个色，只改一处 CSS，整本书所有节标题都会变。用内联方式就得在全书范围搜索替换。

不过要注意，类选择器不是万能的。阅读器对 CSS 的支持程度参差不齐，某些老阅读器对复杂选择器支持不佳，但对简单的类选择器和 p、div 这类基础选择器兼容性最好。所以我的建议是：类选择器用简单的点类，避免使用后代选择器、伪类这类高级语法。里的边框、背景、浮动尽量用基础属性完成，不要为了炫技引入复杂结构。

5. 避坑：ePub 排版里最容易翻车的 5 个细节

5.1 标签不闭合导致整段样式丢失

现象：某一段文字看起来没有缩进、没有对齐，跟在它后面的所有段落样式全部乱掉。

原因：前一个片段的开始标签缺失关闭标签，阅读器解析时把后面的内容也吞进同一种样式范围里了。

解决：回到 epubBuilder 中查看代码模式，检查所有 p、div 标签是否配对。我的习惯是每个文件写完做一次标签计数，尤其是空元素 br 和 hr 的斜杠别漏。凡是出现整段样式丢失，先怀疑标签闭合，后怀疑 CSS。

5.2 负缩进导致文字跑出屏幕

现象：做悬挂缩进时，文字左边超出了阅读器的显示区域，首行标题看不见，或者显示到屏幕外。

原因：text-indent 用了负值，但没有同时用 margin-left 撑出正的外边距来抵消。负缩进本身没有错误，错在缺少配合属性。

解决：悬挂缩进标准写法是 text-indent:-2em 和 margin-left:2em 成对出现。如果你想用更大的负缩进，就同步把 margin-left 加大到相同数值，保证首行标题仍落在版心内。

5.3 浮动图片挤成一团

现象：连续插入两到三张图片，都设置了 float:right，结果显示多张图在右上角堆在一起，中间没有空隙。

原因：float 会让元素脱离文档流，后续浮动元素会尽量贴近前一个浮动元素，于是出现了挤团。

解决：为浮动的图片样式加上 clear:right 或 clear:both。如果图片之间存在间距要求，再配合 margin-right 或 margin-bottom 控制缝隙。clear 的值要对应 float 方向，float:left 用 clear:left，float:right 用 clear:right，不放心就直接 both。

5.4 不同阅读器对 CSS 属性支持不一致

现象：同一本书在 A 阅读器里文字缩进正常，在 B 阅读器里段首缩进消失；浮动图片在 C 阅读器里直接变成图片全宽。

原因：ePub 阅读器的内核存在差异，有些老设备对 margin、padding、float 支持不全，或者默认样式覆盖了文件里的声明。

解决：核心正文排版只用 margin、text-align、text-indent 这类兼容性好的属性；float、background-color 这类锦上添花的样式控制在内容的关键部分上，不要在整本书的正文上依赖它们。需要验证时，至少用两个阅读器各过一遍，一个是桌面端，一个是移动端。

5.5 手动替换 CSS 后文件层级不对

现象：按照流程修改了 .css 文件，覆盖回压缩包里再打开阅读器，样式还是旧的。

原因：常见原因是替换时放错了层级。有的 ePub 的 CSS 文件在根目录下的 static 文件夹里，有的在 EPUB 目录下。用压缩软件打开时，把一个文件夹下的同名文件替换到了另一个位置，自然不会生效。

解决：修改前先记录原 CSS 文件的完整路径和文件名，替换时保持完全相同路径。替换完先别急着拷回设备，直接在桌面端阅读器里预览检查。如果你使用的工具支持直接导入无 XML 结构错误的压缩包，也可以保留原文件的 MIME 类型和文件顺序，不要随意增删文件，避免整包结构被破坏。

6. 收尾技巧：几个能直接落地的验证手段与习惯

6.1 先做小范围验证，再铺全册

排版改完别直接整本输出。我会先挑一个内容最全的章节作为验证样例，所谓内容最全，意思是同时包含标题、正文段落、图片、引用、提示框这几种元素。把本次用到的所有样式全部在这个章节里覆盖一遍。验证通过了再进行全书替换。这个习惯能大幅减少“全书改完才发现某属性不支持”的返工。

6.2 用“反编译”确认样式真的进去了

“反编译”听起来玄学，其实就是用压缩软件打开成品 ePub，直接看 CSS 文件内容和内容文档里的 class 引用是否一致。我每次改完 CSS 都会做这一步：确认 main.css 里的类名和正文里的 class 属性完全对应，并且确认文件在压缩包里没有被重名文件覆盖。如果发现样式完全没有生效，这一步几乎能在十秒内定位到原因，而不是去正文里逐段找。

6.3 保持一份“样式速查表”

我现在会在工作目录里长期保存一份速查表，记下每个常用属性的名称、默认值和过去踩过的坑。做新书的时候直接复制表模板，而不是每次都从零写。速查表不追求完整，只记录自己常用的二十个属性和五个最容易翻车的实例，比如负缩进要搭配 margin-left、浮动图片要加 clear。这个习惯让我接手旧项目时省了很多重复排查时间。

这些年做 ePub 排版，最大的体会是：样式表写出来容易，稳定输出难。标签配对检查、双阅读器预览、反编译核对这三步，缺一步都可能埋下暗雷。从那以后，我每次做完一套样式，都会强制自己走一遍这个流程，哪怕只改了一行 CSS 也不跳过。排版这件事，多数问题不是难，而是懒出来的。希望帮到你。

本文还有配套的精品资源，点击获取