利用绝对定位写一个登录页面，把登录页面控制在浏览器的中间位置。
绝对定位可以更直观的控制控件的位置。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0426作业1</title>
<style>
/*box1 box2里面的定位原本设置的是绝对定位，但由于测试发现滚动的时候不设置固定定位的话不会跟着滚动条走*/
/*wrap里面利用绝对定位设置了登录框控件的位置*/
body{
margin: 0;
height: 2000px;
/*background-color: green;*/
background-image: url("static/images/66.png");
background-size: cover;
}
.box1{
position: fixed;
background-color: gray;
width: 100%;
height: 100%;
opacity: 0.7;
}
.box2{
width: 300px;
height: 200px;
border-radius: 5px;
background-color: whitesmoke;
position: fixed;
left: 45%;
top: 40%;
}
.wrap{
position: absolute;
left: 30px;
top: 10px;
}
button{
width: 200px;
height: 30px;
border: none;
border-radius: 3px;
background-color: #3487ff;
}
button:hover{
background-color: #3580eb;
}
#username , #password{
width: 200px;
height: 25px;
/*border-radius: 3px;*/
}
p{
margin:8px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<form action="" class="wrap">
<b>帐号登录</b>
<p>
<input type="text" name="username" id="username" placeholder="输入您的帐号">
</p>
<p>
<input type="password" name="password" id="password" placeholder="输入您的密码">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="remember"><label for="remember">记住密码</label>
</p>
<p>
<button>登录</button>
</p>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
利用固定定位实现的一个QQ客服效果，窗口紧贴浏览器右侧，随滚动条滚动而滚动。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0426作业2</title>
<style>
body{
height: 2000px;
background-color: green;
}
div{
position: fixed;
right: 0;
top: 50%;
margin-top: -100px;
}
li{
background-color: #656565;
margin: 1px;
color: white;
height: 30px;
width:100px;
line-height: 30px;
text-align: center;
list-style: none;
}
a{
list-style: none;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">客服1号</a></li>
<li><a href="">客服2号</a></li>
<li><a href="">客服3号</a></li>
<li><a href="">客服4号</a></li>
<li><a href="">客服5号</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例