实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对、相对、固定定位练习</title>
<style>
/*body背景*/
body{
margin: 0;
background-image: url("/css/static/images/bg.jpg");
background-size: cover;
height:1000px;
}
/* 遮罩设置*/
.box1{ /* 遮罩绝对定位,并自动伸展到整个窗口 */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 将背景设置为纯黑,并通过透明度使背影内容透出来 */
background-color: black;
/*设置背景透明度为0.6*/
opacity: 0.6;
}
/*登陆框绝对定位设置*/
.box2{
background-color: white;
/* background-color: darkturquoise;*/
width: 240px;
height: 130px;
border:3px solid lightgreen;
padding-left: 10px;
position: fixed;
left:50%;
top:50%;
margin-left: -120px;
margin-top: -65px;*/
}
/*QQ客服图片固定定位设置*/
.qq img{
width: 100px;
}
.qq{
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<!-- 背景 -->
<div class="box1"> </div>
<!-- 登陆框 -->
<form>
<div class="box2">
<p> <label>账号：</label>
<input type="text"></p>
<p><label>密码：</label>
<input type="password"></p>
<p> <input type="button" value="提交">
<input type="reset" value="重置"></p>
</form>
<!-- QQ图片固定定位 -->
<div class="qq"><img src="/static/images/qq.jpg"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例