HTML开发实例-简单相亲网站开发（主体为table）

最新推荐文章于 2024-06-16 19:17:59 发布

会飞的小蚂蚱

最新推荐文章于 2024-06-16 19:17:59 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/hfdxmz_3/article/details/106376485

版权

实现功能:简单的相亲网站：

清楚不常在，抓紧谈恋爱

我承诺

年满十八岁
单身
抱着严肃态度
寻找真诚的另一半

性别：	男女
生日：	--请选择年-- 2019 2020 2021 --请选择月-- 1 2 3 --请选择日-- 1 2 3
所在区域
婚姻状况	未婚已婚离婚
学历
喜欢的类型	妩媚的可爱的小鲜肉老腊肉都喜欢
自我介绍

	我同意注册条款和会员
	我是会员立即登录

 1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7 </head>
  8 <body>
  9     <h4>清楚不常在，抓紧谈恋爱</h4>
 10     <table>
 11         <!-- 第一行 -->
 12         <tr>
 13             <td>性别：</td><br />
 14             <td><input type="radio" id="nan" name="sex"> <label for="nan">男</label>  
 15                 <input type="radio"  id="nv" name="sex"> <label for="nv">女</label>
 16             </td><br>
 17         </tr>
 18         <!-- 第二行 -->
 19         <tr>
 20             <td>
 21                 生日：
 22             </td>
 23             <td>
 24                 <select>
 25                     <option checked="checked">--请选择年--</option>
 26                     <option>2019</option>
 27                     <option>2020</option>
 28                     <option>2021</option>
 29                 </select>
 30 
 31                 <select>
 32                     <option checked="checked">--请选择月--</option>
 33                     <option>1</option>
 34                     <option>2</option>
 35                     <option>3</option>
 36                 </select>
 37 
 38                 <select>
 39                     <option checked="checked">--请选择日--</option>
 40                     <option>1</option>
 41                     <option>2</option>
 42                     <option>3</option>
 43                 </select>
 44 
 45             </td>
 46         </tr>
 47         <!-- 第三行 -->
 48         <tr>
 49             <td>所在区域</td>
 50             <td>
 51                 <input type="text" value="北京思密达">
 52             </td>
 53         </tr>
 54         <!-- 第四行 -->
 55         <tr>
 56             <td>婚姻状况</td>
 57             <td>
 58                 <input type="radio" id="weihun" name="hunyin"><label for="weihun">未婚</label>
 59                 <input type="radio" name="hunyin"> <label>已婚</label>
 60                 <input type="radio" name="hunyin" checked="checked"> <label>离婚</label>
 61             </td>
 62         </tr>
 63         <!-- 学历 -->
 64         <tr>
 65             <td>学历</td>
 66             <td><input type="text" value="博士后"></td>
 67         </tr>
 68         <!-- 喜欢的类型 -->
 69         <tr>
 70             <td>喜欢的类型</td>
 71             <td>
 72                 <input type="checkbox" name="xingge">妩媚的
 73                 <input type="checkbox" name="xingge">可爱的
 74                 <input type="checkbox" name="xingge">小鲜肉
 75                 <input type="checkbox" name="xingge">老腊肉
 76                 <input type="checkbox" name="xingge">都喜欢
 77             </td>
 78         </tr>
 79         <!-- 自我介绍 -->
 80         <tr>
 81             <td>自我介绍</td>
 82             <td><textarea>个人简介</textarea></td>
 83         </tr>
 84         <!-- 免费注册 -->
 85         <tr>
 86             <td></td>
 87             <td><input type="submit" value="免费注册"></td>
 88         </tr>
 89         <!-- checkbox -->
 90         <tr>
 91             <td>
 92             <td><input type="checkbox">我同意注册条款和会员</td>
 93         </tr>
 94         <tr>
 95             <td></td>
 96             <td><a href="#">我是会员立即登录</a></td>
 97         </tr>
 98             <td></td>
 99             <td>
100                 <h5>我承诺</h5>
101                 <ul>
102                     <li>年满十八岁</li>
103                     <li>单身</li>
104                     <li>抱着严肃态度</li>
105                     <li>寻找真诚的另一半</li>
106 
107                 </ul>
108             </td>
109         </tr>
110     </table>
111 </body>
112 </html>