css小记（下）
position:
a. fiexd => 固定在页面的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
b. relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opcity: 0.5 透明度
z-index: 层级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index:10; position: fixed;top: 50%;left:50%;
margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div style="z-index:9; position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;background-color: green;">
asdfasdf
</div>
</body>
</html>
overflow: hidden,auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
</body>
</html>
hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;/*上 右 下 左 、10px 上下左右均为10*/
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">az</div>
</div>
</body>
</html>
background-image:url('image/4.gif'); # 默认，div大，图片重复访
background-repeat: repeat-y;
background-position-x:
background-position-y:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;width: 20px;border: 1px solid red"></div>
</body>
</html>
Dylan
浙公网安备 33010602011771号