ZhangYong
7 hours ago
6 changed files with 208 additions and 0 deletions
-
BINsrc/CssStudy/3.png
-
29src/CssStudy/css新特性.html
-
43src/CssStudy/动画.html
-
39src/CssStudy/媒体查询.html
-
62src/CssStudy/定位.html
-
35src/CssStudy/雪碧图.html
|
After Width: 368 | Height: 161 | Size: 57 KiB |
@ -0,0 +1,29 @@ |
|||
<!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> |
|||
.d1{ |
|||
width: 200px; |
|||
height: 200px; |
|||
background-color: red; |
|||
/* 设置圆角属性，为50%，100%是为一个圆 */ |
|||
border-radius: 20px; |
|||
} |
|||
.d2{ |
|||
width: 200px; |
|||
height: 200px; |
|||
background-color: red; |
|||
|
|||
border-radius: 20px; |
|||
box-shadow: 0 10px 20px blue; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="d1"></div> |
|||
<div class="d2"></div> |
|||
</body> |
|||
</html> |
|||
@ -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"> |
|||
<title>Document</title> |
|||
<style> |
|||
div{ |
|||
width: 200px; |
|||
height: 200px; |
|||
/*animation代表引入动画样式，mydh为自定义动画名，duration为动画持续时间； timing-function为动画播放速率（可取值为 ease逐渐变慢； linear匀速； ease-in加速； ease-out减速； ease-in-out先加速后减速） */ |
|||
/* delay表示延时执行时间； iteration-count为循环次数，infinite代表无限次执行 */ |
|||
animation: mydh 2s linear 0s infinite; |
|||
} |
|||
div:hover{ |
|||
/* 控制播放状态，running表示播放，paused代表暂停 */ |
|||
animation-play-state: paused; |
|||
background-color: orange; |
|||
} |
|||
/* |
|||
使用 @keyframes创建动画，后跟自定义的动画名；下面的百分比可自定义添加对动画进度进行控制 */ |
|||
@keyframes mydh { |
|||
0%{ |
|||
/* 表示透明度。范围为0——1 */ |
|||
opacity: 0.1; |
|||
background-color: brown; |
|||
} |
|||
50%{ |
|||
opacity: 0.5; |
|||
background-color: green; |
|||
} |
|||
100%{ |
|||
opacity: 1; |
|||
background-color: blue; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div></div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,39 @@ |
|||
<!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> |
|||
@media screen and (max-width: 768px) { |
|||
|
|||
/* 设备小于768px加载样式 */ |
|||
body { |
|||
background-color: red; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 992px) and (min-width: 768px) { |
|||
|
|||
/* 设备小于768px但小于992px加载样式 */ |
|||
body { |
|||
background-color: pink; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 992px) { |
|||
|
|||
/* 设备大于992px加载样式 */ |
|||
body { |
|||
background-color: green; |
|||
} |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -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"> |
|||
<title>Document</title> |
|||
<style> |
|||
/* 相对定位,不会脱离文档流 */ |
|||
.d1{ |
|||
width: 200px; |
|||
height: 300px; |
|||
position: relative; |
|||
background-color: rebeccapurple; |
|||
left: 50px; |
|||
top: 100px; |
|||
} |
|||
/* 绝对定位：脱离文档流，每加一个绝对定位会加一层图层 */ |
|||
.d2{ |
|||
width: 100px; |
|||
height: 200px; |
|||
position: absolute; |
|||
background-color: red; |
|||
left: 50px; |
|||
top: 100px; |
|||
} |
|||
/* 固定定位：脱离图层且在文档的位置固定 */ |
|||
.d3{ |
|||
width: 100px; |
|||
height: 100px; |
|||
position: fixed; |
|||
background-color: blue; |
|||
left: 50px; |
|||
top: 100px; |
|||
} |
|||
|
|||
/* 相对定位和绝对定位是相对于设置了定位的父模块进行定位，如果父模块不具有定位，则继续向上进行查找，直到顶层文档 */ |
|||
.d4{ |
|||
width: 100px; |
|||
height: 200px; |
|||
position: fixed; |
|||
background-color: red; |
|||
left: 500px; |
|||
top: 200px; |
|||
} |
|||
.d5{ |
|||
width: 100px; |
|||
height: 100px; |
|||
position: relative; |
|||
background-color: blue; |
|||
left: 30px; |
|||
top: 10px; |
|||
} |
|||
</style> |
|||
|
|||
</head> |
|||
<body> |
|||
<div class="d1"></div> |
|||
<div class="d2"></div> |
|||
<div class="d3"></div> |
|||
<div class="d4"><div class="d5"></div></div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,35 @@ |
|||
<!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> |
|||
/* 通过background-image引入背景图片 |
|||
通过background-position把背景图片移动到自己需要的位置 */ |
|||
.icon1 { |
|||
display: block; |
|||
background-image: url(3.png); |
|||
background-position: -7px 0; |
|||
width: 25px; |
|||
height: 25px; |
|||
} |
|||
|
|||
.icon2 { |
|||
display: block; |
|||
background-image: url(3.png); |
|||
background-position: -93px -84px; |
|||
width: 25px; |
|||
height: 25px; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<i class="icon1"></i> |
|||
<i class="icon2"></i> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue