|
|
@@ -5,10 +5,14 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<style>
|
|
|
+ /* css reset */
|
|
|
*{
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
html,body,.container{
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -30,7 +34,7 @@
|
|
|
width: calc(100% - 375px);
|
|
|
height: 100%;
|
|
|
/* background-color: red; */
|
|
|
- background-color: #eee;
|
|
|
+ background-color: #f7f7f7;
|
|
|
}
|
|
|
/* 导航部分 start */
|
|
|
.nav-content{
|
|
|
@@ -71,6 +75,66 @@
|
|
|
margin:30px auto;
|
|
|
padding: 40px 45px;
|
|
|
}
|
|
|
+ .lgoin-content .tab-btn li{
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #bbb;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .lgoin-content .tab-btn li.active{
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .lgoin-content .tab-btn .active::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ border:2px solid #ff5c00;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .lgoin-content .input-bar .input-box{
|
|
|
+ background-color: #eee;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .lgoin-content .input-box img{
|
|
|
+ width: 20px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .lgoin-content .input-box:last-child span{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .lgoin-content .input-box:last-child img{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .lgoin-content .info-bar{
|
|
|
+ margin:20px 0;
|
|
|
+ }
|
|
|
+ .lgoin-content .info-bar .checkbox-inp{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border:1px solid #eee;
|
|
|
+ border-radius: 2px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .lgoin-content .info-bar p{
|
|
|
+ color: #999;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .lgoin-content .info-bar a{
|
|
|
+ text-decoration: none;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .lgoin-content .submit-btn .btn-box{
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ff5c00;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -99,15 +163,37 @@
|
|
|
</div>
|
|
|
<!-- 登录框 -->
|
|
|
<div class="lgoin-content">
|
|
|
+ <!-- tab切换按钮 -->
|
|
|
<div class="tab-btn">
|
|
|
<ul>
|
|
|
- <li>登录</li>
|
|
|
+ <li class="active">登录</li>
|
|
|
<li>注册</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="input-bar"></div>
|
|
|
- <div class="info-bar"></div>
|
|
|
- <div class="submit-btn"></div>
|
|
|
+ <!-- 账号密码输入框 -->
|
|
|
+ <div class="input-bar">
|
|
|
+ <div class="input-box">
|
|
|
+ <span>邮箱/手机号/小米ID</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-box clearfix">
|
|
|
+ <span>密码</span>
|
|
|
+ <img src="./img/pass.png" alt="密码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 用户协议部分 -->
|
|
|
+ <div class="info-bar clearfix">
|
|
|
+ <div class="checkbox-inp"></div>
|
|
|
+ <p>
|
|
|
+ 已阅读并同意小米账号
|
|
|
+ <a href="#">用户协议</a>
|
|
|
+ 和
|
|
|
+ <a href="#">隐私政策</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <!-- 登录按钮 -->
|
|
|
+ <div class="submit-btn">
|
|
|
+ <div class="btn-box">登录</div>
|
|
|
+ </div>
|
|
|
<div class="text-bar"></div>
|
|
|
<div class="login-type"></div>
|
|
|
</div>
|
