整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，本篇文章分享会员账号登录的布局样式。
效果图：
会员账号登录布局样式
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>
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网页设计。
们在上网的时候，经常有一些登录界面进行输入账号和密码，以及我们在网上填一些信息，这些功能的实现都是通过表单来完成的，今天我们就来讲讲表单。
表单不是指一个标签，而是指一类标签。
我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台，而method属性有两个值，分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来，并且有长度限制，而post表单所传的内容不会在地址栏显示出来，并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的，在这里我就不赘述了。
其中最重要的是<input>标签，input标签也是单标签。input标签的type属性值不同，其产生的作用也不同：如：<input type="text">产生的是文本框，一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框，一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框，一般是我们登录的那个按钮。这些标签都有value属性，但只有提交框用最合适用，因为文本框和密码框虽然也会展示出来，但效果却差强人意，我们一般都用placeholder属性替代它。
不知大家有没有在网上做过选择题，作者是做过的。网页中的选择题也是用的input。
input的type属性值还有radio，是单选框，有几个选项就写几个input，但要注意每一个input里都要写相同的name属性和属性值，这样的话浏览器才会知道这些是同一道题。
既然有单选题那一定也有多选题了，type的checked属性是多选框，其和单选的用法一样，也都要注意name一样的为一道题，还有一个属性是checked=“checked”，这个可以设定默认选择的选项。
我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况，其实input选择框只有被点击的时候才能选中，但有的时候太小不容易点击甚至有的根本没有显示出来，这样的话用户体验就会非常的差，所以我们引进了一个标签：<label></label>标签，这个标签可以实现点击文字就进行选择的功能，用法就是将input标签和文字写在同一个label标签中，注意每一个选项写一起。
我们来看一下代码和结果：
作者已经尽量去说清楚了，欢迎大家批评指教，希望多多关注[送心]
络用的多了，各种注册、账号、密码也多了，管都管不过来，还好现在大多数浏览器都有各种类似帐号管家的功能，只要注册登陆浏览器然后各种网站的账号密码只要登陆一次让它记住就行了，全权委托给浏览器管理了，可有时确实需要这密码，比如要手机上登陆什么的就抓了瞎，各种“找回密码”、“忘记密码”一通折腾费时又费力。
在来介绍一个简单实用小技巧，无需任何工具软件，利用HTML语言规则仅仅几步就能让你看到自己以前设定的密码：
1、要让这个密码星号正常显示出来，在密码星号的输入框中鼠标右击，选择最下面的“审查元素”。
2、此时会在浏览器的右侧跳出网页的HTML源代码并以蓝色选中，你不必要懂HTML，只要找到“type=password"就行。
3、将“password"改为"text"，然后回车，这时就会发现原来显示星号密码的部分已经成功显示当初设定的密码了，经测试了几个市面常用的浏览器均行的通，如果有不能正常显示的请留言。
还请用于正当用途。
*请认真填写需求信息，我们会在24小时内与您取得联系。
