|
今天是web前端教学实习第二天。
所学内容:
1. float 浮动
用来将盒子放在指定的位置排列好,是实现水平布局首选方案.
清除浮动?
原因:浮动元素脱离文档流,父级检测不到子级的高度,父级无法撑开
解决方案:1. 直接给父级一个高度 2.在父级使用overflow:hidden
overflow:hidden的作用: 1.隐藏溢出2.解决塌陷3.清除浮动
2.position 定位
?relative相对定位:不改变元素特性 参考物是原位 ?不脱离文档流
?absolute绝对定位:脱离文档流 ?参考物是最近的使用了定位的父级 如果没有,就是body
?fixed固定定位:脱离文档流 ?参考物是浏览器窗口
?static静态定位(默认)
3. tranform 变形
translate 移动
rotate 旋转
多个变形用空格隔开,如
transform: translateY(100px) scale(2) rotate(45deg);
?若像下面这样分开写,则会应用最后一个变形.
transform: translateY(100px);
transform: rotate(45deg);
transform: scale(2);
4. animation 动画
定义关键帧动画
@keyframes 动画名{
关键帧
}
应用动画
div{
animation:动画名 动画执行时间[动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧]
}
5. 课堂案例 旋转立方体和轮播图
旋转立方体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转立方体</title>
<style>
/* 定义关键帧动画 */
/* @keyframes 动画名{
关键帧
} */
@keyframes roll {
from{
transform: rotateX(0) rotateY(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
*{
margin: 0;
padding:0;
}
div{
width: 200px;
height: 200px;
background-color: skyblue;
line-height: 200px;
text-align: center;
color: white;
font-size: 100px;
position: absolute;
}
.wrap{
padding: 100px;
background-color: transparent;
/* animation : 动画名 动画执行时间
[动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧] */
transform-style: preserve-3d;
animation: roll 4s 1s linear infinite ;
}
.wrap div:nth-last-of-type(1){
transform: rotateY(-90deg) translateZ(100px);
background-color: tomato;
}
.wrap div:nth-last-of-type(2){
transform: rotateY(90deg) translateZ(100px);
background-color: turquoise;
}
.wrap div:nth-last-of-type(3){
transform: rotateX(90deg) translateZ(100px);
background-color: violet;
}
.wrap div:nth-last-of-type(4){
transform: rotateX(-90deg) translateZ(100px);
background-color: yellow;
}
.wrap div:nth-last-of-type(5){
transform: translateZ(100px);
background-color: salmon;
}
.wrap div:nth-last-of-type(6){
transform: rotateX(180deg) translateZ(100px);
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 左右 -->
<div>A</div>
<div>B</div>
<!-- 上下 -->
<div>C</div>
<div>D</div>
<!-- 前后 -->
<div>E</div>
<div>F</div>
</div>
</body>
</html>
轮播图代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
@keyframes move {
0%{left:0}
24%{left: 0;}
26%{left: -400px;}
49%{left: -400px;}
51%{left: -800px;}
74%{left: -800px;}
76%{left: -1200px}
98%{left: -1200px}
100%{left: -1600px;}
}
*{
margin: 0;
padding: 0;
}
.wrap{
width: 400px;
height: 300px;
background-color: gold;
position: relative;
overflow: hidden;
}
.move{
width: 2000px;
height: 300px;
background-color: snow;
position: absolute;
animation: move 10s linear infinite;
}
.move div{
float: left;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="move">
<div style="background-color: tomato;"></div>
<div style="background-color: yellow;"></div>
<div style="background-color: cyan;"></div>
<div style="background-color: greenyellow;"></div>
<div style="background-color: tomato;"></div>
</div>
</div>
</body>
</html>
|