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

《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]);}
}

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

【读书笔记】《CSS3艺术：网页设计案例实战》——【一】伪元素、边框、背景属性
文章目录第2章伪元素 2.1 ::before和::after伪元素[^eg1] 2.2 content属性[^eg2] 2.3 灵活使用伪元素 2.3.1 用伪元素拼接造型[^eg3] 2.3. ...
精美网页设计案例_用户体验设计的精美艺术
精美网页设计案例 There are interactive experiences that simply blow you away. You know it's been a positive ...
电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局第二步,建立基本的文本目录及文件第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码第四步, ...
电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[顶部导航] 文章目录 [考拉海购网站]之[搜索框那一栏] 第一步,分析布局第二步,在html代码里面补全需要的标 ...
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局第二步,写需要的html标签 i ...
电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】
上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[商品栏及右侧垂直导航] 文章目录电商项目实战第六节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[页 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[轮播图特效] 文章目录 [考拉海购网站]之[商品栏及右侧垂直导航] 第一步,页面布局分布情况分析第二步,根据页面 ...
《图解CSS3：核心技术与案例实战》——1.1节什么是CSS3
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第1章,第1.1节什么是CSS3,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 1.1 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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