登录注册页⾯（htmlcss）登录效果如图：
css样式设置
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(1.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 50%;
}
#name_trip {
margin-left: 50px;
color: red;
}
#pass-trip{
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);            outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);            color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
a {
font-size: 17px;
color:rgb(207, 48, 48);
}
.s{
text-align:center;
color:aliceblue;
}</style>
body部分
body>
<div id="loginDiv">
<form action="" id="form">
<h1 class="s">⽴即登录</h1>
<p>email:<input id="email" type="text"><label id="name_trip"></label></p>
<p>Password:<input id="password" type="password"><label id="password_trip"></label></p>
<div >
<a href="#" id="a">忘记密码？</a><br>
javascript登录注册界面
<button onclick="denglu()">登录</button><button id="b2"onclick="click()">注册</button>
</div>
</form>
</div>
</body>
js部分：
<script language="javascript" type="text/javascript">
{
window.location.href="注册.html";
}
{
window.location.href="注册.html";
}
{
var email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
st(email)){
alert("邮箱格式正确");
}else{
alert("邮箱格式不正确");
}
}
{
var password = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
st(password)){
}else{
alert("密码格式不正确");
}
}
function denglu() {
var p = ElementById("password").value;
var e = ElementById("email").value;
var Item("password");
var Item("email");
if(p==p2&&e==e2)
window.location.href="照⽚墙.html";
else
alert("账号或密码不正确");
}
</script>
注册界⾯效果：
；
css部分：
<style>
body {
margin: 0px;
padding: 0px;
}
input {
border-style:none none solid none;            width: 50%;
border-bottom: #000000 solid;
font-size: 15px;
}
a {
font-size: 60px;
color:rgb(250, 201, 201);
}
p {
font-size: 15px;
font-weight:bold;
color: rgb(0, 0, 0);
}
h1 {
color: #fff;
}
h2 {
position: relative;
top: -79%;
left:32%;
}
h5 {
color: #fff;
}
button {
width: 300px;
height: 30px;
border-radius: 5%;
background-color: #fc6b28;
border: none;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 5px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;}
button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);            }
#bg {
background-image: url(1.jpg);
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
#div1 {
margin:0 auto;
position: relative;
top:50px;
width: 1006px;
height: 563px;
filter:alpha(opacity=50);
opacity:0.5;
background-color: rgb(255, 255, 255);
}
#left {
float:left;
width: 653px;
height: 563px;
}
#right {
text-align:center;
float:left;
width: 353px;
height: 563px;
background-color: rgb(211, 92, 92);
}
#center {
position: relative;
top: 3%;
left:3%;
text-align:center;
width: 581px;
height: 471px;
}
.radio {
margin: auto;
width: 10%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。