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 固定定位，这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对
于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。

二、心得体会

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