企业官网建设流程全解析

简介：一份面向ePub电子书制作初学者的排版与样式讲解文档，系统梳理ePub格式的基本概念、文件结构、标签文本、属性、元素、空元素及关闭标签等核心知识点。内容从html与css基础切入，结合epubBuilder工具逐步演示段落缩进、水平对齐、文字大小、字重与颜色等常用排版属性的设置方法，并配有标签包含顺序、属性书写规范等易错提醒，帮助读者避开常见错误；同时给出大量带样式代码的示例，便于边看边实践。文档以doc格式整理，共1个文件，压缩包仅869KB，章节划分清晰，从基础知识到常用属性介绍层层递进，适合想用epubBuilder制作更精美电子书的读者对照学习。目前已有956人学习下载，是入门ePub排版与样式设计的基础资料。

1. epub 电子书排版到底是什么：先忘掉 txt，再谈样式

很多刚接触 epub 电子书的人，习惯把它当成 a txt 格式那样去理解，总觉得不过是个能换字体、能调行距的文本容器。这个认知如果不纠正，后面做精排时会处处碰壁。epub 电子书的底层其实是网页技术，它把文本、图片、样式打包成若干个页面文件，再由结构文件组织起来供阅读器分章索引。也就是说，你的排版能力取决于你对 HTML 与 CSS 的熟练程度。这篇笔记围绕 epub 电子书的排版和样式，从标签文本、常用属性、浮动布局到外部样式表，完整梳理一遍制作流程。适合正在用可视化工具做书、又觉得样式不够用、想自己动手改排版的制作人。

2. 标签文本与元素结构：动手排版前必须搞清的三个概念

2.1 标签、属性、元素：一套必须闭合的规则

不管用哪种 epub 制作工具，打开章节编辑器看到的代码本质上都是标签文本。理解清楚三个词的差异，后面所有操作才不会乱。以下面这行代码为例：

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

这段代码里有三个部分。p是开始标签，声明了后面内容的语义是一个段落；style="text-align:center"是属性，告诉阅读器这个段落要居中显示；/p是关闭标签，标记段落到这里结束。被这一对标签包裹的内容统称为元素，也就是上面这行里的“这是一段文本”。内容可以是纯文本、图片，也可以是另一个完整的元素。

大多数 epub 制作工具会自动为每个段落加上 p 与 /p，所以日常输入正文时并不需要手动敲标签，但一旦进入样式定制环节，你就必须清楚标签的边界在哪里。

属性部分的细节比较固定，也需要先记住：属性写在开始标签里，与标签名之间留一个空格；属性名与赋值之间用等号连接，赋值必须用英文双引号包裹；如果一个标签需要多个属性声明，赋值之间用英文分号隔开。

[p style="text-indent: 0em;text-align:center"]这是一段无缩进、居中显示的文本[/p]

这行代码同时声明了两个属性，缩进与对齐。阅读器解析时从左到右逐条生效，属性之间互不覆盖。个人习惯是把同类属性集中写，比如先缩进后对齐，出问题时一眼扫过去就能定位。

2.2 空元素与嵌套顺序：容易写错但不报错的细节

标签文本里有一类特殊元素，自身没有内容，也不成对出现，叫作空元素。最常用的是换行与水平线：

这是第一行[br /] 这是第二行[hr /] 继续输入文字

br /表示插入一个空行，hr /表示插入一条水平分割线。注意这类标签的关闭形式不是在后面加标签名，而是在开始标签内部直接加反斜杠封闭，这一条规则很容易和常规标签混淆。

另一个高频问题出在嵌套顺序上。元素允许包含另一个元素，但必须严格遵守闭合顺序。先打开的后关闭，内层永远先于外层关闭。

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

上面这行代码是合法写法，span 先闭合，p 随后，最后 div 收尾。如果调换顺序写成/div先出现，阅读器通常不会报错，但渲染结果会变得不可预测。常见表现是该应用样式的区域没生效，或者后续内容全部继承了某个不该继承的属性。做复杂版式时这种问题特别难排查，因为工具不会提示语法错误。

标签文本还要注意大小写。HTML 规范本身容许大写标签名，但在 epub 场景里，建议一律使用小写字母和英文半角符号。有些制作工具自动导出的样式文件里会混入大写，手工替换成小写反而能规避一部分阅读器兼容问题。

3. 内联样式与常用属性：从缩进到字跑的几个高频设置

3.1 单位与取值：2em、16px、150% 分别是什么

做样式设置避不开单位换算。epub 排版中用得最多的是三种：百分数、像素、em。百分数是相对默认值的比例，适合做整体缩放；像素是绝对尺寸，适合需要精确控制字距或边框的场景；em 是相对当前基准字体的长度单位，基准字号通常是 16px，所以 1em 就等于一个字符的高度或宽度，2em 就是两个字符宽度。

表格形式整理一下，便于随手查阅：

有一个很实际的坑：段首缩进默认是 2em，这个缩进量是跟随基准字号变化的。如果你给某个片段单独设置了更大的字号，缩进视觉上也会变宽，看起来像排版错位。需要固定缩进宽度时，可以改用 px 为单位覆盖。

