HTML+CSS网页设计，会员账号登录布局样式[通俗易懂]

大家好，本篇文章分享会员账号登录的布局样式。

效果图：

会员账号登录布局样式

HTML代码：

<div class="tpt-1446">
<div class="tpt-wp">
<div class="tpt-left">
<img src="3.jpg">
</div>
<div class="tpt-right">
<div class="tpt-form">
<h3>账号登录</h3>
<p>用户登录成功后，该用户帐号和密码由用户负责保管，用户须保证登录信息的真实性、合法性、有效性。</p>
<form>
<input type="text" name="name" placeholder="登录账号" autocomplete="off">
<input type="password" name="password" placeholder="登录密码" autocomplete="off">
<p>使用<span> 账号登录</span>，即代表同意《用户登录协议》。</p>
<button>立即登录</button>
</form>
</div>
</div>
</div>
</div>

IT知识分享网

CSS代码分析：

使用flex水平垂直居中

IT知识分享网.tpt-1446 {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh
}

使用flex布局，固定高度和宽度

.tpt-wp {
 display: flex;
 width: 900px;
 height: 600px
}

分为左右布局，左边配置图片，右边使用flex水平垂直居中

IT知识分享网.tpt-left {
 width: 400px
}
.tpt-right {
 display: flex;
 align-items: center;
 justify-content: center;
 background: #fff;
 width: 500px
}

配置表单的标题简介的字体颜色，字体大小和行高

.tpt-form h3 {
 color: #79b8c1;
 font-size: 34px;
 line-height: 44px;
 font-weight: 400;
 margin-bottom: 20px
}
.tpt-form p {
 color: #999;
 font-size: 12px;
 line-height: 20px;
 margin-bottom: 20px
}

配置表单文本输入框的样式

.tpt-form input {
 box-sizing: border-box;
 width: 100%;
 height: 38px;
 line-height: 38px;
 padding: 0 10px;
 background: #fff;
 border: 1px solid #eee;
 color: #333;
 font-size: 14px;
 border-radius: 2px;
 margin-bottom: 20px
}

配置表单提交按钮的样式

.tpt-form button {
 width: 100%;
 height: 38px;
 line-height: 38px;
 background: #79b8c1;
 border: 0;
 color: #fff;
 font-size: 14px;
 border-radius: 2px;
 cursor: pointer
}

注：以上部分CSS代码只是帮助大家分析结构，是需要清除所有标签的默认样式。

有问题可以留言，大家一起学习HTML+CSS网页设计。