• 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>
  • 相关阅读:
    队列
    栈的链式存储
    单例和多例设计模式
    顺序栈的基本操作
    串的模式匹配
    线性表的链式存储结构
    倒置顺序表
    回文序列
    go语言系列-从运算符到函数
    go语言系列-从零到数据类型
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/12964182.html
Copyright © 2020-2023  润新知