html综合案例-注册页面-pink老师

最新推荐文章于 2023-07-12 16:07:21 发布
最新推荐文章于 2023-07-12 16:07:21 发布
阅读量516 收藏 2
点赞数 2
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46768608/article/details/119110255
版权

@综合案例——注册页面——pink老师

<!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>
</head>

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table cellspacing="20">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan"><label for="nan"><img src="images/man.jpg" alt="">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="images/women.jpg" alt="">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td><select>
                    <option value="">--请选择年--</option>
                    <option value="">1997</option>
                    <option value="">1998</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                </select>
                <select>
                    <option value="">--请选择月--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select>
                    <option value="">--请选择日--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" id="weihun" name="marry" checked="checked"><label for="weihun">未婚</label>
                <input type="radio" id="yihun" name="marry"><label for="yihun">已婚</label>
                <input type="radio" id="lihun" name="marry"><label for="lihun">离婚</label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="幼儿园"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" id="wumei"><label for="wumei">妩媚的</label>
                <input type="checkbox" id="cute"><label for="cute">可爱的</label>
                <input type="checkbox" id="new"><label for="new">小鲜肉</label>
                <input type="checkbox" id="old"><label for="old">老腊肉</label>
                <input type="checkbox" id="all"><label for="all">都喜欢</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea cols="50" rows="5">自我介绍</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员，立即注册</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>
                        年满18岁、单身
                    </li>

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

                    <li>
                        真诚寻找另一半
                    </li>
                </ul>
            </td>
        </tr>
    </table>

</body>

</html>

在这里插入图片描述

Chris_Pual_3
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小兔鲜（五个页面包含：登录，购物车等）
10-19
HTML期末大作业需要，做一个五个网页的网站，我就把之前在看黑马程序员的前端视频的时候写的小兔鲜儿网站改进了一下加了一点东西，然后增加了几个页面。
Pink老师JS学习--京东登录页面案例
YuKing_HONG的博客
03-19 983
感谢pink老师的课程。 这是我自己写的样式，比较丑。 这个案例是主要是练习巩固操作元素，实现了密码隐藏显示的功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont..
注册页面 黑马pink老师综合练习html
yujianhxy的博客
07-12 56
pink老师 注册页面。
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（HTML）
m0_51448653的博客
09-27 1954
一、基础班学习路线 二、HTML5基础 1.网页的相关概念 什么是网页 网站是网页的集合 网页是网站中的一页，通常是HTML格式的文件，网页是构成网站的基本元素，常见以**.htm或.html**后缀结尾的文件 什么是HTML HTML指的是超文本标记语言，它是用来描述网页的语言 HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。 2. ...
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5753
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
品优购实战案例-pink老师版
最新发布
01-02
【品优购实战案例-pink老师版】 在“品优购实战案例-pink老师版”中，我们聚焦于一个电商网站的开发与运营，这个实战案例由pink老师提供，旨在帮助学习者掌握IT行业中电子商务平台的建设和管理技能。在这个项目中，...
pink老师html＋css综合案例个人练习
03-13
在“pink老师html+css综合案例个人练习”中，我们可以看到一个关于HTML和CSS技术应用的实际项目。这个练习可能是为了帮助学习者巩固和提升他们在HTML结构化标记语言和CSS样式表语言方面的技能。日期标注为“2023.3....
黑马程序员Pink老师-HTML笔记
09-13
主要是为了自己复习，更希望能给每一个热爱前端的人帮助。
【项目】pink老师-PC端静态页面项目实战-品优购.7z
01-13
在本项目"pink老师-PC端静态页面项目实战-品优购"中，作者通过实践应用CSS和HTML技术，构建了一个模拟的电商网站静态页面。这个项目旨在提升前端开发技能，特别是对于初学者来说，是一个很好的实践平台。下面将详细...
HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现
weixin_45328723的博客
04-23 1384
pink老师课后作业——小米logo过渡切换实现 基本思路 精灵图技术+伪类元素+过渡 准备一个div盒子设置放置图标的宽高。 当鼠标经过的时候，通过伪类，精灵图切换为另一张图片 PS:图片是自己使用ps切出来的 代码部分 HTML： <body> <div class="xmlg"> </div> </body> CSS: <style> .xmlg { width: 207px;
HTML简单练习案例
sokoooo的博客
02-17 5921
HTML简单练习案例 目录 HTML简单练习案例 1. 圣诞节 2. 注册表单 3. 小说排行榜 #END（素材源于b站pink老师分享） 1. 圣诞节 1.1 代码： <body> <h1>圣诞节的那些事</h1> 1.圣诞是怎样由来的 <br> 2.<a href="#oldman">圣诞老人的由来</a> <br> 3.<a href="#tree"..
前端之登录注册页面案例
热门推荐
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
综合案例-页面注册
m0_55879104的博客
04-25 187
<title>世纪佳缘-你在我也在</title> <style> tr { height: 30px; } </style> </head> <body> <!-- cellspacing：设置单元格与单元格边框之间的空白间隙 cellpadding：设置单元格内容与单元格边框之间的空白间隙 --> <ta.
html之b站pink老师注册页面案例
qq_45615178的博客
04-22 279
看完了html部分，根据课程案例图片敲了敲代码 最后效果如下： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>青春不常在，抓紧谈恋爱</h3> <table> <tr> <td>
简单案例
xyw_jzj5201314的博客
11-11 490
简单综合案例 demo1 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
html_5_小作业2_世纪佳缘注册页面
dc12499574的博客
04-13 836
文章目录要求效果代码 要求 效果 源码： 链接：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
仿世纪佳缘登录注册页面
rookie_0_0的博客
07-12 1190
前两天一位好朋友说让我去学一下前端的响应式布局，咱也不会啊，这不，安排上~ 原世纪佳缘样例 一、结构分析 原图： 二、代码实现 1、第一步，div布局 这里面要弄清楚div的结构布局，还有起别名的方式，全局样式设置，中心位置margin：0 auto等css相关样式，子绝父相问题。。。。。。 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
实训篇-Html-表单练习
gy77
01-07 407
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Regist</title> </head> <body> <h3 align="center">注册页面</h3> <...
js pink老师ajax案例
05-27
很抱歉，我并不清楚“js pink老师”是谁。但是，我可以给你提供一个基于 Ajax 的案例。 假设你有一个网页，需要通过 Ajax 从服务器获取数据并在网页上展示。以下是一个基本的示例代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>Ajax 示例</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h1>获取服务器数据</h1> <div id="data-container"></div> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: 'server-data.json', method: 'GET', dataType: 'json', success: function(response){ $('#data-container').html(JSON.stringify(response)); }, error: function(xhr, status, error){ console.log('获取服务器数据失败：' + error); } }); }); </script> </body> </html> ``` 上面的代码使用了 jQuery 库来实现 Ajax 请求。其中： - `url`：请求的 URL，这里是 `server-data.json`，实际应该是服务器端提供的接口； - `method`：请求的 HTTP 方法，这里是 GET； - `dataType`：服务器返回的数据类型，这里是 JSON； - `success`：请求成功后的回调函数，用于处理服务器返回的数据； - `error`：请求失败后的回调函数，用于处理错误信息。 以上代码的作用是在页面上展示从服务器获取的数据，数据格式为 JSON。你可以根据实际需要修改代码，例如： - 修改 `url` 和 `method` 参数，以符合你的实际需求； - 修改 `success` 回调函数，以展示你需要的数据； - 修改 `error` 回调函数，以处理请求失败的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值