简单表单框架
来源：互联网 发布：linux黑客帝国代码雨 编辑：程序博客网 时间：2024/05/22 03:42
代码展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单样式</title> <style type="text/css"> * { font-size: 12px; margin: 0; padding: 0; } input { width: 320px; height: 24px; border: 1px solid #999; border-radius: 4px; } .formErr { border: 1px solid red; } .form .label { display: block; float: left; width: 128px; height: 40px; line-height: 40px; text-align: end; } .form .txt { display: block; float: left; width: 340px; height: 40px; line-height: 40px; padding-left: 16px; } .form button { width: 56px; height: 24px; background-color: green; border: 0; border-radius: 4px; color: white; } .form .errTips { width: 226px; background-color: lightpink; color: darkred; border-radius: 4px; margin-left: 144px; margin-top: 6px; margin-bottom: 4px; padding: 16px 48px; } </style> </head> <body> <div class="form"> <div> <span class="label">用户名</span> <span class="txt"><inputtype="text"placeholder="6-20个字符"/></span> </div> <div style="clear: both"></div> <div> <span class="label">密码</span> <span class="txt"><inputtype="password"placeholder="6-20个字符"class="formErr"/></span> </div> <div style="clear: both"></div> <div> <span class="label">重复密码</span> <span class="txt"><inputtype="password"placeholder="再次输入密码"/></span> </div> <div style="clear: both"></div> <div class="errTips"> <ul> <li>密码长度不能小于6个字符！</li> <li>密码不能为空！</li> <li>两次密码输入不一致！</li> </ul> </div> <div style="clear: both"></div> <div> <span class="label"></span> <span class="txt"><button>提交</button></span> </div> <div style="clear: both"></div> </div> </body> </html>
