Home > Article > Web Front-end > How to make Baidu login framework
How to make Baidu login framework
- 一个新手Original
- 2017-09-27 09:40:502567browse
Baidu login
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
img{
width: 270px;
height: 129px;
display: block;
margin: 10px auto;
}
.btn{
}
font:hover{
cursor: pointer;
color: red;
}
.back-img{
border: 1px solid #000000;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000000;
opacity: 0.3;
z-index: 100;
display: none;
}
.login{
border: 1px solid #000000;
width: 390px;
height: 500px;
position: absolute;
top:26%;
left: 35%;
background-color:pink;
z-index: 110;
display: none;
}
.login-top{
position: absolute;
width: 100%;
height: 10%;
background-color: gray;
}
.close-login{
display: block;
position: absolute;
right: 10px;
top: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
color: #FFFFFF;
}
.close-login:hover{
border: 1px solid #FFFFFF;
cursor: pointer;
}
.login-top:hover{
cursor: move;
}
</style>
<script type="text/javascript" src="js/a.js" ></script>
<script>
//点击登录
function login(){
//获取覆盖图层对象
var backimg = document.getElementById("backimg"); //登录框的p对象
var login = document.getElementById("move_p");
login.style.display = "block";
backimg.style.display = "block";
} //隐藏登录弹出框
function loginClose(){
//登录框的p对象
var login = document.getElementById("move_p"); //获取覆盖图层对象
var backimg = document.getElementById("backimg");
login.style.display = "none";
backimg.style.display = "none";
} </script>
</head>
<body>
<p id="backimg" class="back-img" ></p>
<p id="move_p" class="login">
<!--登录弹出框顶部-->
<p class="login-top" onmousedown="down()" onmouseup="up()" onmousemove="move()">
<span class="close-login" onclick="loginClose()">×</span>
</p>
</p>
<p class="top">
<font onclick="login()">登录</font>
</p>
<img src="img/logo.png" />
<p class="btn">
<input type="text" />
<button>百度一下</button>
</p>
</body></html>The above is the detailed content of How to make Baidu login framework. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use CSS to create Bezier curvesNext article：Use CSS to create Bezier curves