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

2020-05-27 16:00:59来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

清楚不常在,抓紧谈恋爱

 

我承诺
  • 年满十八岁
  • 单身
  • 抱着严肃态度
  • 寻找真诚的另一半
性别:
生日:
所在区域
婚姻状况
学历
喜欢的类型 妩媚的 可爱的 小鲜肉 老腊肉 都喜欢
自我介绍
 
  我同意注册条款和会员
  我是会员立即登录
  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>

 


原文链接:https://www.cnblogs.com/qiujie-prion/p/12964182.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML表单标签

下一篇:CSS基础选择器总结