文档章节

get到一个注册页面的制作

寒雨落轩
 寒雨落轩
发布于 2017/04/18 20:29
字数 731
阅读 24
收藏 0

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

1、向上效果图:

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

1 <div id="signup">
 2             <form action="javaScript:;" method="post">
 3                 <div>
 4                     <span>请输入邮箱地址</span>
 5                     <input type="email" name="emailText" id="emailText" placeholder="xxx.@xxx.com" />
 6                     <p>邮箱地址请按要求格式输入</p>
 7                 </div>
 8                 
 9                 <div>
10                     <span>请输入密码</span>
11                     <input type="password" name="pass" id="pass1" />
12                 </div>
13                 
14                 <div>
15                     <span>请重复输入密码</span>
16                     <input type="password" name="pass2" id="pass2" />
17                     <p>密码请为6-16位英文数字</p>
18                 </div>
19                     
20                 <div>
21                     <span>性别</span>
22                     <label>
23                         <input type="radio" name="sex" id="man" value="man" checked="checked"/>男
24                     </label>
25                     <label>
26                         <input type="radio" name="sex" id="woman" value="woman" />女
27                     </label>
28                 </div>
29                 
30                 <div>
31                     <span>城市</span>
32                     <select name="cities">
33                         <option value="beijing">北京</option>
34                         <option value="shanghai" selected="selected">上海</option>
35                         <option value="广州">广州</option>
36                         <option value="shenzhen">深圳</option>
37                     </select>
38                 </div>
39                 
40                 <div>
41                     <span>爱好</span>
42                     <input type="checkbox" name="sport" id="sport" value="sport" />
43                     <label for="sport">运动</label>
44                     <input type="checkbox" name="art" id="art" value="art" checked="checked" />
45                     <label for="art">艺术</label>
46                     <input type="checkbox" name="sec" id="sec" value="sec" />
47                     <label for="sec">科学</label>
48                 </div>
49                 
50                 <div>
51                     <span>个人描述</span>
52                     <textarea name="textArea" rows="5" cols="100">这是一个多行输入框,输入您的个人描述</textarea>
53                 </div>
54             </form>
55             <form action="javaScript:;" method="post">
56                 <input type="submit" name="submit" id="submit" value="确认提交" />
57             </form>
58         </div>

4、下面是页面的布局:

1 <style type="text/css">
 2             body{
 3                 margin: 0;
 4                 background: #ccc;
 5             }
 6             #signup{
 7                 margin: 25px;
 8                 padding: 20px;
 9                 background: #fff;
10             }
11             #signup div{
12                 margin-bottom: 15px;
13             }
14             #signup span{
15                 float: left;/*让内嵌元素支持宽高(或者display: inline-block;)*/
16                 width: 35%;
17                 text-align: right;
18                 font-size: 14px;
19                 padding-right: 10px;
20             }
21             #signup p{
22                 width: 200px;
23                 margin: 0 0 0 35%;
24                 font-size: 12px;
25                 line-height: 20px;
26                 color: #ccc;
27                 padding-left: 10px;
28             }
29             #signup textarea{
30                 width: 50%;
31                 height: 100px;
32                 resize: none;
33             }
34             #signup #submit{
35                 width: 100%;
36                 height: 40px;
37                 border-radius: 10px;
38                 border: none;
39                 background: #3355D0;
40                 font-size: 20px;
41                 color: #fff;
42                 outline: none;/*清除边框高亮显示*/
43             }
44             #signup #submit:hover{
45                 background: #0000FF;
46             }
47         </style>

5、值得一提的是下面的这段样式:

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

6、至此就完成了,赶快去试试吧!

© 著作权归作者所有

共有 人打赏支持
寒雨落轩
粉丝 0
博文 1
码字总数 731
作品 0
广州
前端工程师
私信 提问
流程图在登录后会增加操作选项的方法

我们一般在使用软件的时候,如果是不需要一开始就注册的,一般是很少会去注册,而是直接去使用,因为这样会比较方便,但是很多人都不知道,其实登录后可以使用的功能会比之间的有所增加,我们...

熊本二号
2018/01/25
0
0
公司网站制作与后续改版开发

【业务需求】 一、功能需求 两个网站, 一个为公司展示网站,要求:网页内背景图及展示图片可以更换,内容类文字及版式可以自定义,页面使用响应式展现方式; 另一个为信息资源分享平台,要求...

kkUedkY
2016/11/07
4
0
公司网站制作与后续改版开发

【业务需求】 一、功能需求 两个网站, 一个为公司展示网站,要求:网页内背景图及展示图片可以更换,内容类文字及版式可以自定义,页面使用响应式展现方式; 另一个为信息资源分享平台,要求...

kkUedkY
2016/11/07
1
0
公司网站制作及后续改版开发

【业务需求】 一、功能需求 两个网站, 一个为公司展示网站,要求:网页内背景图及展示图片可以更换,内容类文字及版式可以自定义,页面使用响应式展现方式,甲方所需求交互效果; 另一个为信...

kkUedkY
2016/11/08
3
0
【Web制图】如何使用ArcGIS Online制作游记(二)

1.3 使用ArcGIS Online制图并分享 访问 ArcGIS Online的门户www.arcgis.com,按照向导的提示注册一个账号。在主页上可以免费注册30天的企业级账号,注册后在就直接在ArcMap中将刚才生成的点要...

长平狐
2012/11/28
779
0

没有更多内容

加载失败,请刷新页面

加载更多

【C++】智能指针简述(四):shared_ptr

  在开始本文内容之前,我们再来总结一下,前文内容:   1.智能指针采用RAII机制,在构造对象时进行资源的初始化,析构对象时进行资源的清理及汕尾.   2.auto_ptr防止拷贝后析构释放同一块内...

shzwork
23分钟前
1
0
作为Java程序员这些技术都不会,拿什么去涨薪跳槽?

引言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~,缩减HC、裁员不绝于耳,大家都是人心惶惶,年前如此,年后想必肯定又是一场更为惨烈的江湖厮杀。但博...

别打我会飞
46分钟前
2
0
springboot开发之定时器quartz 定时任务调度(压缩版,抽取quartz的单个任务表实现)

前言 老了, 记不住了, 好记性不如烂笔头; 没想到曾经过目不忘的我, 也有这么一天, 岁月蹉跎,学习一天不如一天 难受 Quartz可以用来做什么? Quartz是一个任务调度框架。比如你遇到这样的问题...

尾生
51分钟前
11
0
技术经理平时都干啥?

「技术主管」是开发团队中的某位程序员需要对一起创建系统的整个开发团队负责时所承担的角色。通常他既要对最终交付的软件系统负责,另外也会像一个程序员一样去开发实现系统。 一个技术主管...

春哥大魔王的博客
今天
7
0
java工作流引擎Jflow流程事件和流程节点事件设置

流程实例的引入和设置 关键词: 开源工作流引擎 Java工作流开发 .net开源工作流引擎 流程事件 工作流节点事件 应用场景: 在一些复杂的业务逻辑流程中需要在某个节点或者是流程结束后做一些业...

ccflow周朋
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部