css-从入门到放弃-01

评论

[toc]

dbe766e58e8641f7e39d8304edd0091f.png

1 万年都在补基础啊

<!DOCTYPE html>

1
2
3
4
<!DOCTYPE> 声明位于文档中的最前面的位置，
处于 <html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签；
它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML <meta> 标签

1
2
3
4
5
6
7
元数据（Metadata）是数据的数据信息。
<meta> 标签提供了 HTML 文档的元数据。
元数据不会显示在客户端，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，
文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），
搜索引擎（关键词），或其他 Web 服务调用。

HTML <link> 标签 / HTML <script> 标签

1
2
3
4
5
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

2 HTML 全局属性

属性描述
accesskey设置访问元素的键盘快捷键。
class规定元素的类名（classname）
contenteditableNew规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New用于存储页面的自定义数据
dir设置元素中内容的文本方向。
draggableNew指定某个元素是否可以拖动
dropzoneNew指定是否将数据复制，移动，或链接，或删除
hiddenNewhidden 属性规定对元素进行隐藏。
id规定元素的唯一 id
lang设置元素中内容的语言代码。
spellcheckNew检测元素是否拼写错误
style规定元素的行内样式（inline style）
tabindex设置元素的 Tab 键控制次序。
title规定元素的额外信息（可在工具提示中显示）
translateNew指定是否一个元素的值在页面载入时是否需要翻译

3 我们怎么实现这个动画的

1
2
3
4
5
6
7
8
9
10
11
12
const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})
function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

逻辑

1
2
3
4
1 查找元素
2 订阅事件
3 去除所有的效果
4 添加效果

4 CSS 观察

既然单纯的知识记不住，那试一试编故事吧

1 先引入了字体

2 调整页面宽度的计算方式

box-sizing
动画5.gif

2 作为一个非专业选手 - 我能为记住如此繁多的属性做点什么

  • 既然砸门都到二阶知识了 - 我建立了一个所有属性的思维脑图
  • 食用方法：
    1. 给属性加标签 遇到一个就加一个
    2. 给属性画更多的图

链接

CSS 属性.xmind

1
2
3
4
5
6
7
8
9
body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

下面的在 软件中标注了
8901d97c17f3f9f72596c57509369c7b.png

1
2
3
4
5
6
7
8
9
10
11
12
13
.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: all 700ms ease-in;
}

0fd85d1de41d41ef2f914f6ce81a42ce.png

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
2
3
4
5
6
7
如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

在例子中

1
2
3
4
5
6
7
8
9
10
@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

如果小于 480px 隐藏掉 4-5两个元素

note

后续

  1. 回顾第一次
  2. 第二次回顾

zyqcome电子民工

你不同于那些人