<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册</title></head><style> /* 单选按钮自定义颜色 */ input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } input[type='radio']:checked:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #00BFFF; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } /* 多选按钮自定义颜色 */ input[type=checkbox]{ cursor: pointer; position: relative; width: 15px; height: 15px; font-size: 14px; } input[type=checkbox]::after{ position: absolute; top: 0; border: none; /* background-color: #ff670c; */ color: #fff; width: 15px; height: 15px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center; content: ' '; border-radius: 1px } input[type=checkbox]:checked::after{ background-color: #F08080; border-color: #F08080; content: "✓"; font-size: 12px; font-weight: bold; }</style><body> <h2 align="center">青春不常在,抓紧谈恋爱</h2> <table width="700" align="center"> <!-- --> <!-- --> <tr> <td>性别：</td> <td> <input type="radio" name="sex" id="man"><label for="man"><img src="img/1.png"> 男</label> <input type="radio" name="sex" id="woman"><label for="woman"><img src="img/2.png"> 女</label> </td> </tr> <tr> <td>生日：</td> <td> <select name="" id=""> <option >--请选择年份--</option> <option >2002</option> <option >2003</option> <option >2004</option> <option >2005</option> <option >2006</option> <option >2007</option> <option >2008</option> <option >2009</option> </select> <select> <option >--请选择月份--</option> <option >1</option> <option >2</option> <option >3</option> <option >4</option> <option >5</option> <option >6</option> </select> <select name="" id=""> <option >--请选择日--</option> <option >1</option> <option >2</option> <option >3</option> <option >4</option> <option >5</option> <option >6</option> <option >7</option> </select> </td> </tr><tr> <td>地区：</td> <td><input type="text" value="河南南阳"></td></tr><tr> <td>婚姻状况：</td> <td> <input type="radio" name="hun " id="yi" checked><label for="yi">已婚</label> <input type="radio"name="hun " id="wei"><label for="wei">未婚</label> <input type="radio"name="hun " id="li"><label for="li">离婚</label> </td></tr><tr> <td>学历：</td> <td><input type="text" value="本科生"></td></tr><tr> <td>喜欢的类型：</td> <td> <input type="checkbox" name="love">性感|帅气 <input type="checkbox" name="love">妩媚|阳光 <input type="checkbox" name="love">成熟|知性 <input type="checkbox" name="love">型男|御姐 <input type="checkbox" name="love">野猫|奶狗 <input type="checkbox" name="love" checked>我都要 </td></tr><tr> <td>个人介绍</td> <td> <textarea name="" id="" cols="30" rows="10">个人简介</textarea> </td></tr><tr> <td></td> <td> <input type="submit" value="免费注册"> </td></tr><tr> <td></td> <td> <input type="checkbox" checked>我同意注册条款和会员加入标准 </td></tr><tr> <td></td> <td> <a href="#">我是会员,立即登录</a> </td></tr><tr> <td></td> <td> <h5>我承诺</h5> <ul> <li> 年满18岁 </li> <li> 遵纪守法,不欺骗感情</li> <li>自身内容正确,不过度P图</li> <li>我真诚寻找另一半</li> </ul> </td></tr> </table></body></html>
可以加上CSS把页面美化一下
日期那个，可以用JS代码去做