绝对定位登录窗口
- 2.固定定位实现QQ客服效果
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位做登录窗口</title> <style type="text/css"> body { margin:0; background-image:url("C:/Users/wxd-mac-win/Documents/学习/0426/static/images/php.jpg"); background-size: cover; } .shade { position:absolute; /*左上角*/ left:0; top:0; width:100%; height:100%; background-color: black; opacity:0.7; } .login { height: 220; width:420; background-color: lightblue; position:absolute; left: 50%; top:50%; margin-left:-210px; margin-top:-110px; } .world{ width:420px; height:160px; text-align:center; } </style> </head> <body> <div class="shade"></div> <div class="login"> <div class="world"> <form action="" method="post"> <p> <label for="usename">帐号:</label> <input type="text" name="usename" id="usename" autofocus placeholder="不超过8个字母" requied> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="6-12个字母"> </p> <p><button>登录</button></p> </form></div></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>固定定位QQ客服效果</title>
<style type="text/css">
body {
height: 2000px
}
.serve {
width:150px;
height:80px;
background-color: lightyellow;
position: fixed;
right:0;
bottom:50%;
}
</style>
</head>
<body>
<div class="serve">
<span class="title">在线咨询</span><br>
<span class="signature">服务时间 9:00-20:00</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例