当前位置： 首页 > news >正文

登录注册静态网页实现（HTML，CSS）

news 2026/2/9 12:53:15

实现效果图

实现效果

 使用HTML编写页面结构，CSS美化界面，点击注册，跳转到注册界面，均为静态网页，是课上的一个小作业~

使用正则表达式对输入进行验证，包括邮箱格式验证，用户名格式验证。

正则表达式

  • 字面值字符：例如字母、数字、空格等，可以直接匹配它们自身。

  • 特殊字符：例如点号 .、星号 *、加号 +、问号 ? 等，它们具有特殊的含义和功能。

  • 字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。

  • 元字符：例如 \d、\w、\s 等，用于匹配特定类型的字符，如数字、字母、空白字符等。

  • 量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。

  • 边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置。

以上为菜鸟教程给出的基本概念

我用到的正则表达式还是很简单的代码中用到了^[a-zA-Z0-9 -]{6,16}$表示输入格式要求长度为6到16的由大/小写字母、空格或者连字符-组成，其中^表示匹配开始标识，$为匹配结束标识。

代码实现

首先是登录界面index.html

<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link rel="stylesheet" href="css/login.css">
</head><body>
<form>
<div class="user">
<input type="text" name="name" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
</div>
<div class="footer">
<input type="submit" name="submit" value="登录" class="btn">
<input type="submit" name="submit" value="注册" class="btn" formaction="register.html">
</div>
</form>
</body>
</html>

登录界面样式文件login.css

body {background: url(../images/dog.jpg) no-repeat center center fixed;background-size: cover;padding-top: 40px;
}form {width: 343px;height: 200px;margin: 0 auto;border: 1px solid rgba(0, 0, 0, 1);border-radius: 5px;overflow: hidden;text-align: center;
}input {width: 300px;height: 30px;border-radius: 5px;border: 1px solid rgba(255, 255, 255, 0.5);margin-bottom: 10px;
}.user {padding-top: 40px;
}.footer input {width: 50px;height: 34px;
}.btn {border-radius: 4px;border-radius: 6px;
}input[type=submit] {cursor: pointer;
}input:focus {background-color: rgba(0, 0, 0, 0.2);overflow: hidden;
}.btn:hover {background: rgba(0, 0, 0, 0.2);
}

其次是register.html

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><link rel="stylesheet" href="./css/register.css">
</head><body><div><form action="#" class="contact_form" method="post"><ul><li class="usually"><h2>用户注册</h2></li><li class="usually"><label for="name">昵称：</label><!-- 用户名可以由大小写字母，0-9数字空格和连字符组成的长度为6-16的字符串 --><input type="text" name="name" id="name" autocomplete="off" requiredpattern="^[a-zA-Z0-9 -]{6,16}$"></li><li class="usually"><label for="mail">注册邮箱：</label><!-- 用户名可以由大小写字母，0-9数字空格和连字符组成的长度为6-16的字符串 --><input type="email" name="mail" id="mail" required></li><li class="usually"><label for="password">密码：</label><input type="password" name="password" id="password" autocomplete="off" required></li><li class="userselect"><label>性别：</label><input type="radio" id="male" name="gender" value="male" checked>男<input type="radio" id="female" name="gender" value="female">女</li><li class="usually"><label for="age">年龄：</label><input type="text" name="age" id="age" autocomplete="off" required pattern="^[0-9]{1,2}$"></li><li class="userselect"><label for="hobby">兴趣爱好：</label><input type="checkbox" name="swim" id="swim" checked>游泳<input type="checkbox" name="climb" id="climb">登山<input type="checkbox" name="run" id="run">跑步<input type="checkbox" name="walk" id="walk">散步</li><li class="usually"><label for="province">所在省份：</label><select name="province" id="province"><option value="liaoning">辽宁</option><option value="shandong">山东</option><option value="zhejiang">浙江</option></select></li><li class="usually"><label for="introduce">自我介绍：</label><textarea name="introduce" id="introduce" cols="30" rows="10"></textarea></li><li><input type="submit" name="submit" id="submit" value="立即注册"></li></ul></form></div>
</body></html>

注册界面的样式文件register.css

 

