用绝对定位制作登录页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用绝对定位制作登录页</title> <!--<link rel="stylesheet" href="static/css/rlc1.css ">--> <style> body { margin: 0; background-image:url(static/images/rlc_desk.png); background-size: cover; ; } /* 设置遮罩 */ .shade { /* 遮罩绝对定位,并自动伸展到整个窗口 */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* 将背景设置为纯黑,并通过透明度使背影内容透出来 */ background-color: black; opacity: 0.7; } .login img { width: 380px; height: 460px; } /* 设置登录窗口 */ .login { background-color: white; position: absolute; /*绝对定位*/ left: 50%; top: 50%; /* 将上下边距设为50%，位置有偏差，需扣掉本休的长高的一半*/ margin-left: -190px; margin-top: -230px; } </style> </head> <body> <!--1.用绝对定位制作登录页--> <div class="shade"></div> <div class="login"> <img src="static/images/rlc_login.png" alt="" ></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
用固定定位实现qq客服效果
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用固定定位实现qq客服效果</title> <!--<link rel="stylesheet" href="static/css/rlc2.css">--> <style> body { height: 2000px; background-image:url(static/images/rlc_desk.png); background-size: auto; background-repeat: no-repeat; } .GG { width: 200px; height: 200px; /*border: crimson;*/ background-color: lightblue; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div class="GG"> <h1 style="text-align:center">广告位招租</h1> <h2 style="text-align:center" >联系客服</h2> <h2 style="text-align:center">QQ:12345678</h2> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
3、知识点：
静态定位:浏览器默认文档流中的位置
相对定位：是以元素在文档流中的原始位置作为参照物定位
绝对定位：脱离文档流，所以要有个定位父级作参照
固定定位：始终相对于浏览器整个窗口进行定位