DESKTOP-ALQOPKI_实习日志 2021年05月24日 张金虎

实习日志

一、知识总结

1.鼠标样式

cursor 属性用于定义鼠标样式,可选值有: pointer 、 wait 、 help 、 copy 、 cross-hair用户也可以自定义一个鼠标样式:

 cursor: url(xxx),auto

1.1列表样式(list-style)

list-style none:没有点的呈现
list-style: disc:呈现圆点
list-style: circle:空心圆
list-style: square:正方块

1.2 transform

用法:

 transform: none|transform-functions

常用的值:

none 定义不进行转换。
translate(x,y) 定义 2 D 转换。移动
translate 3 d(x,y,z) 定义 3 D 转换。父元素 transform-style: preserve-3 d;
translate X(x) 定义转换,只是用 X 轴的值。
translate Y(y) 定义转换,只是用 Y 轴的值。
translate Z(z) 定义转换,只是用 Z 轴的值。

transition属性:

transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

语法:

transition: property duration timing-function delay

transition-timing-function 常用的值有:inear 、ease 、ease-in 、ease-out 、ease-in-out。

2.动画:

定义语法:

@keyframes animationName{
       from {}
       to {}
}

使用:

animation: name duration timing-function delay iteration-count direction fill-mode
play-state;

3.清除浮动

<footer>
<p>&copy;2020 your imagination. This isn't really copyright, this is a mockery of
the very concept. Use as you wish.</p>
</footer>

clear 的三个值:
left :停止任何活动的左浮动
right :停止任何活动的右浮动
both :停止任何活动的左右浮动

4.定位

静态定位:静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这没有什么特别的。

position : absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。绝对定
位的元素不再存在于正常文档布局流中。

fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对
于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

二、心得体会

通过一天的学习,老师讲的内容和知识点太多,而自己所能掌握的知识点太少。

标签

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