布局
1.display属性
inline
block
inline-block
2.浮动
float: right/left
脱离默认文档流
1.不会遮挡文字
2. 行内元素可以设置宽高
块级元素不会独占一行
3.定位布局position
1.static静态布局
2.absolute绝对浮动
- 脱离默认文档流
- 不占据定位前空间
- 默认情况下 以body左上角为基准
- 父辈具有定位属性时,以父辈的的左上角为基准
3.relative相对定位
4.fixed 固定定位
5.sticky:粘滞定位
配合属性:right left top bottom
4.伸缩盒布局
display:flex
-
设置完伸缩盒p则会撑满div
默认情况下p不撑满div
2.浮动属性失效
flex-direction:row/row-reverse
flex-wrap:wrap/none
简写:flex-flow:row wrap
align-items: flex-start
flex-end
center
justify-content: flex-start
flex-end
center
space-around
space-between
flex:number ——占父级剩余发空间的份数
#伸缩盒更适合写手机端页面
动画animation
1.先定义动画轨迹
@keyframes 关键帧
@keyframes 轨迹名称{
from {
开始位置的样式
}
to{
结束位置的样式
}
}
@keyframes 轨迹名称{
0%{}
50%{}
75%{}
100%{}
}
2.元素执行轨迹
div{
animation-name:轨迹名称
}
animation-timing-function :设置动画速度
ease
ease-in
ease-out
ease-in-out
linear
steps(3)
轮播图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.outer{
width: 1920px;
height: 420px;
overflow: hidden;
margin: 0 auto;
}
div.move{
width: 11520px;
height: 420px;
animation-name: move;
animation-timing-function: steps(6);
animation-iteration-count: infinite;
animation-duration: 20s;
}
div.move div{
float: left;
width: 1920px;
height: 420px;
}
div.move>img{
width: 1920px;
height: 420px;
}
@keyframes move{
from{
margin-left:0px ;
}
to{
margin-left: -11520px;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="move">
<div><img src="./images/轮播图/asset 54.webp" alt=""></div>
<div><img src="./images/轮播图/asset 56.webp" alt=""></div>
<div><img src="./images/轮播图/asset 57.webp" alt=""></div>
<div><img src="./images/轮播图/asset 58.webp" alt=""></div>
<div><img src="./images/轮播图/asset 59.webp" alt=""></div>
<div><img src="./images/轮播图/asset 60.webp" alt=""></div>
</div>
</div>
</body>
</html>
拓:.ico的修改
1.去转换一个ico格式图标
16px*16px
2. 在当前html中引入图标
<link rel="shortcut icon" type='images/-icon' href="">
呼吸灯实例
呼吸灯 一共10s
1.外圆
1扩大10px
2缩小10px
3保持不动
2.内圆
1.外圆扩大的同时,内圆缩小10px
2.外圆缩小的同时,内圆扩大10px
3.内圆缩小12px
4.内圆扩大12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
div.article{
width: 200px;
height: 300px;
background-color: black;
margin: 0 auto;
}
div.top{
width: 100%;
height: 200px;
padding: 20px;
animation-name: outer;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-duration: 5s;
}
div.bottom{
width: 100%;
color: white;
text-align: center;
}
div.outer{
width:100%;
height: 100%;
border-radius: 50%;
border: 3px solid white;
padding: 20px;
animation-name: inner;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite ;
}
div.inner{
width:100% ;
height: 100%;
border-radius: 50%;
border: 3px solid rgb(216, 216, 86);
}
@keyframes outer{
25%{
padding:10px;
}
50%{
padding:30px;
}
100%{
padding:20px
}
}
@keyframes inner{
25%{
padding: 30px;
}
50%{
padding: 20px;
}
75%{
padding:32px;
}
100%{
padding: 20px;
}
}
</style>
</head>
<body>
<div class="article">
<div class="top">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<div class="bottom">
<h3>HI!</h3>
</div>
</div>
</body>
</html>