3.2 常用属性逐个讲：对齐、字号、行距与字重

先看一组典型的属性组合：

[p style="text-align:justify;font-size:14px;line-height:1.6em;text-indent:0em"]这段文字两端对齐，字号缩小，行距加宽，并且取消首行缩进[/p]

text-align 控制水平对齐方式，可选值有 left、right、center、justify。中文书正文基本都用两端对齐，阅读体验更整齐；标题和图片说明常用居中。line-height 控制行与行之间的间距，最小值为 0，不建议设负值。当 line-height 为 0 时，段落不再换行，超出界面宽度的文字直接溢出而不是另起一行，这个效果偶尔用于特殊设计，但日常排版基本用不上。

字号控制有两个方向。用 px 直接写绝对值，例如 font-size:25px，效果直观；用 em 写相对值，例如 font-size:1.3em，表示是默认字号的 1.3 倍。新手更建议用 em，做整体字号调整时只要改基础字号，所有相对值会同步缩放，省去逐个修改的麻烦。

font-weight 控制字重，加粗用 bold，更粗用 bolder，变细用 lighter。font-style 控制字形，斜体用 italic。这两个属性在标签文本里都有对应的简化标签 b 和 i，但个人建议不要混用。b 标签在语义上代表“应该加粗的内容”，而 font-weight 只负责视觉呈现。混用容易导致后续想统一调整样式时找不到修改入口。

color 控制文字颜色，这条属性多数工具已经集成了可视化取色面板，手动写代码时使用十六进制即可，例如 color:#333333 或者红色系 color:red。

3.3 段落之间留空隙：margin 与 padding 的初印象

段落与段落之间默认的距离通常由工具自动生成，但手写样式时会遇到两个容易混淆的属性。margin 是元素与其他元素之间的外部距离，padding 是元素边框与内部内容之间的内边距。以普通段落为例，设置 margin-top:10px 会让这个段落与上一个段落拉开 10 像素的空隙，而设置 padding-left:20px 会让段落内的文字整体向右缩进 20 像素，段落背景同时向右扩展。

看一个实际例子：

[p style="margin-top:15px;padding-left:2em"]这是带有上边距与左内边距的段落[/p]

这里 margin-top 控制段落与前面内容的距离，padding-left 把文字整体推入 2 个字符宽度，常用于模拟引用块的前缀留白。两个属性配合使用可以达到很多排版效果，但请记住它们作用于不同空间，方向不要写反。

4. 布局进阶：margin、padding 与 float 浮动的配合

4.1 把每个元素想象成一个框

前面提到 margin 和 padding，这里展开讲。做 epub 排版时，必须建立“元素即框”的心智模型。每一个 p、div、span 在页面上都占据一个矩形区域，宽度、高度、边框、内外边距共同决定这个矩形以及它内部文字的呈现位置。

理解盒子模型有两个要点。第一，元素之间默认按文档流从上到下排列，后面插入的元素不会跑到前面的位置。第二，margin 可以调整元素与外部环境的距离，padding 调整内容与自身边框的距离，两者在布局上产生完全不同的效果。

margin 的写法比较多，以实际代码为例看三种等价形式：

p { margin: 10px; margin: 10px 5px 10px 5px; margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; }

第一种写法对四个方向赋同一个值，适合均匀留白。第二种写法从上开始顺时针依次赋值，顺序是上、右、下、左，四个值各对应一个方向。第三种写法拆成四个独立属性，单独控制某一个方向的边距。量与量的顺序是这种写法最常见的出错点，很多人写成“左右上下”的顺序，实际效果就会颠倒。

我的个人习惯是，只在需要单侧调整时使用独立属性，只要能用一个值就不写四个值，最大限度减少手误。

4.2 浮动与清理：绕排文字的核心组合

正文默认情况下从上往下排列，文字一段接一段，图片插入后也只能出现在行间。要做出文字绕排图片的效果，需要引入 float 属性。

来看一个最典型的实现：

[div style="float:right;margin:0.5em;max-width:50%"][img src="images/photo.jpg" /][/div] 这里是不想被图片遮挡的正文段落示例，文字会环绕图片左侧排版。

float:right 让这个 div 脱离正常的文档流，向右对齐，后续正文文字自动环绕到它的左侧。float:left 则向左对齐，文字环绕右侧。属性值只有这两个，没有居中浮动。

浮动属性有一个明显的反直觉点：多个浮动元素如果没有清理，它们会挤在一起。比如连续插入两幅右浮动图片，第二幅图片不会自动出现在第一幅下面，而是贴着第一幅的右侧继续排，视觉上两幅图片叠在一起。

解决办法是引入 clear 属性。很直接：

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

clear:right 的含义是“本元素右侧不允许出现浮动元素”，所以第二幅图会被推到第一幅图的下方。clear 可取 left、right、both 三个值，分别对应左侧清理、右侧清理、双侧清理。只做一个方向浮动时，清理方向与浮动方向保持一致即可，容易记混。

5. 避坑：制作 epub 样式时的五个典型翻车现场

