<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.clearfloat::after {
display: block;
clear: both;
overflow: hidden;
content: "";
height: 0;
}
.clearfloat {
zoom: 1;
}
.boss {
width: 450px;
height: 568px;
box-shadow: 0px 0px 2px 3px #b7b7b7;
margin: 10px auto;
overflow: hidden;
}
.boss_one {
width: 360px;
height: 488px;
margin: 40px auto;
/* background-color: pink; */
}
.boss_a1 {
font-size: 22px;
color: #333;
font-weight: 500;
display: inline-block;
width: 44px;
height: 40px;
margin-right: 20px;
border-bottom: 5px solid orange;
text-align: center;
line-height: 40px;
}
.boss_a2 {
font-size: 22px;
color: #bbb;
}
.box1_inp {
/* width: 330px;
height: 30px;
border: none;
background-color: #f9f9f9;
margin-top: 20px;
outline:none;
padding: 15px;
border-radius: 100%; */
border-radius: 20px; width: 95%; height: 60px ;
}
.box1_inp:focus {
border: 1px solid orangered !important;
}
.box1 {
position: relative;
}
/* .box1_img {
width: 20px;
height: 20px;
position: absolute;
top: 38px;
right: 30px;
} */
/* .box1_img img {
width: 100%;
height: 100%;
} */
.box2 {
margin: 20px 0;
}
.box2_inp {
width: 360px;
height: 60px;
border: none;
background-color: #ffbe99;
color: #fff;
font-size: 20px;
}
.box2_inp:hover {
background-color: #ea8c69;
}
.box3 p:nth-child(1) {
color: orange;
float: left;
font-size: 17px;
}
.box3 p:nth-child(2) {
color: orange;
float: right;
font-size: 17px;
}
.box4 {
width: 360px;
height: 40px;
text-align: center;
margin: 20px 0;
line-height: 40px;
color: #bbb;
}
.box4 a {
color: #bbb;
}
.box5 div{
width: 50px;
height: 50px;
float: left;
margin-left: 30px;
}
.box5 div img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="boss">
<div class="boss_one">
<div style="margin-bottom: 20px;">
<a class="boss_a1" href="">登录</a>
<a class="boss_a2" href="">注册</a>
</div>
<div>
<input class="box1_inp" type="text" placeholder="邮箱/手机号码/小米ID">
</div>
<div class="box1">
<input class="box1_inp" type="password" placeholder="密码">
</div>
<div class="box2">
<input type="checkbox">
<span style="color: #AAA;">已阅读并同意小米账号</span>
<span style="color: #333;">用户协议</span>
<span style="color: #AAA;">和</span>
<span style="color: #333;">隐私政策</span>
</div>
<div style="margin-bottom: 10px;">
<input class="box2_inp" type="button" value="登录">
</div>
<div class="box3 clearfloat">
<p>忘记密码</p>
<p>手机号登录</p>
</div>
<p class="box4"><a href="">其他方式登录</a></p>
<div class="box5">
<div>
<img src="./1.gif" >
</div>
<div>
<img src="./1.gif" >
</div>
<div>
<img src="./1.gif" >
</div>
<div>
<img src="./1.gif" >
</div>
</div>
</div>
</div>
</body>
</html>
10-31
3275
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-20
169
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-13
141
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)