web前端开发HTML/css用户登录界面

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div align="center">
<div style="border:1px dashed #000;width:550px;height:350px;line-height:1.5;list-style-type:none;text-align:left;padding:50px;"><form>
<table><tr><td>我的邮箱:</td><td ><input type="text"/></td></tr><tr><td>创建密码:</td><td><input type="password"/></td></tr><tr><td>验证密码:</td><td><input type="password"/></td></tr><tr><td align="center">昵&nbsp&nbsp&nbsp称:</td><td><input type="text"/></td></tr> <tr><td align="center"><label for="position">所&nbsp在&nbsp地:</label></td><td><select style="type:square;"><option>海口市</option><option>三亚市</option><option>三沙市</option><option>儋州市</option><option>五指山市</option><option>琼海市</option><option>文昌市</option><option>万宁市</option><option>东方市</option><option>其他</option></select></td></tr>
</table><table><tr><td>性别:</td>
<td><input id="option1" type="radio"/ name="option"/></td>
<td><label for="man">男</label></td>
<td><input id="option2" type="radio"/ name="option"/><label for="woman">女</label></td>
<td><input id="option3" type="radio"/ name="option"/><label for="secret">保密</label></td>
</tr></table><table><tr>
<td>自我介绍:</td></tr></tr>
<td><textarea type="text" style="border:1px solid #000;width:500px;height:90px;display:-webkit-box;-webkit-line-clamp:10;font-size:32px;"/></textarea></td>
</tr></table><table><tr>
<td>兴趣爱好: </td><td><input id="sport" type="checkbox" name="hobby"/>
<label for="sport">运动</label></td>
<td><input id="read" type="checkbox" name="hobby"/></td>
<td><label for="read">读书</label></td>
<td><input id="shopping" type="checkbox" name="hobby"/></td>
<td><label for="shopping">逛街</label></td>
<td><input id="muise" type="checkbox" name="hobby"/></td>
<td><label for="muise">听音乐</label></td>
<td><input id="draw" type="checkbox" name="hobby"/></td>
<td><label for="draw">画画</label></td>
</tr></table><input type="image" name="用户登录" src="表格布局案例-学习强国/images/login.png" width="88" height="28"/>
<input type="button" value="注册"/><input type="reset" value="重置"/></form>
</div>
</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络常用归一化和正则化方法解析(一)

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

Win环境中安装Jenkins指南

目录 安装Java环境 下载并安装Jenkins Jenkins版本 启动Jenkins 如何删除Jenkins 安装Java环境 访问 Oracle官方网站 下载并安装JDK 安装完成后&#xff0c;设置系统环境变量 JAVA_HOME 到你的 JDK 安装路径&#xff0c;并将 %JAVA_HOME%\bin 添加到系统 PATH 中。 下载…

Apollo新版本Beta技术沙龙参会感受:未来的自动驾驶之旅

Apollo新版本Beta技术沙龙参会感受&#xff1a;未来的自动驾驶之旅 &#x1f697;&#x1f4a1; 文章目录 Apollo新版本Beta技术沙龙参会感受&#xff1a;未来的自动驾驶之旅 &#x1f697;&#x1f4a1;摘要引言正文&#x1f4cd; 参会流程介绍&#x1f31f; 参会收获&#x1…

「Verilog学习笔记」任意小数分频

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule div_M_N(input wire clk_in,input wire rst,output wire clk_out );parameter M_N 8d87; parameter c89 8d24; // 8/9时钟切换点parameter di…

封装时间轴组件 timeline

要求时间轴的点展示进度百分比&#xff0c;线也根据进度不同展示不同长度的颜色 实现效果&#xff1a; 使用的组件库是vant的circle 子组件&#xff1a; <template><div class"m-timeline-area" :style"width: ${width}px"><div class&qu…

聊聊 Jetpack Compose 的 “状态订阅自动刷新” -- 你真的了解重组吗?

Jekpack Compose “状态订阅&自动刷新” 系列&#xff1a; 【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - MutableState/mutableStateOf 】 【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - remember 和重组作用域 】 【 聊聊 Jetpack Compose 的 …

Spring Cloud 配置 Druid(二)

不废话&#xff0c;直接上代码&#xff0c; Nacos搭建的微服务&#xff0c;可以看Spring Cloud 配置 Nacos&#xff08;一&#xff09;-CSDN博客 一&#xff0c;pom文件 spring-cloud-starter-alibaba-nacos-discovery 和 spring-cloud-starter-openfeign 都是基于spring-cl…

Apollo新版本Beta技术沙龙的参会感受

Apollo新版本Beta技术沙龙的参会感受 Apollo新版本Beta技术沙龙的参会感受摘要 &#x1f697;&#x1f310;参会流程 &#x1f5d3;️展厅参观/展厅讲解 &#x1f3e2;进入百度Apollo未来驾驶汽车5G云代驾的神奇签到 &#x1f4dd;Apollo新版本Beta整体介绍 &#x1f680;技术分…

C语言:用递归的方法求斐波那契数列:1,1,2,3,5,8,……的前40个数

