请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有帐号？注册
x
一个简单的登录和注册HTML CSS开发页面9 u) \5 X: d+ w
; o; G: ~' j; }( O
i( W3 Y" l3 p7 \3 L登录代码：
: r' J2 N% u) J: Z( `8 X8 F
+ _% y' C9 I% i$ e[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>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[type=text],
input[type=password] {
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>
. T0 K1 j" S* ?7 K( P5 W, n
. \- Z8 b, D! X7 D6 a( j+ N" a, A( y F$ j7 j: A! J; q8 X
注册代码9 {& a! q2 y5 N* k: a! N8 a
& i( c& g5 Q, D+ @/ p[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[type=text],
input[type=password] {
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>
4 k4 C6 f: b0 N$ t) R, {7 w) h | 
[复制链接]
/1 
PLM之家官方群 
|小黑屋|手机版|PLM之家-工业软件数字化驱动之家-国产自主软件推进者
( 沪ICP备13003373-3 ) 
视频教程 
云课堂 
PLM之家NX工具包 
+86 18301858168 
xduniverse@qq.com 
PLM之家客服 1 
