CSS3艺术:网页设计案例实战之angular实现 一数据准备

Posted 2022-11-23 lxhjh

《CSS3艺术:网页设计案例实战》的目录，按照章节，进行二级数据组织，以便于导航。

1、在src/app文件夹下，建立model文件夹

2、在model文件夹中，建立section.model.ts文件，并建立Section类，用于存放“节”

export class Section 
    constructor(
        public id: number,
        public title: string,
        public link: string
    )  

3、在model文件夹中，建立chapter.model.ts文件，并建立Chapter类，用于存放“章”

import  Section  from "./section.model";

export class Chapter 
    constructor(
        public id: number,
        public title: string,
        public sections:Section[]
    )

4、在model文件夹中建立model模块

ng g m model/model

angular/cli在src/app/model文件夹下建立model.module.ts的文件

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

@NgModule(
  declarations: [],
  imports: [
    CommonModule
  ]
)
export class ModelModule  

5、在model文件夹中建立static.data.source.ts文件，用于提供文章的章节目录

import  Injectable  from "@angular/core";
import  from, Observable  from "rxjs";
import  Chapter  from "./chapter.model";
import  Section  from "./section.model";

@Injectable()
export class StaticDataSource 
    private chapters:Chapter[]=[
        new Chapter(1,"第1章 CSS基础知识",[
            new Section(1,"1.1 CSS简介",""),
            new Section(2,"1.2 在页面中应用CSS",""),
            new Section(3,"1.3 常用CSS属性一览",""),
            new Section(4,"1.4 选择器",""),
            new Section(5,"1.5 单位",""),
            new Section(6,"1.6 盒模型",""),
            new Section(7,"1.7 定位",""),
            new Section(8,"1.8 布局",""),
            new Section(9,"1.9 重叠",""),
            new Section(10,"1.10 继承和引用","")
        ]),
        new Chapter(2,"第2章 伪元素",[
            new Section(1,"2.1 ::before和::after伪元素",""),
            new Section(2,"2.2 content属性",""),
            new Section(3,"2.3 灵活使用伪元素",""),
            new Section(4,"2.4 项目应用","")
        ]),
        new Chapter(3,"第3章 边框",[
            new Section(1,"3.1 边框属性",""),
            new Section(2,"3.2 描边造型",""),
            new Section(3,"3.3 几何造型",""),
            new Section(4,"3.4 项目应用","")
        ]),
        new Chapter(4,"第4章 背景",[
            new Section(1,"4.1 背景属性",""),
            new Section(2,"4.2 线性渐变linear-gradient()",""),
            new Section(3,"4.3 径向渐变radial-gradient()",""),
            new Section(4,"4.4 项目应用","")
        ]),
        new Chapter(5,"第5章 阴影",[
            new Section(1,"5.1 盒阴影box-shadow",""),
            new Section(2,"5.2 形状阴影函数drop-shadow()",""),
            new Section(3,"5.3 项目应用","")
        ]),
        new Chapter(6,"第6章 剪切、滤镜和色彩混合",[
            new Section(1,"6.1 剪切clip-path",""),
            new Section(2,"6.2 滤镜filter",""),
            new Section(3,"6.3 色彩混合",""),
            new Section(4,"6.4 项目应用","")
        ]),
        new Chapter(7,"第7章 变量与计数器",[
            new Section(1,"7.1 变量",""),
            new Section(2,"7.2 计数器",""),
            new Section(3,"7.3 项目应用","")
        ]),
        new Chapter(8,"第8章 变换",[
            new Section(1,"8.1 变换函数",""),
            new Section(2,"8.2 变换原点transform-origin",""),
            new Section(3,"8.3 多重变换",""),
            new Section(4,"8.4 项目应用","")
        ]),
        new Chapter(9," 第9章 缓动",[
            new Section(1,"9.1 缓动属性",""),
            new Section(2,"9.2 设置恢复效果",""),
            new Section(3,"9.3 令一组元素缓动",""),
            new Section(4,"9.4 对元素的不同状态进行交互设计",""),
            new Section(5,"9.5 项目应用","")
        ]),
        new Chapter(10,"第10章 动画",[
            new Section(1,"10.1 动画属性",""),
            new Section(2,"10.2 关键帧@keyframes",""),
            new Section(3,"10.3 不同属性的动画效果",""),
            new Section(4,"10.4 项目应用","")
        ]),
        new Chapter(11,"第11章 CSS造型创意",[
            new Section(1,"11.1 螺旋形状的盘式蚊香",""),
            new Section(2,"11.2 倒圆锥形状的热气球",""),
            new Section(3,"11.3 逼真金属质感的笔记本电脑",""),
            new Section(4,"11.4 用典型特征塑造的卓别林形象","")
        ]),
        new Chapter(12,"第12章 CSS动画创意",[
            new Section(1,"12.1 层叠起伏的海浪",""),
            new Section(2,"12.2 天体运转模型",""),
            new Section(3,"12.3 充满秩序美的队列变色旋转动画",""),
            new Section(4,"12.4 几何光学引起的咖啡馆墙壁错觉动画","")
        ]),
        new Chapter(13,"第13章 文字特效创意",[
            new Section(1,"13.1 撕纸文字",""),
            new Section(2,"13.2 牛奶文字",""),
            new Section(3,"13.3 闪光的霓虹文字",""),
            new Section(4,"13.4 立体的阶梯文字","")
        ]),
    ];

    getChapters(): Observable<Chapter[]> 
        return from([this.chapters]);