分析&#xff1a; 首先&#xff0c;在代码的起始部分&#xff0c;包含<stdio.h>头文件&#xff0c;这个头文件提供了输入和输出的函数。 然后&#xff0c;定义了四个变量&#xff1a;f、f1、f2和i。f1和f2是斐波那契数列的前两个数字&#xff0c;初始化为1。f是当前计…

qt使用wimlib-imagex,做windows系统备份还原

wimlib-imagex是个第三方工具&#xff0c;可对系统映像进行操作&#xff0c;下载地址&#xff1a; https://wimlib.net/downloads/index.html 程序主要用到以下这两个文件&#xff1a;libwim-15.dll和wimlib-imagex.exe wimlib-imagex.exe的调用命令参数&#xff0c;可以通过…

【Docker】资源配额及私有镜像仓库

资源配额及私有镜像仓库 一、Docker资源配额1.1、控制cpu1.1.1、cpu份额控制1.1.2、core核心控制1.1.3、配额控制参数的混合使用 1.2、控制内存1.3、控制IO1.4、资源释放 二、Docker私有镜像仓库Harbor2.1、Harbor简介2.2、为Harbor自签发证书【1】生成ca证书【2】生成域名的证…

输出完全二叉树中某个结点的双亲和所有子孙。假设完全二叉树的顺序存储在一维数组A[n]中。

思路&#xff1a; 首先定义两个函数&#xff0c;getParent函数用于获取指定结点的双亲结点的索引&#xff0c;printDescendants函数用于输出指定结点的所有子孙。然后在main函数中&#xff0c;创建表示完全二叉树的数组A&#xff0c;并针对指定结点索引进行相关操作&#xf…

HOST文件被挟持,无法上网,如何解决。

问题&#xff1a; 晚上开机&#xff0c;突然发现无法联网&#xff0c;提示网络异常 解决&#xff1a; 首先网络诊断&#xff0c;host文件被劫持&#xff0c;修复后&#xff0c;仍然不行。 然后测试手机热点&#xff0c;发现仍然无法联网 尝试用火绒修复&#xff0c;无果。 所有…

Python 解析JSON实现主机管理

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它以易于阅读和编写的文本形式表示数据。JSON 是一种独立于编程语言的数据格式&#xff0c;因此在不同的编程语言中都有对应的解析器和生成器。JSON 格式的设计目标是易于理解、…

【解决方案】环保设备用电与电网数据集中展示平台的应用与研究

摘 要&#xff1a;近年来&#xff0c;信息化不断推进&#xff0c;政府工作方式以及职能不断改革&#xff0c;许多省级环保部门开展环保与信息技术的融合&#xff0c;用于推进环保的发展。本文基于环境监测研究省级环保与电网数据集中展示平台的应用。环境监测是环保工作的重要组…

读书笔记-《数据结构与算法》-摘要1[数据结构]

文章目录 [数据结构]1. String - 字符串2. Linked List - 链表2.1 链表的基本操作2.1.1 反转链表单向链表双向链表 2.1.2 删除链表中的某个节点2.1.3 链表指针的鲁棒性2.1.4 快慢指针 3. Binary Tree - 二叉树3.1 树的遍历3.2 Binary Search Tree - 二叉查找树 4. Queue - 队列…

JSP入门+EL表达式+JSTL标签

1.JSP&#xff1a; 1.指令 2.注释 3.内置对象 2.MVC开发模式 3.EL表达式 4.JSTL标签 5.三层架构 ## JSP&#xff1a; 1.指令 *用于配置JSP页面&#xff0c;导入资源文件 *格式&#xff1a;<% 指令名称 属性名1属性值1 属性名2属性值2 .......%> *分类&#xff1…

格雷希尔帮助仪器仪表测试时快速密封的G60C系列接头其优势有哪些

仪器仪表在工业领域中扮演着重要的角色&#xff0c;如&#xff1a;压力表&#xff0c;压力传感器、压力变送器、压力开关、压力歧管等这些&#xff0c;在工业领域中都是随处可见的&#xff0c;其数据的精度直接影响着产品在生产过程中的质量和安全性&#xff1b;因此&#xff0…

食品行业研究:金枪鱼产业发展及市场消费分析

金枪鱼是无污染、高档、美味、安全、健康的绿色海洋动物食品&#xff0c;是国际营养协会推荐的世界三大营养鱼种之一 ,它凭借较高的经济价值、较广的分布范围、丰富的资源储量等优势&#xff0c;成为当今世界远洋渔业发展的关注重点和国际水产品贸易的主要鱼种。 金枪鱼类是高度…

3分钟,全方面了解透明oled拼接屏

透明OLED拼接屏是一种先进的显示技术&#xff0c;它具有透明度高、色彩鲜艳、轻薄柔韧、拼接灵活、功耗低、寿命长等特点。在商业、教育、展示、娱乐等领域&#xff0c;透明OLED拼接屏的应用越来越广泛。 在商业领域&#xff0c;透明OLED拼接屏可以作为商品展示柜&#xff0c;通…