Maison >interface Web >tutoriel CSS >Comment créer le cadre de connexion Baidu
Comment créer le cadre de connexion Baidu
- 一个新手original
- 2017-09-27 09:40:502573parcourir
Connexion Baidu
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisez CSS pour créer des courbes de BézierArticle suivant：Utilisez CSS pour créer des courbes de Bézier