15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 简单的注册页面制作

简单的注册页面制作

时间:2023-07-23 17:30:01 | 来源:网站运营

时间:2023-07-23 17:30:01 来源:网站运营

简单的注册页面制作:最近中做一个小项目,其中涉及到登录和注册页面的制作,接下来就为大家介绍一下制作的过程,不足之处请各位大神批评指出。

1、向上效果图:

2、制作难点是如何将A区的文字右对齐。
我的制作思路是:给A区的文字设置一个宽度,再将文字的text-align属性设置为 right。
3、下面是页面的结构(部分):

<div> <span>请输入邮箱地址</span> <input type="email" name="emailText" id="emailText" placeholder="xxx.@xxx.com" /> <p>邮箱地址请按要求格式输入</p></div> <div> <span>请输入密码</span> <input type="password" name="pass" id="pass1" /></div> <div> <span>请重复输入密码</span> <input type="password" name="pass2" id="pass2" /> <p>密码请为6-16位英文数字</p></div>4、下面是页面的布局(部分):

#signup span{ float: left; width: 35%; text-align: right; font-size: 14px; padding-right: 10px;}#signup p{ width: 200px; margin: 0 0 0 35%; font-size: 12px; line-height: 20px; color: #ccc; padding-left: 10px;}#signup textarea{ width: 50%; height: 100px; resize: none;}5、值得一提的是下面的这段样式:

解释:因为span是行内元素,不支持宽高。当给span元素设置width:35%时,其样式在页面中并不会表现出来。当给span元素加上float:left时,行内元素就支持宽高了。加上text-align: right;是为了让文字居右显示。加padding-right: 10px;是为了留白,让文字与输入框之间有一定的距离。

6、至此就完成了(页面略吃藕,但总算是完成啦啦啦!!),赶快去试试吧!

注:注册页面源码请查看:get到一个注册页面的制作 - 寒雨落轩的个人空间

关键词:注册,简单

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