赵新宇_2021.1.13 赵新宇
一、知识总结
-
动画：动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色 定义语法：
@keyframes animationName{ from {}
to {}
}使用：
animation: name duration timing-function delay iteration-count direction fill-mode play-state; -
列表属性：List-style
list-style:none; 没有点的呈现 、
list-style: disc; 呈现圆点、
list-style: circle; 空心圆 、
list-style: square;正方块。
-
光标：
cursor: pointer; 手型
cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子
repeat 水平和垂直方向都重复
default 默认光标
help 指示可用的帮助（通常是一个问号或一个气球）
wait 指程序正忙（通常是一个表或沙漏）
-
设置多余文本省略
white-space:nowrap; //空白文本处理、
nowrap不换行 text-overflow:ellipsis; //超出文本显示为省略号
overflow: hidden; //超出部分隐藏
-
布局：之前呢，我们已经学习了CSS的基础知识，如何设置文本的样式，背景等。现在我们来看看如何把你的 内容放在与你想要的正确位置上。
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：
正常布局流
display 属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局
每种技术都有他们的用途，各有各的优缺点，相互辅助。
正常布局流：正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
<body> <p>I love my cat.</p>
<ul>
<li>Buy cat food</li>
<li>Exercise</li>
<li>Cheer up friend</li>
</ul>
<p>The end!</p>
</body>当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完 全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式 来搭建页面，而不是自己发明轮子。
-
浮动：float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用 工具之一。 我们先从一个非常简单的例子开始，包括在图像周围浮动一个文本块。
<h1>Simple float example</h1> <img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg"
alt="A pretty butterfly with red, white, and brown coloring, sitting on a
large leaf">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris
ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus
viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>使用float来让图片周围的文本浮起来：
我们来看看 float 是如何工作的，浮动元素会脱离正常的文档布局流，并吸 附到其父容器的左边 (这个例子中的 元素)。在正常布局中位于该浮动元素之下的内容，此时会 围绕着浮动元素，填满其右侧的空间。
二、心得体会
- 今天我们主要对html里的css3进行了深度的学习，学习了简单动画的制作，简单的动态相册的制作，动态3D导航栏的制作，经过这几天的学习，我发现代码量上去了之后写东西就变得容易起来，老师在和我们讲的时候很快就可以把对应的属性和值敲上去，而我只能一点点想 或者靠搜索才能找到要使用的代码，这几天的学习加深了我对h5、css3的理解，一些没有接触过的属性在这几天的学习中有了了解和学习，在晚上晚自习的时侯也知道自己该训练什么了。每天都有不一样的收获！
评论