CSS3艺术:网页设计案例实战之angular实现 四实现头部和底部的导航

Posted 2022-11-04 lxhjh

一、修改第一章介绍的html

修改后的文件(src\\app\\chapter01\\chapter01-introduce\\chapter01-introduce.component.html)如下:

<p>1、本章将回顾CSS中重要的基本概念。</p>

<p>2、本章提供了29个示例。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<small>它们充分展现了CSS丰富的表现力，只用寥寥几行CSS代码就能描绘出杨辉三角形、象棋棋盘、素数集合等。</small></p>

<p>3、读完本章，就会发现用CSS创作艺术作品是一种快乐的体验。</p>

二、修改第一章第一节的html

修改后的文件(src\\app\\chapter01\\chapter0101\\chapter0101.component.html)如下:

<h2>1.1 CSS简介</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;CSS全称是“Cascading Style Sheets”，中文译为“层叠样式表”，不过一般不用这样的官名称呼它，提到它时只简称为“CSS”或“样式表”。CSS代码和HTML代码（本书也经常称它为DOM结构）一起配合，构建出网页的外观。打个比方，HTML就像是人的骨骼，而CSS则像是人的皮肤和肌肉，骨骼定义了身体的结构，而皮肤和肌肉塑造了我们的外貌，当网页的DOM结构确定下来之后，我们就可以通过书写CSS来灵活地配置网页的外观了。如果给你和你的同学相同的DOM结构，但CSS代码由你们分别来写，最后的网页一定会长得不一样，就好像你和你的同学都有206块骨头，但你们的肤色、高矮、胖瘦不同，所以没有人会说你们是同一个人。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;最初的网页是没有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.selectedChapter;
      this.previousSection = this.emptySection;

      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[sectionIndex + 1];
     else if (sectionIndex == (this.selectedChapter.sections.length - 1)) 
      //最后一个小节
      this.previousChapter = this.selectedChapter;
      this.previousSection = this.selectedChapter.sections[sectionIndex - 1];

      if (chapterIndex == (this.chapters.length - 1)) 
        //最后一章的最后一小节，后面没有导航节点
        this.nextChapter = this.emptyChapter;
        this.nextSection = this.emptySection;
       else 
        this.nextChapter = this.chapters[chapterIndex + 1];
        this.nextSection = this.nextChapter.sections[0];
      
     else 
      //中间小节
      this.previousChapter = this.selectedChapter;
      this.previousSection = this.selectedChapter.sections[sectionIndex - 1];
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[sectionIndex + 1];
    
  

5、增加选中章的底部导航参数值设置的私有方法

/** 选中章的底部导航参数值设置 */
  private navChapterHandle() 
    let chapterIndex = this.chapters.indexOf(this.selectedChapter);
    if (chapterIndex == 0) 
      //第一章
      this.previousChapter = this.emptyChapter;
      this.previousSection = this.emptySection;
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[0];
     else if (chapterIndex == (this.chapters.length - 1)) 
      //最后一章
      this.previousChapter = this.chapters[chapterIndex - 1];
      this.previousSection = this.previousChapter.sections[this.previousChapter.sections.length - 1];
      this.nextChapter = this.emptyChapter;
      this.nextSection = this.emptySection;
     else 
      //中间章节
      this.previousChapter = this.chapters[chapterIndex - 1];
      this.previousSection = this.previousChapter.sections[this.previousChapter.sections.length - 1];
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[0];
    
  

6、修改导航链接点击事件处理方法

/** 导航链接点击事件处理方法 */
  navLinkClick(chapter: Chapter, section?: Section) 
    let url = "";
    this.navLinkHandleInit(chapter);//初始化
    if (section) 
      /** 当前选中的是小节 */
      url = section.link;
      this.selectedSection = section;
      this.navSectionHandle();//选中小节的底部导航参数值设置
     else 
      /** 当前选中的是章 */
      url = this.selectedChapter.link;
      this.selectedSection = this.emptySection;
      this.navChapterHandle();//选中章的底部导航参数值设置
    
    this.router.navigateByUrl(url);
  

7、完整文件

修改完成之后的文件(src\\app\\app.component.ts)如下

