HTML做网页登录界面

代码：

html>
lang="en">

    charset="UTF-8">
    


     
style="width:500px;float: right;margin:0 auto;" >
         for="username" style="font-size:18px" >用户名：
         
style="height:35px;width:400px;position:relative;display:inline" >    
             id="username" type="text" style="height:30px;width:350px;padding-right:50px;">
             style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;">  
         
         

         

         for="password1" style="font-size:18px" > 密码：
         
style="height:35px;width:400px;position:relative;display:inline" >    
             id="password1" type="text" style="height:30px;width:350px;padding-right:50px;">
             style="position:absolute;right:16px;top:2px;background-image:url(p.ico);height:16px;width:16px;display:inline-block;">  
         
         

         

         for="verification_code" style="font-size:18px" >验证码：
         id="verification_code" type="text" style="height:30px;width:350px;">
         

         

         
style="width:426px;float: right;">
             type="radio" name="auto_login" value="1"/> 自动登录
             herf="找回密码网址">忘记密码？
         
         

         

         
style="width:426px;float: right;">
             type="submit"  value="登录" style="height:30px;width:400px;background-color:red;"/>
         
     

结果：

需要改进的地方：（1）代码在每一栏间用了br换行标签。应该设置一个间隔宽度，突然想到可以每个都写到一个p标签中，明天试试。

（2）设置自动登录是，为了使初始位置与上面框对齐，设置宽度时是在审查元素中查看的直观对齐的宽度，如何寻找它在理论中的width呢？还有在用户名和密码框中图片的放置也采用了同样的处理方法，理论上应该怎么做？（而且为什么在图片以下的编写还会影响图片的放置）