网页注册页面的制作

时间：2024-02-18 10:52:32

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

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             }/*让内嵌元素支持宽高（或者display: inline-block;）*/
14             #signup span{
15                 float: left;
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、至此就完成了，赶快去试试吧！

相关文章