<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位制作登录页</title>
<style type="text/css">
.loginForm{ width:350px; height:300px; border:1px dotted #ff6700; position:absolute;top:50%; left:50%;
margin-top:-150px; margin-left:-175px;}
.form1{ width:250px; height:200px; margin:80px auto ; text-align:center}
</style>
</head>
<body>
<div class="loginForm">
<form action="#" method="post" class="form1">
用户名 <input type="text" placeholder="请输入用户名" /><br />
密码 <input type="password" placeholder="请输入密码" /><br />
<button type="button" >登陆</button><br />
</form>
</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定定位实现QQ客服</title>
<style type="text/css">
.qqkefu{ width:200px;height:140px; background-color:#fff; position:fixed; right:0; top:50%;}
p{ margin:18px auto; text-align:center}
#xx{float:right}
</style>
<script>
</script>
</head>
<body style="background-color:#ccc">
<div class="qqkefu">
<button style="font-size:1em; border:none; color:#fff; background-color:red;" id="xx" onclick="this.parentNode.style.display='none'">X</button>
<p>服务***：400-000-000</p>
<p>客服qq:123456</p>
<button style="border:1px solid red; background-color:#fff; margin:5px 50px;">点击咨询</button>
</div>
</body>
</html>
