跳转至内容
上海创厦网络科技
IT服务专家
上海创厦网络科技上海创厦网络科技
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程

HTML中的表单Form实现居中效果

您在这里:
  1. 首页
  2. HTML
  3. HTML中…

之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面分享一下我所经历过程中的错误与最终结果。(因为做这部分作业的时候还没有学 css,所以没用)

1、刚做出来的样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

            
            
         
            
            
         
            
            (可包含a-z、0-9和下划线)
         
            
            (至少包含6个字符)
         
            
            
         
            
            (必须包含@字符)
        

看起来很别扭,所以要继续改进一下。。。

2、经过修改后

 

看起来好像更别扭了,但是实现了居中,到这里时,我也不知道自己用的 < center> 对不对。。。

1
2
3
4
5
6


    

        ““`
        ““`
    

3、使用表格布局后

 

这就是在经过了一晚上的修改后,最终呈现的结果。

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83



    
        
                 
    
    
        


        

            

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

                

                    

                    

                

            

(可包含a-z、0-9和下划线)
(至少包含6个字符)
(必须包含@字符)
                        男
                        女
                    
                        运动
                        聊天
                        玩游戏
                    
                        年
                        
                        日
                    

            
                
        

        


    

若觉得左边的标签左对齐不好看,也可以在 < td >标签中加入align=“right”,使文字右对齐

1

到此这篇关于HTML中的表单Form实现居中效果的文章就介绍到这了,更多相关HTML表单Form居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

Category: HTMLstartupplaza2022年5月30日评论

作者: startupplaza

文章导航

历史的文章历史的文章:html+css实现分层金字塔的实例未来的文章未来的文章:在HTML中限制input 输入框只能输入纯数字的实现

Related Posts

利用div+css3实现一个背景渐变的button按钮的示例代码
2022年5月30日
html父子页面iframe双向发消息的实现示例
2022年5月30日
在HTML里加载摄像头的方法
2022年5月30日
在HTML中限制input 输入框只能输入纯数字的实现
2022年5月30日
详解html-webpack-plugin使用
2022年5月30日
一分钟带你体验html+vue+element-ui的丝滑
2022年5月30日

技术探讨

  • 使用HTML5捕捉音频与视频信息概述及实例
  • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
  • 详解HTML5中的