20210524—林多泰

日志

一、知识点总结

1、cursor 用于定义鼠标样式

cursor: url(xxx),auto;

2、transform 应用于元素的2D或3D转换,它常用的值有

(1)none 定义不进行转换

(2)translate(x,y) 定义 2D 转换

(3)translate3d(x,y,z) 定义 3D 转换

(4)translateX(x)用于转换 X 轴的值

(5)translateY(y) 用于转换Y 轴的值

(6)translateZ(z) 用于转换 Z 轴的值

3、transition 设置元素当过渡效果,它的属性有

transition-duration transition指定完成时间

4、动画语法

@keyframes animationName{
from {}
to {}
}

(1)animation-name 绑定到选择器的关键帧的名称

(2)animation-duration 指定动画的完成时间

(3)animation-iteration-count定义动画的播放次数,infinite 循环限次

(4)animation-play-state 指定动画是否正在运行或已暂停。

5、布局

(1)布局的正确顺序:正常布局流、display 属性、弹性盒子、网格、浮动、定位、CSS 表格布局、多列布局

6、float 浮动

使用fioat使图片周围的文本浮起来

img {
float: left;
margin-right: 30px;
}

多列浮动

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}

清除浮动chear

(1)left :停止左浮动 (2)right :停止右浮动 (3)both :停止左右浮动

7、定位 position

(1)静态定位staitc

(2)相对定位position:relative;需要添加值top , bottom , left 和right

(3)绝对定位position:absolute;

(4)固定定位fixed

二、心得体会

​ 今天又是在知识的道路上前进的一天,讲的东西掌握的还行,主要学习了动画与浮动,操作掌握的也还行,但是还是感觉那些属性和属性值记不住,操作练习的时候找半天,英语不太好,看见就头大。。。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1