flask_知识点4_css
flask_知识点4_css
1、hover （伪类）
鼠标放上去，样式的变化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hover</title><style>.c1{color:red;font-size:18px;}.c1:hover{color:green;font-size:50px;}.c2{height:300px;width:500px;border:1px solid red;}.c2:hover{height:300px;width:500px;border:5px solid green;}.download{display:none;}.app:hover .download{display:block;}.app:hover .title{color:red;}</style>
</head>
<body><div class="c1">asd</div><div class="c2">dsa</div><div class="app"><div class="title">下载APP</div><div class="download"><img src="../static/rwm.png"></div></div></body>
</html>
2、after （伪类）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content:"";display: block;clear: both;}.item{float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body>
</html>
3、position
3.1fixed
固定在窗口的某个位置。
3.1.1返回顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 0;bottom: 0;}</style>
</head>
<body><div class="back"></div>
</body>
</html>
3.1.2对话框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.dialog{position: fixed;height: 300px;width: 500px;background-color: white;left:0;right:0;margin:0 auto;top: 200px;z-index: 1000;}.mask{background-color:black;position: fixed;left:0;right:0;top: 0;bottom: 0;opacity:0.3;z-index: 999;}</style>
</head>
<body><div style="height: 1000px;background-color: #5f5750">asdasd</div><div class="mask"></div><div class="dialog"></div>
</body>
</html>
3.2 relative 和 absolute
2.4 border 和 背景色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height:300px;width:500px;border: 3px solid #ff6700;margin: 100px;background-color: #5f5750;}</style>
</head>
<body><div class="c1"></div>
</body>
</html>