学css的基本知识（css-从入门到放弃-01）
万年都在补基础
目录
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" 属性指向外部脚本文件。
|
属性 |
描述 |
|
accesskey |
设置访问元素的键盘快捷键。 |
|
class |
规定元素的类名（classname） |
|
contenteditableNew |
规定是否可编辑元素的内容。 |
|
contextmenuNew |
指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
|
data-*New |
用于存储页面的自定义数据 |
|
dir |
设置元素中内容的文本方向。 |
|
draggableNew |
指定某个元素是否可以拖动 |
|
dropzoneNew |
指定是否将数据复制，移动，或链接，或删除 |
|
hiddenNew |
hidden 属性规定对元素进行隐藏。 |
|
id |
规定元素的唯一 id |
|
lang |
设置元素中内容的语言代码。 |
|
spellcheckNew |
检测元素是否拼写错误 |
|
style |
规定元素的行内样式（inline style） |
|
tabindex |
设置元素的 Tab 键控制次序。 |
|
title |
规定元素的额外信息（可在工具提示中显示） |
|
translateNew |
指定是否一个元素的值在页面载入时是否需要翻译 |
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 调整页面宽度的计算方式box-sizing
- 既然砸门都到二阶知识了 - 我建立了一个所有属性的思维脑图
- 食用方法： 给属性加标签 遇到一个就加一个给属性画更多的图
链接
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
- 需要资料请留言
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
