一、修改第一章介绍的html
修改后的文件(src\app\chapter01\chapter01-introduce\chapter01-introduce.component.html)如下:
<p>1、本章将回顾CSS中重要的基本概念。</p>
<p>2、本章提供了29个示例。</p>
<p> <small>它们充分展现了CSS丰富的表现力,只用寥寥几行CSS代码就能描绘出杨辉三角形、象棋棋盘、素数集合等。</small></p>
<p>3、读完本章,就会发现用CSS创作艺术作品是一种快乐的体验。</p>
二、修改第一章第一节的html
修改后的文件(src\app\chapter01\chapter0101\chapter0101.component.html)如下:
<h2>1.1 CSS简介</h2>
<p> CSS全称是“Cascading Style Sheets”,中文译为“层叠样式表”,不过一般不用这样的官名称呼它,提到它时只简称为“CSS”或“样式表”。CSS代码和HTML代码(本书也经常称它为DOM结构)一起配合,构建出网页的外观。打个比方,HTML就像是人的骨骼,而CSS则像是人的皮肤和肌肉,骨骼定义了身体的结构,而皮肤和肌肉塑造了我们的外貌,当网页的DOM结构确定下来之后,我们就可以通过书写CSS来灵活地配置网页的外观了。如果给你和你的同学相同的DOM结构,但CSS代码由你们分别来写,最后的网页一定会长得不一样,就好像你和你的同学都有206块骨头,但你们的肤色、高矮、胖瘦不同,所以没有人会说你们是同一个人。</p>
<p> 最初的网页是没有CSS的,就像最初的房子不用装修一样,看起来相当简陋。1996年CSS 1.0横空出世,提供了文本、颜色等功能,1998年推出的2.0版本和随后推出的2.1修正版本,支持了定位、盒模型等功能,2001年开始制定3.0规范,支持动画、变形等丰富的视觉效果。如此看来,CSS3已经有十几年的历史了,不算是什么新技术,事实是尽管标准制定得相当快,但因为在浏览器大战期间各浏览器厂商并不尊重公开标准,对CSS 2.1的支持都不统一,更别说CSS3了,这导致CSS 3直到10年之后才真正得到广泛支持。因为CSS支持的功能越来越多,所以从3.0开始,规范被分解为若干个独立的小模块,例如文本、颜色、定位等都是单独的小模块,便于各模块分别发展,就像一个单细胞生物进化成了多细胞生物,各个模块之间相互分工和依赖,提供了更强大的生命力,本书内容主要涉及伪元素、背景和边框、滤镜、缓动、变形、动画等模块。</p>
<p class="bg-danger text-blue">特别说明:此处作者总结的太棒,我为做任何删改。</p>
三、修改根组件的ts
1、定义导航变量
为底部导航的左边(上一个)和右边(下一个)的导航,定义四个变量
/** 前一个章*/
public previousChapter: Chapter = this.emptyChapter;
/**前一个小节 */
public previousSection: Section = this.emptySection;
/** 下一个章 */
public nextChapter: Chapter = this.emptyChapter;
/** 下一个小节 */
public nextSection: Section = this.emptySection;
2、在构造函数中设置初始值
constructor(private dataSource: StaticDataSource,
private router: Router) {
this.dataSource.getChapters().subscribe(data => {
this.chapters = data;
if (this.chapters.length > 0) {
this.selectedChapter = this.chapters[0];
/** 下一个章 */
this.nextChapter = this.selectedChapter;
/** 下一个小节 */
this.nextSection = this.nextChapter.sections[0];
}
});
}
3、增加导航处理初始化的私有方法
/** 导航处理初始化 */
private navLinkHandleInit(chapter: Chapter) {
let tempChapter = this.chapters.find(p => p.id == chapter.id);
this.selectedChapter = this.emptyChapter;
if (tempChapter) {
this.selectedChapter = tempChapter;
}
this.previousChapter = this.emptyChapter; //上一个节点的章
this.previousSection = this.emptySection; //上一个节点的小节
this.nextChapter = this.emptyChapter; //下一个节点的章
this.nextSection = this.emptySection;
}
4、增加选中小节的底部导航参数值设置的私有方法
/** 选中小节的底部导航参数值设置 */
private navSectionHandle() {
/** 选中章所在数组的序号 */
let chapterIndex = this.chapters.indexOf(this.selectedChapter);
let sectionIndex = this.selectedChapter.sections.indexOf(this.selectedSection);
if (sectionIndex == 0 || sectionIndex == -1) {
//第一个小节
this.previousChapter = this.selec