5.1 首字下沉被默认缩进挤乱

现象：按照教程给段首字设置了浮动和大号字号，但第一个字没有停靠在段落左上角，而是整体右移了一段距离，像是横着飞出去一样。

原因：制作工具默认给每个段落加了 text-indent:2em，段首字作为 span 元素浮动后依旧继承了段落的默认缩进，所以浮标位置从缩进后的位置开始算。

解决：为首字下沉的那个段落单独声明 text-indent:0em，并把缩进归零写在样式最前面，再应用浮动首字。这个坑基本是必踩的，因为大多数默认模板不会显示缩进值，只有在覆盖时才会意识到它的存在。

5.2 引文边距在某些阅读器上不生效

现象：设计好的引用段落设置了 margin-left:2.5em 和 margin-right:2.5em，在电脑阅读器上显示正常，换到某个手机阅读器后引文和正文完全齐平。

原因：部分阅读器对 margin 属性的兼容性有限，尤其是左右外边距，在窄屏设备上偶尔被忽略。

解决：遇到引用类样式时优先使用 padding 而不是 margin，padding 的兼容性相对更好。或者干脆用 br 标签插入空行来制造视觉分隔，虽然不够优雅，但宣染结果最稳定。制作之前先查看目标阅读器的样式支持列表，不能拿一个阅读器验证就当全部兼容。

5.3 浮动图片连续插入时挤成一团

现象：正文中连续插入几幅右浮动图片，原本预期每幅图各占一行，右侧依次排下去，结果图片全部堆叠在同一个位置，相互覆盖。

原因：多个浮动元素没有清理，它们都试图向右侧靠拢，浏览器按浮动规则把它们放在同一条浮动线上，导致重叠。

解决：给浮动元素的样式里加 clear 属性，方向与浮动方向保持一致。float:right 对应 clear:right，float:left 对应 clear:left。加完清理之后，连续插入的浮动图片会按顺序逐行排列，不再互相重叠。

5.4 修改外部样式表后内容没有任何变化

现象：用文本编辑器改完 css 文件，替换回 epub 包内，打开阅读器发现样式变了一点，有些修改还停留在旧值。

原因：一是阅读器缓存了旧文件，二是替换时文件名不一致，三是css 文件内部语法错误导致整段被忽略。

解决：先把 css 文件用浏览器等工具验证语法，确认无误后再打包。替换完成后强制阅读器刷新或重新导入文件。如果是自己维护的热替换流程，尽量保持文件名和路径与原包完全一致，不要另存为带括号的新文件名。

5.5 标题标签被当作普通样式工具滥用

现象：为了把某段提示文字变大加粗，直接使用 h3 标签包裹，阅读器里确实显示了很大的标题效果，但目录与章节结构也出现了这个标题的条目，破坏了章节导航。

原因：标题标签在 epub 结构中有语义含义，阅读器会把它识别为章节标题并计入目录，使用位置不当会影响导航结构。

解决：如果需要大号加粗文字，使用 span 配合 font-size 和 font-weight，不要用标题标签。标题标签留给真正的章节标题使用，这样才能保证生成的目录与实际结构一致。

6. 实例拆解：几个可以直接套用的排版组合

把前面讲到的知识点组合起来，看几个常用于 epub 内页的设计。每个实例先定义外部样式，再写调用方式，方便复制到项目里测试。

做一个带边框的图片组合，常用于人物介绍或插图附注：

.img-card { float: right; border-style: solid; border-width: 1px; margin: 0.4em; padding: 0.4em; max-width: 50%; text-align: center; } .img-title { font-size: 1.3em; text-indent: 0em; text-align: center; font-weight: bold; }

[div class="img-card"][img src="images/portrait.jpg" /][p class="img-title"]图片说明文字[/p][/div]

用一个 div 把图片和说明装进同一个框，声明边框和内部对齐方式，图片下方放一行居中的说明文字，适合做人物栏、插图注解和章首配图。

再做一个提示框，利用背景色和点状边框突出小贴士内容：

.tip-box { background-color: #fdf2f2; border-style: dotted; border-width: 2px; padding: 1em; margin-top: 1em; margin-bottom: 1em; } .tip-title { font-weight: bold; text-align: center; text-indent: 0em; font-size: 1.2em; }

[div class="tip-box"][p class="tip-title"]小贴士[/p][p]这里写提示内容，注意边框包裹效果，多行文字会自动延伸。[br /]换行后样式保持一致。[/p][/div]

这个组合的思路和带边框图片一致，只是把边框样式换成点状，加一个背景色，视觉上更醒目，适合放在章节末尾做延伸阅读提示。

到这里，内容基本覆盖了从标签基础到外部样式表再到浮动排版的完整路径。我个人现在做任何一本 epub，都会先把用到的类选择器提前全部定义好，哪怕正文还没写，也先把样式框架定下来，再往里填内容。这样修改样式时只需要打开 css 文件集中处理，而不必在每个章节里翻找内联代码。这个习惯帮我省下了大量来回搜索的时间，也希望这个思路能帮你在拿到一份 epub 排版资源后快速上手、少走弯路。

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