1:用绝对定位制作登录页
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位做登录窗口</title>
<!-- <link rel="stylesheet" type="text/css" href="/0426/style/style09.css">-->
<style type="text/css">
body{
margin:0;
background-image:url("/0426/images/php.jpg");
background-size:cover;
}
.shade{
position:absolute;
left:0;
top:0;
width: 100%;
height:100%;
background-color:black;
opacity:0.7;
}
.login{
width:400px;
height:200px;
background-color:wheat;
position:absolute;
left: 50%;
top:50%;
margin-top:-100px;
margin-left:-200px;
box-sizing:border-box;
padding-top:30px;
}
.login-sun{
width:400px;
height:140px;
text-align:center;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login">
<div class="login-sun">
<form action="">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="6-12位数字字母组合" autofocus>
</p>
<p>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="6-18位字母数字特殊符号">
</p>
<p>
<button>登录</button>
<button>注册</button>
</p>
</form>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2：用固定定位实现qq客服效果
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qq客服</title>
<!-- <link rel="stylesheet" type="text/css" href="/0426/style/style08.css">-->
<style type="text/css">
body{
height:2000px;
}
.parent{
border:1px solid black;
width:100px;
border-radius:20px;
position:fixed;
right:0;
top:50%;
margin-top:-100px;
}
.box1{
width:100px;
height:60px;
line-height:60px;
text-align:center;
font-weight:bold;
background-color:yellow;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.box2{
width:100px;
font-weight:bold;
color:red;
box-sizing:border-box;
padding-left: 25px;
}
.parent hr{
margin:0;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">
关注&咨询
</div>
<hr>
<div class="box2">
<a href="http://www.php.cn" target="_blank"><img src="http://demo.lanrenzhijia.com/demo/43/4365/demo/images/c_meau_1.png" width="50"></a>
<br>
QQ咨询
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例