暑假第六记(HTML作业示例:用户注册界面)
<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>用户注册</title>
<style> *{ padding: 0px; margin: 0px; } body{ font-size: 20px; font-family:仿宋; background:mediumpurple; } #yyy{ width: 800px; height: 1000px; margin: 50px auto; } form{ width: 700px; height: 800px; } h2{ height: 40px; line-height: 40px; text-align:center; font-size:40px; /* border-bottom: 1px solid #FFC0CB; */ } p{ color:white; } span{ display: inline-block; width: 100px; margin-right: 120px auto; } #z input{ width: 80px; height: 30px; background-color: #FFFF00; } </style>
</head>
<body> <div id="yyy">
<form> <h2>用户注册</h2> <p>请注意:带有*的项必须填</p> <h3><input readonly="readonly" placeholder="请留意注意事项"></h3><br> <span>昵称:*</span> <input type="text" required="required" > (6-18个字符,由字符、数字、下划线构成)<br><br> <span>手机号:*</span> <input type="tel" required="required">(由11为数字组成)<br><br> <span>姓名:*</span> <input type="text" required="required">(必须是真实姓名)<br><br> <span>性别:</span> <input type="radio" checked="checked" name="jzl">男 <input type="radio" name="jzl">女<br><br> <span>年龄:</span> <input type="number" name="年龄" min="18" max="100">(年龄仅限于18-100之间)<br><br> <span>出生日期:</span> <input type="date"><br><br> <span>电子邮箱:</span> <input type="email"><br><br> <span>身份证号:*</span> <input type="text" required="required"><br><br> <span>职业:</span> <select> <option>公司员工</option> <option>项目经理</option> <option>前台行政</option> <option>运维主管</option> <option>前端主管</option> <option>CEO</option> </select><br><br> <span>爱好:</span> <input type="checkbox">音乐 <input type="checkbox">美术 <input type="checkbox">下棋 <input type="checkbox">篮球 <input type="checkbox">看电影 <br><br> <span>喜欢的颜色:</span> <input type="color" name="lovecolor" value="#ff557f"><br><br><br><br><br><br> <div id="z"><input type="submit" value="提交"> <input type="reset" value="清除重来"><br></div> </form>
</div>
</body> </html>
效果图:
下一篇:
DLL死锁产生原因与调试方法