利用表格布局注册表单

作者: 鲁智深 分类: HTML 发布时间: 2013-10-04 23:59

表单布局页面已经很少使用于互联网上,但对于页面比较简单,布局单一的页面,使用表单布局还是不错的方法(ps:注册页面),可以减少css代码的编写数量!

表格布局页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册页面</title>
</head>
<body>
<center>
            <table border="1" width="600">
                    <tr height="70">
                    <td colspan="2" style="background:url(logo.jpg) no-repeat">
                    </td>
                    </tr>
                <tr height="200">
                        <td width="300">
                      <img title="搜索风云榜" alt="搜索风云榜" src="http://www.yujzw.com/wp-content/themes/blog/images/logo.jpg">
                        </td>
                       
                <td>
                <form>


                       姓名:<input type="text" name="xingming"  value="木子"/><!--文本域-->
                       <br/>  <br/>
                       密码:<input type="password" name="mima"/><!--密码-->
                       <br/>  <br/>
                           重复密码:<input type="password" name="chongfumma"/><!--密码-->
                       <br/>  <br/>
                      <input type="submit" value="注册" name="zhuce"/><!---提交按钮-->
</form>
                </td>
                </tr>
                        <tr height="10">
                        <td colspan="2">
                        友情链接:<a href="http://www.yujzw.com/"> 常熟人家blog </a>
                        </td>
                        </tr>
                        <tr height="100">
                        <td colspan="2" align="right">
                          <img title="搜索风云榜" alt="搜索风云榜" src="http://www.yujzw.com/wp-content/themes/blog/images/logo.jpg">
                        </td>
                        </tr>
            </table>
            </center>
</body>
</html>

效果图:

注册页面效果图

注册页面效果图

4行2列格式制作出的注册页面!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注