满足低调之心基础十五
作者：互联网
13.position
①position的fixed属性
fixed总是以body为定位对象，根据浏览器的窗口来进行元素的定位，通过“left”，“right”，“top”，“bottom”属性进行定位。
下面举一个例子，平时在浏览网页时，部分网页上有个顶部菜单，右下角有个返回顶部按钮，即不论网页上下如何滑动，顶部菜单和返回顶部按钮位置总不会改变。（暂不考虑点击返回顶部按钮就能跳到顶部这一效果，因为涉及到后面的JavaScript内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
width: 150px;
height: 60px;
background-color: #F10674;
color: #060304;
font-weight: 600;
text-align: center;
line-height: 60px;
position: fixed;
bottom: 15px;
right: 15px;
}
.c2{
height: 3000px;
background-color: #F4F351;
margin-top: 72px;
}
.c3{
height: 70px;
background-color: #27DC0A;
color: #060304;
font-weight: 600;
font-size: 25px;
text-align: center;
line-height: 70px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body style="margin: 0;">
<div class="c3">顶部菜单</div>
<div class="c1">返回顶部</div>
<div class="c2">Every night in my dreams <br />I see you,I feel you <br />That is how I know you go on <br />Far across the distance <br />And spaces between us <br />You have come to show you go on <br />Near...far... <br />Wherever you are <br />I believe <br />That the heart does go on <br />Once more you open the door <br />And you're here in my heart <br />And my heart will go on and on <br />Love can touch us one time <br />And last for a lifetime <br />And never let go till we're one <br />Love was when I loved you <br />One true time I hold to <br />In my life we'll always go on <br />You're here <br />There's nothing I fear <br />And I know <br />That my heart will go on <br />We'll stay forever this way <br />You are safe in my heart <br />And my heart will go on and on
</div>
</body>
</html>
②position的relative(相对定位)和absolute(绝对定位)
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
两者区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
.c1{
border: 1px solid #FB0202;
width: 500px;
height: 250px;
margin:0 auto;
position: relative; /* 相对定位 */
}
.c2{
border: 1px solid #F80BD6;
width: 100px;
height: 100px;
background-color: #F80BD6;
position: absolute; /* 绝对定位 */
right: 0;
top: 0;
}
.c3{
border: 1px solid #F80BD6;
width: 100px;
height: 100px;
background-color: #F80BD6;
position: absolute;
left: 0;
bottom: 0;
}
.c4{
border: 1px solid #F80BD6;
width: 100px;
height: 100px;
background-color: #F80BD6;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div><br />
<div class="c1">
<div class="c3"></div>
</div><br />
<div class="c1">
<div class="c4"></div>
</div>
</body>
</html>
14，三层页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1{
/*display: none;*/
height: 3000px;
background-color: #A3F983;
}
.c2{
/*display: none;*/
background-color: #040404;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6; /* 透明度，范围是0~1，数字越小透明度越高 */
z-index: 9; /* z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序更低的元素前面(即z-index后面数字越大越靠上层) */
}
.c3{
/*display: none;*/
width: 700px;
height: 100px;
background-color: #FFFFFF;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -50px;
font-size: 25px;
font-weight: 500;
text-align: center;
line-height: 100px;
color: #F80630;
}
</style>
</head>
<body style="margin: 0;">
<div class="c3">Hello，酷狗！</div>
<div class="c2"></div>
<div class="c1">Every night in my dreams <br />I see you,I feel you <br />That is how I know you go on <br />Far across the distance <br />And spaces between us <br />You have come to show you go on <br />Near...far... <br />Wherever you are <br />I believe <br />That the heart does go on <br />Once more you open the door <br />And you're here in my heart <br />And my heart will go on and on <br />Love can touch us one time <br />And last for a lifetime <br />And never let go till we're one <br />Love was when I loved you <br />One true time I hold to <br />In my life we'll always go on <br />You're here <br />There's nothing I fear <br />And I know <br />That my heart will go on <br />We'll stay forever this way <br />You are safe in my heart <br />And my heart will go on and on</div>
</body>
</html>
即最下层文字只能滑动却不能用鼠标选中。
15，overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1{
width: 400px;
height: 400px;
overflow: auto; /* 超出盒子大小就会添加滚动条 */
}
.c2{
width: 400px;
height: 400px;
overflow: hidden; /* 隐藏掉超出盒子的所有内容 */
}
</style>
</head>
<body>
<div class="c1">
<img src="003.jpg">
</div><br />
<div class="c2">
<img src="003.jpg">
</div>
</body>
</html>
16，hover
当鼠标悬浮时改变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1{
height: 70px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #1F5FA4;
}
.c2{
height: 1000px;
background-color: #F4FB72;
margin-top: 72px;
}
.c3{
width: 455px;
float: left;
text-align: right;
}
.c4 a{
font-size: 25px;
font-weight: 500;
color: #FFFFFF;
text-decoration: none;
float: left;
line-height: 70px;
padding-right: 22px;
padding-left: 22px;
}
.c4 a:hover{
background-color: #6E91F7;
color: #000208;
}
.c5 a{
font-size: 18px;
text-decoration: none;
color: #FFFFFF;
float: left;
line-height: 70px;
padding-left: 39px;
padding-right: 39px;
}
.c5 a:hover{
background-color: #6E91F7;
color: #000208;
}
.c6{
float: right;
width: 74%;
height: 70px;
}
</style>
</head>
<body style="margin: 0;">
<div class="c1">
<div class="c3">
<a href="http://blog.csdn.net/hpl980342791">
<img src="004.png">
</a>
</div>
<div class="c6">
<div class="c4">
<a href="#">抽屉新热框</a>
</div>
<div class="c5">
<a href="#" class="c5">首页</a>
<a href="#" class="c5">专区</a>
<a href="#" class="c5">人类发布</a>
<a href="#" class="c5">视频</a>
<a href="#" class="c5">发现</a>
<a href="#" class="c5">话题</a>
</div>
</div>
</div>
<div class="c2">hepengli</div>
</body>
</html>
17，background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 980px;
height: 550px;
background-image: url(03.gif);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以看出图片被重复堆叠着放在了一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 980px;
height: 550px;
background-image: url(03.gif);
background-repeat: no-repeat; /* 减少重复叠放 */
border: 1px solid #D50566;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
假如一张图片如下，怎么取出其中的一部分呢？
(要是第一印象想到截图的，那可就太坏了
标签：之心,obj,color,低调,height,width,十五,background,var 来源： https://blog.csdn.net/hpl980342791/article/details/112923341