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

清楚不常在，抓紧谈恋爱

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

性别： 男 女
生日： --请选择年--
2019
2020
2021

--请选择月--
1
2
3

--请选择日--
1
2
3

所在区域
婚姻状况 未婚 已婚 离婚
学历
喜欢的类型 妩媚的 可爱的 小鲜肉 老腊肉 都喜欢
自我介绍 个人简介
 
  我同意注册条款和会员
  我是会员立即登录 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

 </head>

 <body>

     <h4>清楚不常在，抓紧谈恋爱</h4>

     <table>

         <!-- 第一行 -->

         <tr>

             <td>性别：</td><br />

             <td><input type="radio" id="nan" name="sex"> <label for="nan">男</label>

                 <input type="radio"  id="nv" name="sex"> <label for="nv">女</label>

             </td><br>

         </tr>

         <!-- 第二行 -->

         <tr>

             <td>

                 生日：

             </td>

             <td>

                 <select>

                     <option checked="checked">--请选择年--</option>

                     <option>2019</option>

                     <option>2020</option>

                     <option>2021</option>

                 </select>

                 <select>

                     <option checked="checked">--请选择月--</option>

                     <option>1</option>

                     <option>2</option>

                     <option>3</option>

                 </select>

                 <select>

                     <option checked="checked">--请选择日--</option>

                     <option>1</option>

                     <option>2</option>

                     <option>3</option>

                 </select>

             </td>

         </tr>

         <!-- 第三行 -->

         <tr>

             <td>所在区域</td>

             <td>

                 <input type="text" value="北京思密达">

             </td>

         </tr>

         <!-- 第四行 -->

         <tr>

             <td>婚姻状况</td>

             <td>

                 <input type="radio" id="weihun" name="hunyin"><label for="weihun">未婚</label>

                 <input type="radio" name="hunyin"> <label>已婚</label>

                 <input type="radio" name="hunyin" checked="checked"> <label>离婚</label>

             </td>

         </tr>

         <!-- 学历 -->

         <tr>

             <td>学历</td>

             <td><input type="text" value="博士后"></td>

         </tr>

         <!-- 喜欢的类型 -->

         <tr>

             <td>喜欢的类型</td>

             <td>

                 <input type="checkbox" name="xingge">妩媚的

                 <input type="checkbox" name="xingge">可爱的

                 <input type="checkbox" name="xingge">小鲜肉

                 <input type="checkbox" name="xingge">老腊肉

                 <input type="checkbox" name="xingge">都喜欢

             </td>

         </tr>

         <!-- 自我介绍 -->

         <tr>

             <td>自我介绍</td>

             <td><textarea>个人简介</textarea></td>

         </tr>

         <!-- 免费注册 -->

         <tr>

             <td></td>

             <td><input type="submit" value="免费注册"></td>

         </tr>

         <!-- checkbox -->

         <tr>

             <td>

             <td><input type="checkbox">我同意注册条款和会员</td>

         </tr>

         <tr>

             <td></td>

             <td><a href="#">我是会员立即登录</a></td>

         </tr>

             <td></td>

             <td>

                 <h5>我承诺</h5>

                 <ul>

                     <li>年满十八岁</li>

                     <li>单身</li>

                     <li>抱着严肃态度</li>

                     <li>寻找真诚的另一半</li>

                 </ul>

             </td>

         </tr>

     </table>

 </body>

 </html>

HTML开发实例-简单相亲网站开发（主体为table）的更多相关文章

  1. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  2. MVC5 网站开发实践 2、后台管理

    目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...

  3. MVC5 网站开发实践 概述

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理 MVC5 网站开发实践  2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...

  4. PHP-购物网站开发设计（一）

    2015-07-6 开始使用PHP完成简单购物网站的设计,首先要选择合适的软件平台,所以今天先记录平台的选择与搭建: 我选择使用Apache24 + PHP 5.6 + MySQL 开发环境完成PHP ...

  5. MVC5 网站开发实践 2.2、管理员身份验证

    上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践  ...

  6. MVC5 网站开发实践 2.1、管理员登陆

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理   1. 创建SHA256加密方法. 在Data项目中添加文件夹[Security ...

  7. Spring_IoC注解开发和AOP的XML开发(学习笔记2）

    一:IoC注解开发 1,在applicationContext.xml中需要引入context约束 <beans xmlns="http://www.springframework.o ...

  8. （Hibernate进阶）Hibernate搭建开发环境+简单实例（二）

    hibernate是非常典型的持久层框架,持久化的思想是非常值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hibernate,不深究Hibernate的思想和原理,否则,一味追求,苦学思想和 ...

  9. WCF揭秘（一）——简单的WCF开发实例

    一.WCF是什么 WCF是微软为了实现各个开发平台之间的无疑缝连接而开发一种崭新工具,它是为分布式处理而开发.WCF将DCOM.Remoting.Web Service.WSE.MSMQ.AJAX服务 ...

随机推荐

  1. JavaScript实现选择排序

    一.选择排序简介 **冒泡排序.插入排序.选择排序合称为简单排序.**下面是选择排序的思想: 假设有一个数组a,我们想象成有一个班级名叫a班,现在全班随意排成一排,排头的位置是a[0],排尾的位置是a ...

  2. CodeForces - 262C 贪心

    Maxim always goes to the supermarket on Sundays. Today the supermarket has a special offer of discou ...

  3. muduo网络库源码学习————日志滚动

    muduo库里面的实现日志滚动有两种条件,一种是日志文件大小达到预设值,另一种是时间到达超过当天.滚动日志类的文件是LogFile.cc ,LogFile.h 代码如下: LogFile.cc #in ...

  4. 将A页面提交的数据id传递到B页面

    A页面 在A页面跳转到B页面的时候,在url后面可以拼接参数 例如: window.location.href = './B.html?' + id; 跳转到B页面之后,可以通过url地址获取到从A页 ...

  5. UTC 时间转化为北京时间

    // UTC 时间转化为北京时间 function utc2beijing(utcTime) { var T_pos = utcTime.indexOf('T'); var Z_pos = utcTi ...

  6. xml出现Exception in thread "main" java.lang.NullPointerException

    运行代码出现Exception in thread "main" java.lang.NullPointerException 可以看下这个链接:https://ask.csdn. ...

  7. Minimum Euler Cycle(找规律+模拟)

    \(给你一个nnn个结点的完全有向图,求其字典序最小的欧拉回路,输出lll到rrr之间的结点为多少.\) 模拟一下n=5的时候 开始肯定是1-2-1-3-1-4-1-5 注意这个时候不能再从5到1,否 ...

  8. E. Marbles 状压dp

    E. Marbles 这个是一个状压dp 题目大意是:给你一个数组,数组的数在1到20之间,有一个操作就是交换相邻的两个数,问 让所有相同的数相邻的最小操作次数 dp[s] 表示s状态下的操作次数,w ...

  9. 设计模式（Java语言）- 建造者模式

    前言 在日常的生活中,我们可以经常看到建造者模式的影子.比如,建造房子,那么房子就是一个产品,房子由门,窗,墙,地板等部门组成.然后包工头在建造房子的时候就根据设计好的图纸来建造,但是包工头并不是亲自 ...

  10. 微信小程序-swiper（轮播图）抖动问题

    ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...