本周主要学写的是css的浮动和过渡。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
上述代码让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
过渡则用到的是transition。
分别为：transition-property （规定应用过渡的 CSS 属性的名称）
transition-duration （定义过渡效果花费的时间。默认是 0）
transition-timing-function （规定过渡效果的时间曲线。默认是 "ease"）
transition-delay （规定过渡效果何时开始。默认是 0）
transition-delay （规定过渡效果何时开始。默认是 0）
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}注意：
如果时长未规定，则不会有过渡效果，因为默认值是 0。
最后
以上就是开放大象最近收集整理的关于第三周工作总结的全部内容，更多相关第三周工作总结内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复