前端样式完成

master
Lee-1203 2022-05-11 14:03:14 +08:00
parent bdd5849621
commit da8fc6595b
3 changed files with 61 additions and 54 deletions

View File

@ -163,10 +163,9 @@
/* 首页样式 */ /* 首页样式 */
.main{ .main{
margin-top: 86px; margin-top: 86px;
min-height: calc(100vh - 204px); min-height: calc(100vh - 244px);
} }
.index-main, .index-main{
.login-main{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
@ -485,12 +484,16 @@
/* 登录/注册页样式 */ /* 登录/注册页样式 */
.login-main{ .login-main{
margin-bottom: 40px; margin-bottom: 40px;
}
.login{
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: #fff; background-color: #fff;
} }
.login-txt{ .login-txt{
width: calc(100% - 430px); width: calc(100% - 430px);
padding: 44px 20px 0; padding: 44px 20px 0;
} }
.login-txt h1{ .login-txt h1{
font-size: 34px; font-size: 34px;
@ -1219,7 +1222,7 @@
/* 首页 */ /* 首页 */
.main{ .main{
margin-top: 65px; margin-top: 65px;
min-height: calc(100vh - 160px); min-height: calc(100vh - 163px);
} }
.index-side{ .index-side{
display: none; display: none;

View File

@ -60,31 +60,33 @@
</header> </header>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="main login-main w1140 wow fadeInUp"> <div class="main login-main w1140 wow fadeInUp">
<div class="login-txt wow fadeInUp"> <div class="login">
<h1>欢迎登录</h1> <div class="login-txt wow fadeInUp">
<span>还没有账号?<a href="register.html">立即注册</a></span> <h1>欢迎登录</h1>
<ul class="login-information"> <span>还没有账号?<a href="register.html">立即注册</a></span>
<li> <ul class="login-information">
<span>用户名/手机号</span> <li>
<input type="text" name="uname" placeholder=""> <span>用户名/手机号</span>
</li> <input type="text" name="uname" placeholder="">
<li> </li>
<span>密码</span> <li>
<input type="password" name="pwd" placeholder=""> <span>密码</span>
</li> <input type="password" name="pwd" placeholder="">
</ul> </li>
<div class="agree"> </ul>
<span><em class="password"></em>记住密码</span> <div class="agree">
<a href="">忘记密码?</a> <span><em class="password"></em>记住密码</span>
<a href="">忘记密码?</a>
</div>
<button class="login-btn">立即登录</button>
<div class="wechat-btn-bg">
<a href="" class="wechat-btn"><img src="images/icon/icon-wechat.png" alt="微信登录"></a>
</div>
</div> </div>
<button class="login-btn">立即登录</button> <div class="login-img wow fadeInUp">
<div class="wechat-btn-bg"> <img src="images/login.jpg" alt="登录">
<a href="" class="wechat-btn"><img src="images/icon/icon-wechat.png" alt="微信登录"></a>
</div> </div>
</div> </div>
<div class="login-img wow fadeInUp">
<img src="images/login.jpg" alt="登录">
</div>
</div> </div>
<!-- 尾部 --> <!-- 尾部 -->

View File

@ -60,37 +60,39 @@
</header> </header>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="main login-main w1140 wow fadeInUp"> <div class="main login-main w1140 wow fadeInUp">
<div class="login-txt wow fadeInUp"> <div class="login">
<h1>欢迎注册</h1> <div class="login-txt wow fadeInUp">
<span>已有账号?<a href="login.html">登录</a></span> <h1>欢迎注册</h1>
<ul class="login-information register-information"> <span>已有账号?<a href="login.html">登录</a></span>
<li> <ul class="login-information register-information">
<span>手机号</span> <li>
<input type="text" name="uname" placeholder=""> <span>手机号</span>
</li>
<li>
<span>手机验证码</span>
<section>
<input type="text" name="uname" placeholder=""> <input type="text" name="uname" placeholder="">
<button class="code-btn">获取手机验证码</button> </li>
</section> <li>
</li> <span>手机验证码</span>
<li> <section>
<span>密码</span> <input type="text" name="uname" placeholder="">
<input type="txt" name="pwd" placeholder=""> <button class="code-btn">获取手机验证码</button>
</li> </section>
</ul> </li>
<button class="login-btn register-btn">立即注册</button> <li>
<div class="agree register-agree"> <span>密码</span>
<span><em class="agreement"></em>我已阅读并同意相关服务条款和隐私政策<ins class="icon-arrow"></ins></span> <input type="txt" name="pwd" placeholder="">
</li>
</ul>
<button class="login-btn register-btn">立即注册</button>
<div class="agree register-agree">
<span><em class="agreement"></em>我已阅读并同意相关服务条款和隐私政策<ins class="icon-arrow"></ins></span>
</div>
<div class="wechat-btn-bg">
<a href="" class="wechat-btn"><img src="images/icon/icon-wechat.png" alt="微信登录"></a>
</div>
</div> </div>
<div class="wechat-btn-bg"> <div class="login-img wow fadeInUp">
<a href="" class="wechat-btn"><img src="images/icon/icon-wechat.png" alt="微信登录"></a> <img src="images/login.jpg" alt="登录">
</div> </div>
</div> </div>
<div class="login-img wow fadeInUp">
<img src="images/login.jpg" alt="登录">
</div>
</div> </div>
<!-- 尾部 --> <!-- 尾部 -->