1.①绝对定位（兄弟级）滑动窗口跟着动
<style>
div{width: 200px;height: 200px;position: absolute;}/*绝对定位*/
.green{background-color: green;left: 0;top: 0;z-index: 3;}/*层级定位 z-index的值越大，哪个图层就在上面*/
.red{background-color: red;left: 30;top: 30;z-index: 2;}
</style>
<body>
<div class="green"></div>
<div class="red"></div>
</body>
②.绝对定位（父子级）
<style>
.fu{background-color: green;width: 500px;height: 500px;position: absolute;}/*父辈一定也用定位，无所谓什么定位*/
.zi{background-color: red;width: 200px;height: 200px; position: absolute;right: 0;top: 0;}/*子级用绝对定位*/
</style>
<div class="fu">
<div class="zi"></div>
</div>
2.固定定位：固定的，滑动窗口，它也不动（跟小广告一样）
<div style="width: 100px;height: 100px;background-color: yellow;position: fixed;"></div>
关联样式表
Html
<title>无标题文档</title>
<link rel="stylesheet" href="css01.css">/*关联样式表 关联的样式表*/
</head>
<body>
<div>01</div>
</body>
Css样式表:在里面写样式，所有的HTML都可以关联它
body{background-color: red;}（css01文件）
动画
1.颜色变化
<style>
div{width: 100px;height: 100px;background-color: red;}
@keyframes bianse{
0%{background-color: aqua;}
100%{background-color: yellow;}
}
div{animation: bianse 3s infinite;}/*动画 过渡几秒 自动播放*
</style>
</head>
<body>
<div></div>
</body>
2.大小变化
<style>
div{width: 100px;height: 100px;background-color: red;}
@keyframes donghua{
0%{transform: scale(1)}
50%{transform: scale(2)}
100%{transform: scale(1);}
}
div{animation:donghua 3s infinite;}/*动画 过渡几秒 自动播放*
</style>
</head>
<body>
<div></div>
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
