编程技术文章分享与教程

网站首页 > 技术文章 正文

css-从入门到放弃-01 css进阶教程

hmc789 2024-11-11 12:52:04 技术文章 2 ℃

万年都在补基础

目录

dbe766e58e8641f7e39d8304edd0091f.png

1 万年都在补基础

<!DOCTYPE html>

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

HTML <meta> 标签

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

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

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

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

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 我们怎么实现这个动画的

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 添加效果

4 CSS 观察

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

1 先引入了字体

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

box-sizing

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

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

链接

CSS 属性.xmind

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

下面的在 软件中标注了

.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

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 查询

如果文档宽度小于 300 像素则修改背景颜色(background-color):

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

在例子中

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

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

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

note

  • 需要资料请留言

Tags：

猜你喜欢

标签列表
最新留言