WEB前端教程：自动生成的字母表

回顾以前编写代码，尝试用 CSS 变量和计数器重构你的代码，多多练习熟悉它们的用法

课程目标

学习 CSS 新特性阴影
变量的声明和引用
掌握 CSS 计数器具体使用方法
计数器的初始值和步长
计数器的序列值

阅读学习

变量和计数器

阴影

拟态效果是不是很惊艳，如果你还不是很熟练，可以在这里玩玩拟态效果

编码一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计数器和变量练习</title>
  </head>
  <body>
    <figure>
      <div></div>
      <div></div>
      <!-- 一共 26 个 <div>,此处略去 20个-->
      <div></div>
      <div></div>
    </figure>
  </body>
</html>

参考如下示例图，应用 CSS 布局以及计数器等相关知识到上述给出的 HTML 模板代码，实现一个根据首字母自动生成的字母表

应用 flex 或者 grid 布局每个 div 子元素，每个 div 是一个矩形小方格，每行排列 6 个子元素，尽可能多种方案都实现一下
给每一个 div 应用 css3 阴影模拟拟态风格。
用伪元素创建第一个大写字母和小写字母，应用定位知识，让它们所处与示例图一致
声明一个计数器，然后在:before 伪元素中读取大写字母序列,在:after 伪元素中读取小写字母序列
样例中的颜色和样式可以自行设定
注意，因为我们此题是要练习计数器的使用，所以，我们不需要写出所有的字母，只需要在伪元素中写出第一个字母即可

编码二

基于上一个任务，添加一个更换主题颜色的功能，请使用 CSS 变量来完成这个功能

应用 CSS 变量重构你的代码，将使用的各种颜色定义成变量
添加两个按钮，实现当按钮点击时，字母表就更换一套主题颜色，具体需要更新背景颜色，大写字母颜色，盒子阴影颜色，小写字母颜色
每一套主题颜色，请使用 CSS 变量进行定义和使用
只需要需要关注 HTML 和 CSS 部分实现，不需要实现 Javascript.

提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

这里有很多方法(opens new window)

重构你的代码

学习完这课之后，回顾以前编写代码，尝试用 CSS 变量和计数器重构你的代码，多多练习熟悉它们的用法

自测问题

如何声明一个 CSS 变量，使用 CSS 变量
CSS 变量有什么好处？思考它的应用场景
怎么让 CSS 变量在全局范围内都可以访问到
--my-color和 --My-color表示同一个变量对吗？
如果遇到无效的 CSS 变量会发生什么？
CSS 计数器是什么？有什么作用？
请思考一下几个属性的作用，以及语法
- counter-reset
- counter-increment
- content - 插入生成的内容
- counter() 或 counters()
如何实现 CSS 计数器倒数显示，比如本来应该为 1，2，3，结果变为 3，2，1

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-19 13:59
阅读 ( 475 )
分类：WEB前端开发

WEB前端教程：自动生成的字母表

课程目标

阅读学习

变量和计数器

阴影

编码一

重构你的代码

自测问题

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »