一个简单的登录和注册HTML CSS开发页面
一个简单的登录和注册HTML CSS开发页面登录代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>This is a login form</title>
<style>
.modal {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
.modal-content {
width: 60%;
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
}
/* The Close Button (x) */
.closeButton {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.cancelbutton {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
span.password {
float: right;
padding-top: 16px;
}
.closeButton:hover,
.closeButton:focus {
color: firebrick;
cursor: pointer;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
.avtar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
/* Full-width input fields */
input,
input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.password {
display: block;
float: none;
}
.cancelbutton {
width: 100%;
}
}
</style>
</head>
<body>
<button id="login">login</button>
<button id="register">register</button>
<div id="formPanel" class="modal">
<form action="./img/logo.png" class="modal-content animate">
<!-- image -->
<div class="imgcontainer">
<span id="closeButton" class="closeButton"
title="close form">×</span>
<img src="./img/img_avatar.png" alt="avatar" class="avtar">
</div>
<!-- information -->
<div class="container">
<label><b>UserName</b></label>
<input type="text" placeholder="username" class="username" required>
<label><b>Password</b></label>
<input type="password" placeholder="password" class="password" required>
<button class="loginButton">Login</button>
<input type="checkbox" checked>Remember Me
</div>
<div class="container">
<button class="cancelbutton" type="button"
>Cancel</button>
<span class="password">Forgot
<a href="#">password?</a>
</span>
</div>
</form>
</div>
<script>
function loginForm() {
var formx = document.getElementById("formPanel")
formx.style.display = "block"
}
</script>
</body>
</html>
注册代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>register form</title>
<style>
.panel {
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.2);
padding-top: 30px;
overflow: auto;
position: fixed;
left: 0;
right: 0;
z-index: 1;
}
.modal-content {
background: #fefefe;
width: 60%;
border: 1px solid #888;
margin: 5% auto 25% auto;
}
.container {
padding: 16px;
}
.close {
font-size: 40px;
position: absolute;
top: 15px;
right: 20px;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
input,
input {
width: 100%;
padding: 12px 20px;
margin: 8px auto;
border: 1px solid #cccccc;
display: inline-block;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.cancelbutton {
padding: 14px 20px;
background-color: #f44336;
}
.cancelbutton,
.registerbutton {
float: left;
width: 50%
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div id="modal" class="panel">
<span class="close">x</span>
<form action="#" class="modal-content">
<div class="container">
<label>Email</label>
<input type="text" placeholder="Emmail" required>
<label>Username</label>
<input type="text" placeholder="username" required>
<label>password</label>
<input type="password" placeholder="password" required>
<input type="checkbox" checked> remember me
<p>Follow the policy <a href="#">terms & privacy</a></p>
<div class="clearfix">
<button class="cancelbutton">Cancel</button>
<button class="registerbutton">Register</button>
</div>
</div>
</form>
</div>
</body>
</html>
PLM之家二次开发源码分享 PLM之家二次开发源码分享
页:
[1]