<!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>
.c1 {
color: red;
font-size: 16px;
border: 1px solid red;
}
.c1:hover {
color: green;
font-size: 40px;
border: 5px solid green;
}
.c2 {
color: red;
font-size: 16px;
border: 1px solid red;
}
.download {
display: none;
}
.c2:hover .download {
display: block;
}
</style>
</head>
<body>
<div class="c1">hello world</div>
<div class="c2">
<img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/01/0F/ChMlWVXK9e6INH9pAAWhh3ahSqQAAHsHgGHZMgABaGf864.jpg"
height="100px" width="100px" alt="">
<div class="download">
<img src=" https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
</div>
</div>
</body>
</html>一些影藏的东西可以用鼠标悬浮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after {
content: "yysd";
}
</style>
</head>
<body>
<div class="c1">huakka</div>
<div class="c1">balala</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after {
content: "";
display: block;
clear: both;
}
.item {
float: left;
}
.bg {
background-color: blue;
}
</style>
</head>
<body>
<div class=" bg">
<div class="clearfix">
<div class="item">yyyyy</div>
<div class="item">xxx</div>
<div class="item"><img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt=""></div>
</div>
</div>
</body>
</html> .clearfix:after {
content: "";
display: block;
clear: both;
}
这个css伪类选择器直接在那些浮动标签后面加了块级空格，并clear：both，和那个直接div clear:both一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
position: fixed;
width: 60px;
height: 60px;
border: 1px solid black;
right: 10px;
bottom: 50px;
}
</style>
</head>
<body>
<div style="height: 10000px;background-color: #5f5750">
<div class="back"></div>
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
<img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
alt="">
</div>
</body>
</html>
<div class="back"></div>
这个位置可以随便放
<!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: 1;
z-index: 999;
}
</style>
</head>
<body>
<div style="height: 1000px" color="white">asdfasdfasd</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>这个ralative就是给这个标签内的标签提供相对定位参照