css之世纪佳缘

最新推荐文章于 2023-04-13 20:30:07 发布
最新推荐文章于 2023-04-13 20:30:07 发布
阅读量81 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61686869/article/details/121006896
版权

<!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>Document</title>

    <style>

        .pink {

            color: pink;

        }

    </style>

</head>

<body>

    <table width="800" align="center" cellspacing="20" >

        <div> </div>

        <h2 align="center" class="pink">青春不常在，抓紧谈恋爱</h2>

        <tr >

            <td align="right" width="150" >

                性别 ：

            </td>

            <td>

                <input type="radio" / >男<img src="images(2)/man.jpg"> <a href="#"></a> <input type="radio" />女 <img src="images(2)/women.jpg"><a href="#">

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                出生日期：

            </td>

            <td>

                <a class="btn-select" id="btn_select">

                    <select>

                        <option>--选择出生日期--</option>

                        <option>2000</option>

                        <option>2001</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>

                        <option>7</option>

                        <option>8</option>

                        <option>9</option>

                        <option>10</option>

                        <option>11</option>

                        <option>12</option>

                       

                    </select>

                    <select>

                        <option>--选择出生日期--</option>

                        <option>1</option>

                        <option>2</option>

                        <option>3</option>

                        <option>4</option>

                        <option>5</option>

                        <option>6</option>

                        <option>7</option>

                        <option>8</option>

                        <option>9</option>

                        <option>10</option>

                        <option>11</option>

                        <option>12</option>

                        <option>13</option>

                        <option>14</option>

                        <option>15</option>

                        <option>16</option>

                        <option>17</option>

                        <option>18</option>

                        <option>19</option>

                        <option>20</option>

                        <option>21</option>

                        <option>22</option>

                        <option>23</option>

                        <option>24</option>

                        <option>25</option>

                        <option>26</option>

                        <option>27</option>

                        <option>28</option>

                        <option>29</option>

                        <option>30</option>

                        <option>31</option>

                    </select>

                </a>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                所在地区：

            </td>

            <td>

                <input type="text" name="password" autocomplete="off" value="" placeholder="北京思密达"><br>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                婚姻状况 :

            </td>

            <td>

                <input type="radio" />已婚<a href="#"></a> <input type="radio" />未婚 <a href="#"></a> <input

                    type="radio" />离婚 <a href="#"></a>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                学历 ：

            </td>

            <td>

                <input type="text" name="password" value="" placeholder="学历"><br>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                月薪：

            </td>

            <td>

                <input type="text" name="password" value="" placeholder="月收入"><br>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                手机号码：

            </td>

            <td>

                <input type="text" name="password" value="" placeholder="联系方式"><br>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                昵称：

            </td>

            <td>

                <input type="text" name="password" value="" placeholder="昵称"><br>

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                类型 ：

            </td>

            <td>

                <input type="checkbox" />可爱的 <input type="checkbox" />御姐 <input type="checkbox" /> 清纯 <input

                    type="checkbox" />都喜欢

            </td>

        </tr>

        <tr>

            <td align="right" width="100">

                自我介绍：

            </td>


 

            <td>

                <textarea rows="8" style="width:200px;padding-top:1px;font-size:3px;"></textarea>

            </td>

        </tr>

        <tr>

            <td>  </td>

                <td  align="left" >

                    <img src="../CSS/images(2)/btn.png">

                </td>

        </tr>

        <tr align="left">

            <td>  </td>

            <td>

                <input type="checkbox" />我同意注册和会员标准<br>

            </td>

        </tr>

        <tr align="left">

            <td>  </td>

            <td>

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

            </td>

        </tr>

        <tr>

            <td>  </td>

            <td>

                <h3>

                    我承诺

                </h3>

            </td>

        </tr>

        <tr>

            <td>  </td>

            <td align="left" width="100" >

                <li >年满18，单身</li>

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

                <li>寻找另一半</li>

            </td>

        </tr>








 

</body>

</html>