.contact_form {width: 50%;margin: 0 auto;
}.contact_form ul {width: 750px;list-style: none;margin: 0px;padding: 0px;
}.contact_form li {padding: 12px;border-bottom: 2px solid #eee;
}.contact_form li:first-child,
.contact_form li:last-child {border-bottom: 2px solid #777;
}.contact_form .usually label {width: 150px;display: inline-block;
}.contact_form .userselect label {width: 150px;display: inline-block;
}.contact_form .usually input {height: 20px;width: 220px;/* 上下5px 左右8px */padding: 5px 8px;
}*:focus {outline: none;
}.usually input,
.usually textarea {background: url(../images/bg.jpeg) no-repeat 98% center;box-shadow: 0 10px 15px #eee inset;border-radius: 2px;
}.contact_form textarea {padding: 8px;width: 300px;
}/* 获得焦点的时候背景色设置为白色  */
.usually input:focus,
.usually textarea:focus {background: #fff;
}input[type=submit] {margin-left: 156px;background-color: #68b12f;border: 1px solid #509111;border-radius: 3px;color: white;padding: 6px 10px;text-align: center;}input[type=submit]:hover {opacity: .85;cursor: pointer;
}.usually input:focus:invalid,
.usually textarea:focus:invalid {background-color: #d45252;box-shadow: 0 0 5px #d45252;
}.usually input:focus:valid,
.usually textarea:focus:valid {background-color: #5cd053;box-shadow: 0 0 5px #5cd053;
}

 总结

总体来说还是很简单的，有很多有趣的小样式。

 

相关文章：

登录注册静态网页实现（HTML，CSS）

实现效果图 实现效果 使用HTML编写页面结构&#xff0c;CSS美化界面&#xff0c;点击注册&#xff0c;跳转到注册界面&#xff0c;均为静态网页&#xff0c;是课上的一个小作业~ 使用正则表达式对输入进行验证&#xff0c;包括邮箱格式验证&#xff0c;用户名格式验证。 正则…...

编程日记 2024/10/12 17:20:29

基于FPGA的以太网设计（二）

一.以太网硬件架构概述 前文讲述了以太网的一些相关知识&#xff0c;本文将详细讲解以太网的硬件架构 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成&#xff0c;示意图如下所示&#xff1a; PHY&#xff1a;Physical Layer&#xff0c;即物理层。物理层定义了…...

编程日记 2024/10/12 17:19:27

OJ在线评测系统 后端微服务架构 注册中心 Nacos入门到启动

注册中心 服务架构中的注册中心是一个关键组件&#xff0c;用于管理和协助微服务之间的通信。注册中心的主要职责是服务的注册和发现&#xff0c;确保各个微服务能够相互找到并进行调用。 主要功能&#xff1a; 服务注册&#xff1a;微服务在启动时&#xff0c;将自身信息&am…...

编程日记 2024/10/12 17:18:26

升级到Ubuntu 24.04遇到的问题

升级过程中被别人关机重启到windows了&#xff0c;再启动到linux接着升级&#xff0c;还好能运行。但出现了些问题。 1.网络无法访问&#xff0c;发现是dns问题。最后在/etc/systemd/resov.conf文件中添加nameserver sudo nano /etc/systemd/resolv.conf cd /etc sudo ln -s …...

编程日记 2024/10/12 17:16:24

提示词格式化

利用jinja2&#xff0c;对提示词进行格式输出。以下是qwen2中tokenizer_config.json文件中的chat_template模块定义的提示词转换方式。 &#xff08;1&#xff09;查看qwen2的chat_template {"add_prefix_space": false,"added_tokens_decoder": {"…...

编程日记 2024/10/12 17:13:21

JAVA八股文1

1.Java 基础 1.1 语法基础 封装 利用抽象数据类型将数据和基于数据的操作封装在一起&#xff0c;使其构成一个不可分割的独立实体。数据被保护在抽象数据类型的内部&#xff0c;尽可能地隐藏内部的细节&#xff0c;只保留一些对外接口使之与外部发生联系。用户无需知道对象内…...

编程日记 2024/10/12 17:10:16

yum仓库安装rabbitmq

yum仓库安装rabbitmq 1、配置yum仓库 vim /etc/yum.repos.d/rabbitmq.repo # In /etc/yum.repos.d/rabbitmq.repo## ## Zero dependency Erlang ##[rabbitmq_erlang] namerabbitmq_erlang baseurlhttps://packagecloud.io/rabbitmq/erlang/el/7/$basearch repo_gpgcheck1 gpg…...

编程日记 2024/10/12 17:03:07

go语言中的函数详解

1. 引言 函数是编程中不可或缺的组成部分&#xff0c;无论是在Go语言还是其他编程语言中&#xff0c;函数都扮演着重要的角色。函数能够将一系列的操作封装在一起&#xff0c;使得代码更加模块化、可重用和易于维护。 在本文中&#xff0c;我们将详细介绍Go语言中函数的概念和…...

编程日记 2024/10/12 17:02:05

ubuntu18.04运行OpenPCDet出现的问题

一、概述 在编译成功OpenPCDet的源代码之后&#xff0c;发现在运行demo时候&#xff0c;依旧出现了很多问题&#xff0c;在此对出现的问题进行总结记录。 二、问题分析 &#xff08;一&#xff09;ModuleNotFoundError:No module named av2 如图所示 这个问题比较简单&#x…...

