整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，本篇文章分享会员账号登录的布局样式。
效果图：
会员账号登录布局样式
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网页设计。
图1
图2
图3
就爱UI - 分享UI设计的点点滴滴
我们在浏览网页时会经常遇到注册会员的界面，大概像这个样子：
或填写问卷的情况，大概像这个样子：
我们把这些内容称之为表单。
如何向自己的页面中添加表单呢？
添加表单的操作和添加表格类似。
首先我们要在页面中写入<form></form>标签，这是向浏览器声明这里是个表单，它本身并不会显示在页面中，但是可以全局控制表单元素的一些属性，就像表格中的<table></table>标签。
然后再在<form></form>中写入<input/>标签，这个标签的内容就会显示在页面中了，就像表格元素中的<tr><td>标签。不同的是<input/>没有结尾标签。
下面让我们写一写。
首先复制"第一个页面.html"文件。改名为"表单.html"，然后清空<body></body>中的内容，将<head></head>中间的<title></title>中间的内容改为"表单"，这样方便我们查看测试页面。
示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
</body>
</html>下面我们要写入表单内容，示例代码如下：
<form> <input/></form>页面效果如下：
只有一个输入框。下面，我们为输入框添加名称"会员名称："，示例代码如下：
<form> 会员名称： <input/></form>效果如下：
这样我们就写出了一个简单的表单，如果为表单添加更多内容和设置，就要继续了解表单的属性。
表单元素属性1
<input/>标签通过改变type属性可以变换出不同功能，在页面制作中，我认为<input/>标签中的type属性最重要。
下面我们来看一下type属性不同的值。
图片来源W3School
输入文字：首先，先来看text值。说明很明确，这个属性值的<input>标签主要是用来输入文本，比如"会员名称。"
示例代码如下：
<form> 会员名称： <input type="text"/></form>页面效果如图所示：我胡乱输入了几个字母
如果不指定type的text值的话，表面看起来并不影响输入内容，但是表单的内容最终是要提交到服务器的，如果不注明type="text"，服务器就不能判断你输入的字符到底是一段代码还是一段字符串组成的文本，因此，我们为了让提的交数据在服务器端能被准确识别，一定要写好type的属性。
除此之外变换type值也能为<input/>变换不同功能。
制作提交按钮：例如"submit"（提交）。在我们输入完表单内容后，一般都有一个提交按钮，这个提交按钮也是由<input/>标签来完成的。
示例代码如下：
<form> 会员名称： <input type="text"/> <input type="submit"/></form>如图所示：
因为<input/>是内联元素，所以"submit"按钮会和之前的<input>显示在一行，换行的话很简单，可以使用<br>标签。
大家观察一下发现，我们并没有给"submit"按钮指定文字，在按钮上却出现了"提交查询"的字样，这是html默认的，如果我们要改变按钮文字就要使用value这个属性。示例代码如下：
<input type="submit" value = "提交"/>页面效果如下：
其实我们在输入文字时，输入框里会经常有提示文字，当我们点击输入框时，提示文字消失了，这个功能怎么实现？
这又涉及到一个新属性，叫做"placeholder"（提示文字）。
示例代码如下：
<input type="text" placeholder = "请输入英文或汉语拼音"/>页面效果如下：
下面我们来练习一下，示例代码如下：
<form>
会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音"/><br>
会员密码：<input type = "text" placeholder = "请输入英文字母、特殊符号、数字"/><br>
确认密码：<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>页面效果如下：（想把密码字符显示为小圆点的读者可以先去属性值列表中找找"password"看看，咱们后面会细致讲解）
制作多选表单：多选表单的type属性值是"checkbox"。
我猜大家也猜到该怎么写了，示例代码如下：
<form>
兴趣爱好：<br>
<input type = "checkbox" name="hobby" value = "reading"/>读书
<input type = "checkbox" name="hobby" value = "film"/>电影
<input type = "checkbox" name="hobby" value = "painting"/>绘画
<input type = "checkbox" name="hobby" value = "music"/>音乐
<br>
<input type = "submit" value = "submit"/>
</form>页面效果如下：
大家可以点点试试，可以多选了。如图：
这时小伙伴们会发现在这组示例中，出现了name和value两个属性。
先说value，在"submit"中，value的值也就是"提交"二字，是直接显示在按钮上的，而这里的value值却没有显示，显示出来的是我们在<input/>标签后面输入的"读书、电影、绘画、音乐"这样的字样。也就是说这里的value不会显示为选框的名字！
那value属性是干嘛的呢？实际上"checkbox"属性下的value属性值是写给后台的服务器看的。
我们向服务器提交选择后，服务器把name的名称作为数据的大类名称，把value值作为大类中的子类名称来存储或分析数据。
比如这个选择表单是有关兴趣爱好的，因此数据的大类属于"爱好"（hobby），即name="hobby"，hobby中又分为"reading"（读书），"film"（电影），"painting"（绘画），"music"（音乐），即value="reading"、value="film"等等。这样不同用户的不同选择就按照这个数据组织方式提交给了服务器。
大家明白了吗？
另外需要说明的是，name和value最好使用英文或拼音来书写！
虽然我们目前不涉及后端服务器上的操作，但是在学习时要养成规范书写的习惯。
其实，除了type="submit"的情况外，其他需要输入信息的type属性类型都是要写name属性的，不过不同type属性类型的value却不太一样。
下面我们来看看type="text"时的标准写法：当type="text"的时候，不必写value属性，因为value值为用户输入的内容
<form>
会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
会员密码：
<input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>今天的内容先到这里，我们明天继续讲解"表单元素"。
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
