注册与登录界面的美化

 
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <title>Formdemo</title>
  5. <styletype="text/css">
  6. <!--
  7. body{
  8. font-family:Arial,Helvetica,sans-serif;
  9. font-size:12px;
  10. color:#666666;
  11. background:#fff;
  12. text-align:center;
  13. }
  14. *{
  15. margin:0;
  16. padding:0;
  17. }
  18. a{
  19. color:#1E7ACE;
  20. text-decoration:none;
  21. }
  22. a:hover{
  23. color:#000;
  24. text-decoration:underline;
  25. }
  26. h3{
  27. font-size:14px;
  28. font-weight:bold;
  29. }
  30. pre,p{
  31. color:#1E7ACE;
  32. margin:4px;
  33. }
  34. input,select,textarea{
  35. padding:1px;
  36. margin:2px;
  37. font-size:11px;
  38. }
  39. .buttom{
  40. padding:1px10px;
  41. font-size:12px;
  42. border:1px#1E7ACEsolid;
  43. background:#D0F0FF;
  44. }
  45. #formwrapper{
  46. width:450px;
  47. margin:15pxauto;
  48. padding:20px;
  49. text-align:left;
  50. border:1px#1E7ACEsolid;
  51. }
  52. fieldset{
  53. padding:10px;
  54. margin-top:5px;
  55. border:1pxsolid#1E7ACE;
  56. background:#fff;
  57. }
  58. fieldsetlegend{
  59. color:#1E7ACE;
  60. font-weight:bold;
  61. padding:3px20px3px20px;
  62. border:1pxsolid#1E7ACE;
  63. background:#fff;
  64. }
  65. fieldsetlabel{
  66. float:left;
  67. width:120px;
  68. text-align:right;
  69. padding:4px;
  70. margin:1px;
  71. }
  72. fieldsetdiv{
  73. clear:left;
  74. margin-bottom:2px;
  75. }
  76. .enter{text-align:center;}
  77. .clear{
  78. clear:both;
  79. }
  80. -->
  81. </style>
  82. </head>
  83. <body>
  84. <divid="formwrapper">
  85. <h3>已注册用户登录</h3>
  86. <formaction=""method="post"name="apLogin"id="apLogin">
  87. <fieldset>
  88. <legend>用户登录</legend>
  89. <div>
  90. <labelfor="Name">用户名</label>
  91. <inputtype="text"name="Name"id="Name"size="18"maxlength="30"/><br/>
  92. </div>
  93. <div>
  94. <labelfor="password">密码</label>
  95. <inputtype="password"name="password"id="password"size="18"maxlength="15"/><br/>
  96. </div>
  97. <divclass="cookiechk">
  98. <label><inputtype="checkbox"name="CookieYN"id="CookieYN"value="1"/><ahref="#"title="选择是否记录您的信息">记住我</a></label>
  99. <inputname="login791"type="submit"class="buttom"value="登录"/>
  100. </div>
  101. <divclass="forgotpass"><ahref="#">您忘记密码?</a></div>
  102. </fieldset>
  103. </form><br/>
  104. <h3>未注册创建帐户</h3>
  105. <formaction=""method="post"name="apForm"id="apForm">
  106. <fieldset>
  107. <legend>用户注册</legend>
  108. <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong>在您注册之前请先认真阅读服务条款.</p>
  109. <div>
  110. <labelfor="Name">用户名</label>
  111. <inputtype="text"name="Name"id="Name"value=""size="20"maxlength="30"/>
  112. *(最多30个字符)<br/>
  113. </div>
  114. <div>
  115. <labelfor="Email">电子邮箱</label>
  116. <inputtype="text"name="Email"id="Email"value=""size="20"maxlength="150"/>*<br/>
  117. </div>
  118. <div>
  119. <labelfor="password">密码</label>
  120. <inputtype="password"name="password"id="password"size="18"maxlength="15"/>
  121. *(最多15个字符)<br/>
  122. </div>
  123. <div>
  124. <labelfor="confirm_password">重复密码</label>
  125. <inputtype="password"name="confirm_password"id="confirm_password"size="18"maxlength="15"/>
  126. *<br/>
  127. </div>
  128. <div>
  129. <labelfor="AgreeToTerms">同意服务条款</label>
  130. <inputtype="checkbox"name="AgreeToTerms"id="AgreeToTerms"value="1"/>
  131. <ahref="#"title="您是否同意服务条款">先看看条款?</a>*</div>
  132. <divclass="enter">
  133. <inputname="create791"type="submit"class="buttom"value="提交"/>
  134. <inputname="Submit"type="reset"class="buttom"value="重置"/>
  135. </div>
  136. <p><strong>*在提交您的注册信息时,我们认为您已经同意了我们的服务条款.<br/>
  137. *这些条款可能在未经您同意的时候进行修改.</strong></p>
  138. </fieldset>
  139. </form>
  140. </div>
  141. </body>
  142. </html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值