first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>overflow</title>
<style>
::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #F5F5F5;
}
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
width: 1000px;
}
ul li {
list-style: none;
}
.father {
width: 600px;
height: 100px;
background: #8d8d8d;
overflow-x: scroll;
}
.father li {
float: left;
width: 100px;
height: 100px;
background: yellow;
overflow-x: scroll;
}
</style>
</head>
<body>
<div class="father">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
transition: all 2s ease 1s;
}
.box:hover {
background: yellow;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

View File

@@ -0,0 +1,17 @@
transition : 元素从一种状态到另外一种状态发生改变的时候,为他添加上一个平滑的过渡效果。
四个数值应用过渡的CSS属性的名称(all) 变化持续的时间 动画的效果 延迟时间
text-decoration: none; 清除a标签默认的下划线
outline: none; 清除input被选中时候外面的边框
box-sizing : https://www.cnblogs.com/tianmuxi/p/9076373.html
:first-child
:nth-child(n)
:last-child

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过渡属性 案例</title>
<style>
body {
margin: 0;
}
.box-1 {
width: 400px;
height: 300px;
background: #000;
position: relative;
}
.box-bottom {
width: 400px;
height: 60px;
background: green;
position: absolute;
bottom: -60px;
transition: all 1s ease 0.1s;
}
.box-1:hover .box-bottom {
bottom: 0px;
}
</style>
</head>
<body>
<div class="box-1">
<div class="box-bottom"></div>
</div>
</body>
</html>