import  Component  from '@angular/core';
import  Router  from '@angular/router';
import  Chapter  from './model/chapter.model';
import  Section  from './model/section.model';
import  StaticDataSource  from './model/static.data.source';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 

  /** 空的章 */
  private emptyChapter: Chapter = new Chapter(0, "", "", []);
  /** 空的小节 */
  private emptySection: Section = new Section(0, "", "");
  /** 章节数组 */
  public chapters: Chapter[] = [];
  /** 选中的章 */
  public selectedChapter: Chapter = this.emptyChapter;
  /** 选中的小节 */
  public selectedSection: Section = this.emptySection;
  /** 前一个章*/
  public previousChapter: Chapter = this.emptyChapter;
  /**前一个小节 */
  public previousSection: Section = this.emptySection;
  /** 下一个章 */
  public nextChapter: Chapter = this.emptyChapter;
  /** 下一个小节  */
  public nextSection: Section = this.emptySection;


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

  /** 导航链接点击事件处理方法 */
  navLinkClick(chapter: Chapter, section?: Section) 
    let url = "";
    this.navLinkHandleInit(chapter);//初始化
    if (section) 
      /** 当前选中的是小节 */
      url = section.link;
      this.selectedSection = section;
      this.navSectionHandle();//选中小节的底部导航参数值设置
     else 
      /** 当前选中的是章 */
      url = this.selectedChapter.link;
      this.selectedSection = this.emptySection;
      this.navChapterHandle();//选中章的底部导航参数值设置
    
    this.router.navigateByUrl(url);
  

  /** 选中章的底部导航参数值设置 */
  private navChapterHandle() 
    let chapterIndex = this.chapters.indexOf(this.selectedChapter);
    if (chapterIndex == 0) 
      //第一章
      this.previousChapter = this.emptyChapter;
      this.previousSection = this.emptySection;
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[0];
     else if (chapterIndex == (this.chapters.length - 1)) 
      //最后一章
      this.previousChapter = this.chapters[chapterIndex - 1];
      this.previousSection = this.previousChapter.sections[this.previousChapter.sections.length - 1];
      this.nextChapter = this.emptyChapter;
      this.nextSection = this.emptySection;
     else 
      //中间章节
      this.previousChapter = this.chapters[chapterIndex - 1];
      this.previousSection = this.previousChapter.sections[this.previousChapter.sections.length - 1];
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[0];
    
  

  /** 选中小节的底部导航参数值设置 */
  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.selectedChapter;
      this.previousSection = this.emptySection;

      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[sectionIndex + 1];
     else if (sectionIndex == (this.selectedChapter.sections.length - 1)) 
      //最后一个小节
      this.previousChapter = this.selectedChapter;
      this.previousSection = this.selectedChapter.sections[sectionIndex - 1];

      if (chapterIndex == (this.chapters.length - 1)) 
        //最后一章的最后一小节，后面没有导航节点
        this.nextChapter = this.emptyChapter;
        this.nextSection = this.emptySection;
       else 
        this.nextChapter = this.chapters[chapterIndex + 1];
        this.nextSection = this.nextChapter.sections[0];
      
     else 
      //中间小节
      this.previousChapter = this.selectedChapter;
      this.previousSection = this.selectedChapter.sections[sectionIndex - 1];
      this.nextChapter = this.selectedChapter;
      this.nextSection = this.selectedChapter.sections[sectionIndex + 1];
    
  

  /** 导航处理初始化 */
  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;
  

四、修改根组件的html

1、实现头部面包屑导航

<nav class="breadcrumb d-flex align-items-center">
            <a class="btn breadcrumb-item" (click)="navLinkClick(selectedChapter)">selectedChapter.title</a>
            <span class="breadcrumb-item active">selectedSection.title</span>
</nav>

2、底部上一个导航

<div *ngIf="previousChapter.id != 0">
              <div *ngIf="previousSection.id == 0">
                <button class="btn" (click)="navLinkClick(previousChapter)">
                  <i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i>
                  previousChapter.title
                </button>
              </div>
              <div *ngIf="previousSection.id != 0">
                <button class="btn" (click)="navLinkClick(previousChapter,previousSection)">
                  <i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i>
                  previousSection.title
                </button>
              </div>
            </div>

3、底部下一个导航

<div *ngIf="nextChapter.id != 0">
              <div *ngIf="nextSection.id == 0">
                <button class="btn" (click)="navLinkClick(nextChapter)">
                  nextChapter.title
                  <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i>
                </button>
              </div>
              <div *ngIf="nextSection.id != 0">
                <button class="btn" (click)="navLinkClick(nextChapter,nextSection)">
                  nextSection.title
                  <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i>
                </button>
              </div>
            </div>

4、完整代码

修改完成之后的文件(src\\app\\app.component.html)如下

  <div class="container-fluid">
    <div class="row bg-light main">
      <div class="col-3 d-flex flex-column p-3 scrollable">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
          <span class="fs-6">CSS3艺术:网页设计案例实战</span>
        </a>
        <ul class="list-unstyled ps-0">
          <li class="mb-1" *ngFor="let chapter of chapters;let i=index">
            <a class="btn btn-toggle" data-bs-toggle="collapse" href="#chapterchapter.id-collapse"
              aria-expanded="false" (click)="navLinkClick(chapter)">
              chapter.title
            </a>
            <div class="collapse" id="chapterchapter.id-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li *ngFor="let section of chapter.sections">
                  <a class="link-dark rounded" (click)="navLinkClick(chapter,section)"
                    [class.active]="section.title==selectedSection.title">
                    section.title
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-9 card">
        <div class="card-header">
          <nav class="breadcrumb d-flex align-items-center">
            <a class="btn breadcrumb-item" (click)="navLinkClick(selectedChapter)">selectedChapter.title</a>
            <span class="breadcrumb-item active">selectedSection.title</span>
          </nav>
        </div>
        <div class="card-body scrollable">
          <router-outlet></router-outlet>
        </div>
        <div class="card-footer d-flex justify-content-between">
          <div>
            <div *ngIf="previousChapter.id != 0">
              <div *ngIf="previousSection.id == 0">
                <button class="btn" (click)="navLinkClick(previousChapter)">
                  <i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i>
                  previousChapter.title
                </button>
              </div>
              <div *ngIf="previousSection.id != 0">
                <button class="btn" (click)="navLinkClick(previousChapter,previousSection)">
                  <i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i>
                  previousSection.title
                </button>
              </div>
            </div>
          </div>
          <div>
            <div *ngIf="nextChapter.id != 0">
              <div *ngIf="nextSection.id == 0">
                <button class="btn" (click)="navLinkClick(nextChapter)">
                  nextChapter.title
                  <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i>
                </button>
              </div>
              <div *ngIf="nextSection.id != 0">
                <button class="btn" (click)="navLinkClick(nextChapter,nextSection)">
                  nextSection.title
                  <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>