黄翔-20201029

动画:在类选择器中
    旋转transform: rotate(45deg);
    过渡:transition:all 20s ease-in;
             all:所有动画
             20s:时间
             ease-in:匀加速
    过渡效果一般在类选择器,不在伪类选择器。
    缩放:transform: scale(0.5);默认Z轴,可选X、Y轴
    倾斜:transform: skew(45deg);
    平移:transform: translate(-300px);
    扭曲:transform: matrix(-1,-1,-1,0,-1,1);两行三列三角函数矩阵
    超出部分隐藏overflow: hidden;(加在父容器起效果)
多个效果同时使用需在transform后面直接多个赋。

自定义动画@keyframes
    animation选定与@keyframes联系
    backwards使其停在第一帧
    forwards使其停在最后一帧
    infinite无限循环播放,有次数写数字
    alternate来回正反向播放
    inherit动画不播放

    可以通过%来自定义每个播放时间的画面

盒子模型

盒模型的层次关系
从上往下看,层次关系如下:
第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)
从这个层次关系中可以看出,当同时设置背景图和背景色时,背景
图将在背景色的上方显示

盒子模型的相关属性
margin(外边距/边界)
border(边框)
padding(内边距/填充 )
我们可以理解一下各属性作用:
属性又分为上、右、下、左四个方向
问题:页面元素的宽度width、高度height如何计算?
答案:元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
比如:元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

盒子阴影box-shadow
盒子实际大小box-sizing
盒子圆角border-radius:30px;



html布局:
块级标签和行级标签的属性转换
float:浮动     块级标签加了浮动后就有行级标签不占一行的特性
(特别注意:使用float时,一点在外面加个容器包起来)

心得体会:
今天主要讲了一点CSS的动画以及对不同的块元素进行排版的知识,主要是浮动—float。还讲了一些我们常遇到的外边距,内边距,线条,以及一些基本的代码知识…….
今天在练习设计过程中还出现了很多的问题,但通过上网查询,不断的学习、解决、提高,设计出的网页不论是外观还是内容,都在不断的进步、改善。可以说在自己动手,不断实践的过程中,网页设计水平得到了很大的提高。热情和执着,我将来设计出的网页会更加专业,更完善。

标签

评论

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