首页  思维导图  详情

frontend

2025-11-12 22:56:29   0  举报





仅支持查看

AI智能生成

11111

项目管理

作者其他创作

大纲/内容

变换、过渡动画、动画

变换

1.平移translate(x-value, y-value) // x轴和y轴平移距离

2.缩放scale(x-value, y-value) // x轴和y轴的放大倍数

3.rotate(90deg) // 旋转度数

过渡动画

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

动画

@keyframes 规定动画。
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

音频、视屏

子主题

DOM事件，绑定事件

获取DOM，操作DOM

常用html标签

图形标签

<img src=’”…”> 定义图像

<hr> 水平线

表格标签

<table>…</table>   定义表格

<th>…</th>            定义表格中的表头单元格

<tr>…</tr>             定义表格中的行

<td>…</td>           定义表格中的单元

文本标签

<h1>...</h1>               标题字大小（h1~h6）

<b>...</b>                   粗体字

<strong>...</strong>   粗体字(强调)

<i>...</i>                      斜体字

<em>...</em>              斜体字(强调)

<center>…</center>   居中文本

<ul>…</ul>                 无序列表

<ol>…</ol>                 有序列表

<li>…</li> 列表项目

<a href=”…”>…</a>    超链接

<font> 定义文本字体尺寸、颜色、大小

<sub> 下标

<sup> 上标

<br> 换行

<p> 段落

其它

<form>…</form> 定义供用户输入的 HTML 表单

<frame> 定义框架集的窗口或框架

<div>...</div>

<span>...</span>

基本

<html>…</html>      定义 HTML 文档

<head>…</head>   文档的信息

<meta>                    HTML 文档的元信息

<title>…</title>        文档的标题

<link>                      文档与外部资源的关系

<style>…</style>    文档的样式信息

<body>…</body>   可见的页面内容

                 注释

常用css选择器及其权重

第一级别：无优先条件的属性我们只要在属性后添加 !important 即可。这个属性可以覆盖此页面所有位置定义的同种元素样式。

第二级别：在元素标签内直接添加 style ，俗称内联样式。

第三级别：ID 选择器。例：#id{color:red;}

第四级别：类选择器，属性选择器或者伪类选择器。例：.one{color:blue;}

第五级别：元素选择器。例：div{color:yellow;}

第六级别：统配选择器。例：*{color:green;}

四个等级定义如下：

第一级：内联样式，例：style=""，它的权值为1000

第二级：ID选择器，例：#id，它的权值为100

第三级：class选择器，例：.one，它的权重为10

第四级：元素选择器，例：div,p,h1 ，它的权重为1

定位、浮动、flex弹性布局

定位

什么是定位

定位:将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式

1、静态定位：选择器{ position: static; }

2、相对定位：选择器{ position: relative; }

3、绝对定位：选择器{ position: absolute; }

4、固定定位：选择器{ position: fixed; }

5、粘性定位：选择器{ position: sticky; }