一个登录界面大家都有见过,那他是咋样实现的呢,这里给大家分享一下我的一下些经验
有不足之处阔以指出
js代码布局的
body{
padding: 0;
margin: 0;
}
.left{
float: left;
width: 25%;
height: 755px;
}
.left img{
width: 100%;
height: 100%;
}
.right{
float: left;
height: 755px;
width: 75%;
}
#ll{
float: left;
}
#ll img{
width: 165px;
height: 58px;
margin: 13px;
}
#rr{
float: right;
font-size: 13.5px;
color: gray;
padding-top: 30px;
padding-right: 30px;
}
#rr a{
color: gray;
text-decoration-line: none;
}
#rr a:hover{
color: orange;
}
#box{
width: 450px;
height: 600px;
background-color: white;
clear: both;
margin: auto;
margin-top: 100px;
border-radius: 5px;
box-shadow:0px 0px 50px 0px rgba(119, 119, 119, 0.1) ;
text-align: center;
}
#zh,#sm{
margin-top: 45px;
background-color: white;
font-size: 22px;
border: 0px;
}
#zh{
color: #ff6d00;
}
#sm{
color: gray;
}
#zh_ing{
display: block;
}
#sm_ing{
display: none;
}
input{
height: 60px;
width: 330px;
border-radius: 5px;
background-color: #f9f9f9;
border: 0px;
margin-bottom: 20px;
padding-left: 20px;
font-size: 16px;
}
.orange{
height: 60px;
width: 350px;
background-color: #ffbe99;
border: 0px;
border-radius: 5px;
font-size: 17px;
color: white;
}
#bottom{
float: left;
margin-left: 90px;
}
#bottom img{
width: 48px;
height: 48px;
margin-left: 14px;
}
#hh{
display: block;
}
#hh a{
color: #ff6d00;
font-size: 17px;
text-decoration-line: none;
}
#a1{
float: left;
margin-left: 50px;
}
#a2{
float: right;
margin-right: 50px;
}
#bb{
display: block;
}
注册主体代码
<!DOCTYPE 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">
<link rel="stylesheet" href="login.css">
<title>小米账号-注册</title>
</head>
<body>
<!-- 首部部分 start-->
<div class="top">
<a href="小米登录.html" class="title"></a>
<h4>注册小米账号</h4>
<div class="middle">
<form enctype="multipart/form-data">
<div style="width:500px;float:left;margin:0 20px;">
<br />
<span class="p" id="usernameCheckID">*</span>
<label for="username" class="l">用户名:</label>
<div style="position:relative;display:inline;">
<input id="username" type="text" style="height:30px;width:250px;padding-right:50px;" onblur="checkUserName()"/>
</div>
<br /><br