第六赤子心
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html_5_小作业2_世纪佳缘注册页面
dc12499574的博客
04-13 834
文章目录要求效果代码 要求 效果 源码： 链接：https://pan.baidu.com/s/1Cnf2koBFo4I4CCW4RTQ_4A 提取码：ouzc 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
青春不常在，抓紧谈恋爱
m0_61687098的博客
10-27 710
<!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&g...
作业作业作业
yst12138的博客
10-21 87
<style> .pink { color: pink; } </style> </head> <body> <table width="800" align="center" cellspacing="20" > <div> </div> <h2 align="center" cla...
PC端网页布局——世纪佳缘（四）注册登录
tingyu_的博客
08-02 6770
效果如下： 页面解析：在这个注册框中呢，可以分为三个部分 1.标题 2.输入框 3.注册/登录 重点自然是在注册框了， 在注册框中，我们可以看到， 1.每一行的左边的文字是靠右侧的 2.两次用到单选框，其中在婚姻状况里，有默认选项 3.生日和所在地区是两个不同类型的输入框 大家可能会遇到的一些问题： 1、背景图偏移，由于背景图较大，所以会出现X轴和Y轴的滚动条，当在body中添加溢...
PC端网页布局——世纪佳缘（二）页面初搭建
tingyu_的博客
07-27 881
咱们首先来搭建一下整体的大结构： 效果如下： 每一块呢，都是使用div块做的，并不难理解 除了头部之外，每一块都是外面一个大的div,里面再包一个小的div，也就是所谓的通栏和版心（由于个人问题，版心设置了两个宽度的，大家可以根据个人需求来设计） HTML代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
仿世纪佳缘交友网
02-04
7. **匹配算法**：仿世纪佳缘交友网的核心功能之一是根据用户填写的资料进行匹配，这需要一种有效的匹配算法，如基于相似度计算的协同过滤或者基于用户行为的推荐系统。 8. **性能优化**：对于高并发的用户访问，...
love 仿世纪佳缘网
05-19
【爱情之桥：仿世纪佳缘网】 在互联网飞速发展的今天，线上交友与婚恋平台已经成为许多年轻人寻找伴侣的重要途径。"Love 仿世纪佳缘网"项目就是一个致力于模仿知名婚恋网站——世纪佳缘的网络平台。这个项目的核心...
仿世纪佳缘整站 源码
12-02
1. **前端技术**：在仿制世纪佳缘网站时，前端可能采用了HTML5、CSS3和JavaScript，其中可能还涉及jQuery、Vue.js、React或Angular等前端框架，用于实现动态交互和响应式布局，以适应不同设备的浏览。 2. **后端...
uchome完全仿世纪佳缘最新版
05-06
【uchome完全仿世纪佳缘最新版】是一个基于UChome社区系统开发的社区网站模板，旨在提供与知名婚恋交友网站世纪佳缘相似的用户体验和功能。UChome是一款开源的社区建站软件，它提供了丰富的社交功能，让用户可以轻松...
仿世纪佳缘源码仿世纪佳缘模板Php+Mysql交友网站源码程序.rar
07-23
根据【压缩包子文件的文件名称列表】只有一个“仿世纪佳缘”，我们可以推测压缩包内可能包含了一系列与世纪佳缘网站相关的源代码文件、样式表（CSS）、图像资源（如图标、背景图片等）、数据库配置文件以及可能的...
仿世纪佳缘交友网提供免费模板
12-31
仿世纪佳缘交友网提供免费模板.
一个用户登录界面html
03-05
一个用户登录界面html
eform自定义表单
01-19
北京方程软件开发的开源工作流，eform自定义表单，大大方便了程序员开发工程中，表单设计的繁琐。
青春不常在，抓紧谈恋爱 HTML案例
最新发布
m0_62452636的博客
04-13 1157
分析：除标题以外部分是一个两列的表格，一行两个,共分为11行。
前端基础-html-02
L的博客
11-04 568
前端HTML中的表格、列表、表单知识，附有综合项目源码
前端html静态网页——世纪佳缘
freakish
07-16 3577
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;世纪佳缘交友网站&lt;/title&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body&gt; &lt;form action="http://www.qfedu.com
世纪佳缘网前端设计
qq_57110139的博客
10-28 201
<!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>Do.
2022.05.25 HTML第7天学习
qq_41658558的博客
05-25 462
1.综合案例练习： <body> <from action="xxx.php" method="get"> <h4>青春不常在，抓紧谈恋爱</h4> <table width="500"> <tr> <td>性别：</td> <td><input type="radio" id="n.
html-综合案例之注册页面
m0_53163148的博客
09-17 784
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值