<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
