[已解决]怎么制作如图所示的用户注册界面啊

千里家族

刚学的web只会简单的一些表格和div标签 怎么做？

最佳答案

阿坤哥哥

2021-5-25 00:19:52

用现在最流行的flex布局就好，帮你做一个例子

1. <div class="row row-center">填写注册信息</div>
   
2. <div class="row row-align-left">
   
3.   <div class="left">用户名</div>
   
4.   <div class="middle"><input type="text"/></div>
   
5.   <div class="comment">用户名由字母开头...</div>
   
6. </div>

复制代码

1. .row {
   
2.   display: flex; flex-direction: row; width: 100%
   
3. }
   
4. .row-center {
   
5.   justify-content: center; align-items: center
   
6. }
   
7. .row-left {
   
8.   justify-content: flex-start; align-items: center
   
9. }
   
10. .left {
    
11.   width: 30%;
    
12. }
    
13. .middle {
    
14.   width: 40%;
    
15. }
    
16. .comment {
    
17.   width: 30%;
    
18. }

复制代码

跳转到最佳答案楼层

周传美

使用输入标签，用户名文本，密码，无线电，电子邮件，文本或电子邮件(电子邮件可能不兼容)。基本上，使用textarea，最后一个按钮是提交按钮

吴廷蜜

是的，您可以使用CSS来编写他的风格

霸

蓝球俱乐部

对于这一部分，只需查看HTML的表单部分的内容，
form标签是form标签，而里面的input元素是input标签，
输入文本，将type属性的值设置为text，密码设置为type="password"，复选框设置为type="radio"，使用文本区域的基本大小写，
然后提交按钮是type="submit"仅此而已

阿坤哥哥

用现在最流行的flex布局就好，帮你做一个例子

1. <div class="row row-center">填写注册信息</div>
   
2. <div class="row row-align-left">
   
3.   <div class="left">用户名</div>
   
4.   <div class="middle"><input type="text"/></div>
   
5.   <div class="comment">用户名由字母开头...</div>
   
6. </div>

复制代码

1. .row {
   
2.   display: flex; flex-direction: row; width: 100%
   
3. }
   
4. .row-center {
   
5.   justify-content: center; align-items: center
   
6. }
   
7. .row-left {
   
8.   justify-content: flex-start; align-items: center
   
9. }
   
10. .left {
    
11.   width: 30%;
    
12. }
    
13. .middle {
    
14.   width: 40%;
    
15. }
    
16. .comment {
    
17.   width: 30%;
    
18. }

复制代码

朱明根

向表单添加HTML标记，并将标记与表格表对齐。