编程日记 2024/10/12 17:00:02

【C++】——继承（下）

【C】——继承&#xff08;下&#xff09; 5 继承与友元6 继承与静态成员7 多继承7.1 继承模型7.2 菱形继承的问题7.3 虚继承7.4 多继承中的指针偏移问题 8 组合与继承 5 继承与友元 友元关系不能被继承。即一个函数是父类的友元函数&#xff0c;但不是子类的友元函数。也就是说…...

编程日记 2024/10/12 16:59:00

Pandas处理时间序列之光谱分析与聚类

import matplotlib.pylab as plt %matplotlib inline import numpy as np from numpy import fft import pandas as pd 一、光谱分析 • 将时间序列分解为许多正弦或余弦函数的总和 • 这些函数的系数应该具有不相关的值 • 对正弦函数进行回归 光谱分析应用场景 基于光谱的…...

编程日记 2024/10/12 16:57:59

【WebGIS】Cesium：GeoJSON加载

GeoJSON 是一种常用的地理空间数据格式&#xff0c;它用于表示简单的地理要素及其属性&#xff0c;并且被广泛应用于 Web 地图和 GIS 系统中。在 Cesium 中&#xff0c;GeoJSON 文件可以很方便地加载到三维场景中展示&#xff0c;并且可以添加样式和事件处理。本文将为你提供详…...

编程日记 2024/10/12 16:56:58

PageHelper实现分页查询

前端发送的请求参数 后端返回的对象类型 Controller类实现 /*** 员工分页查询* param employeePageQueryDTO* return*/GetMapping("/page")ApiOperation("员工分页查询")public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO)…...

编程日记 2024/10/12 16:55:56

边缘检测评估方法：FOM、RMSE、PSNR和SSIM对比实验和理论研究

图像分割与边缘检测是密切相关的计算机视觉任务。以下图1展示了一个海岸线分割模型的输出示例: 图1: 分割掩码到边缘图的转换过程(数据集:LICS) 模型将每个像素分类为陆地或海洋(分割掩码)。随后,海岸线被定义为分类发生变化的像素位置(边缘图)。边缘检测可以通过提取图像分割…...

编程日记 2024/10/12 16:54:55

MySql 多表查询

多表查询&#xff1a;指从多张表中查询数据。 笛卡儿积&#xff1a;笛卡儿积是指在数学中&#xff0c;两个集合&#xff08;A集合 和 B集合&#xff09;的所有组合情况。 连接查询 内连接&#xff1a;相当于查询A、B交集部分数据外连接 左外连接&#xff1a;查询左表所有数据…...

编程日记 2024/10/12 16:52:51

数学建模算法与应用 第11章 偏最小二乘回归及其方法

目录 11.1 偏最小二乘回归概述 11.2 Matlab 偏最小二乘回归命令 Matlab代码示例&#xff1a;偏最小二乘回归 11.3 案例分析&#xff1a;化学反应中的偏最小二乘回归 Matlab代码示例&#xff1a;光谱数据的PLS回归 习题 11 总结 偏最小二乘回归&#xff08;Partial Least …...

编程日记 2024/10/12 16:50:49

【MATLAB代码】TDOA定位，4个基站、3个时间差、三维定位（可直接复制粘贴到MATLAB上运行）

文章目录 程序结构源代码运行结果代码结构输入输出解析该MATLAB代码实现了基于时间差定位（TDOA, Time Difference of Arrival）的方法，使用最小二乘法在三维空间中估计一个未知点的位置。该算法利用一个主锚点和三个副锚点的已知位置，通过计算信号传播时间差来推算出目标位置…...

编程日记 2024/10/12 16:49:47

uniapp引入ThorUI的方法

1、下载文件 2、复制相应的文件除了pages 3、往项目中复制即可 4、引入即可实现 5、添加easycome自动引入...

编程日记 2024/10/12 16:44:41

面试官：手写一个New

在JavaScript中&#xff0c;new操作符主要用于创建一个对象示例。通过new操作符&#xff0c;可以创建一个新的对象&#xff0c;并将这个对象的原型链只想一个构造函数的原型对象&#xff0c;然后执行构造函数中的代码初始化这个新对象。 常见的new的使用为 new Array() new Set…...

编程日记 2024/10/12 16:42:39

merlion的dashboard打开方法

安装好merlion包后&#xff0c;在anaconda prompt中进行如下图操作&#xff1a; 先进入创建好的虚拟环境&#xff1a;conda activate merlion再执行命令&#xff1a;python -m merlion.dashboard在浏览器中手动打开图中的地址&#xff1a; http://127.0.0.1:8050 打开后的界面…...

编程日记 2024/10/12 16:41:37

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46