[toc]
1 万年都在补基础啊
<!DOCTYPE html>
1 | <!DOCTYPE> 声明位于文档中的最前面的位置, |
HTML <meta> 标签
1 | 元数据(Metadata)是数据的数据信息。 |
HTML <link> 标签 / HTML <script> 标签
1 | <link> 标签定义文档与外部资源的关系。 |
2 HTML 全局属性
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditableNew | 规定是否可编辑元素的内容。 |
contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-*New | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggableNew | 指定某个元素是否可以拖动 |
dropzoneNew | 指定是否将数据复制,移动,或链接,或删除 |
hiddenNew | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheckNew | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translateNew | 指定是否一个元素的值在页面载入时是否需要翻译 |
3 我们怎么实现这个动画的
1 | const panels = document.querySelectorAll('.panel') |
逻辑
1 | 1 查找元素 |
4 CSS 观察
既然单纯的知识记不住,那试一试编故事吧
1 先引入了字体
2 调整页面宽度的计算方式
box-sizing
2 作为一个非专业选手 - 我能为记住如此繁多的属性做点什么
- 既然砸门都到二阶知识了 - 我建立了一个所有属性的思维脑图
- 食用方法:
- 给属性加标签 遇到一个就加一个
- 给属性画更多的图
链接
1 | body { |
下面的在 软件中标注了
1 | .panel { |
1 | transition: opacity 0.3s ease-in 0.4s; |
- transition-property,
- transition-duration,
- transition-timing-function
- (1)linear:匀速
- (2)ease-in:加速
- (3)ease-out:减速
- (4)cubic-bezier函数:自定义速度模式
- transition-delay
CSS3 @media 查询
1 | 如果文档宽度小于 300 像素则修改背景颜色(background-color): |
在例子中
1 | @media (max-width: 480px) { |
如果小于 480px 隐藏掉 4-5两个元素
note