效果图：

会员账号登录布局样式

HTML代码：

html会员中心模板HTMLCSS网页设计会员账号登录结构样式 Python

<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>

CSS代码剖析：

利用flex水平垂直居中

.tpt-1446 { display: flex; align-items: center; justify-content: center; height: 100vh}

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

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

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

.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网页设计。