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

在登录界面中设置登录框、多选项和按钮(HTML和CSS)

news 文章来源：https://blog.csdn.net/m0_64027617/article/details/132007102 2025/2/8 15:20:21

 

登录框（Input框）的样式：

/* 设置输入框的宽度和高度 */
input[type="text"], input[type="password"] {width: 200px;height: 30px;
}/* 设置输入框的边框样式、颜色和圆角 */
input[type="text"], input[type="password"] {border: 1px solid #ccc;border-radius: 5px;
}/* 设置输入框的内边距和外边距 */
input[type="text"], input[type="password"] {padding: 5px;margin-bottom: 10px;
}

这样设置后，登录框的宽度为200px，高度为30px，具有1px宽的边框，边框颜色为#ccc，圆角为5px，内边距为5px，下方留有10px的外边距。 

多选项的样式（如复选框和单选框）：

/* 设置复选框和单选框的外边距和内边距 */
input[type="checkbox"], input[type="radio"] {margin: 5px;padding: 5px;
}

这样设置后，复选框和单选框之间会有5px的外边距，同时复选框和单选框内部的内容与边框之间也会有5px的内边距。 

按钮的样式：

/* 设置按钮的背景颜色、文本颜色、边框样式和圆角 */
button {background-color: #4CAF50;color: white;border: none;border-radius: 5px;
}/* 添加按钮的内边距和外边距 */
button {padding: 10px 20px;margin-top: 10px;
}

这样设置后，按钮会有绿色背景色（#4CAF50），白色文本颜色，无边框，圆角为5px，内边距为10px（顶部和底部为10px，左侧和右侧为20px），同时顶部留有10px的外边距。

这些是基本的样式设置方法。可以根据实际需求和设计要求进一步调整和定制。另外，还可以应用CSS伪类（如:hover、:active等）来添加交互效果，以及应用CSS动画来增强用户体验。

需要注意的是，上述样式设置是通过选择器来选择元素并应用样式，需要将选择器和样式规则应用到HTML中相应的元素上，可以通过给元素添加class或ID属性来选择特定的元素，或者直接选择元素的类型（如input、button等）来设置通用样式。

登录界面的HTML代码:

<!DOCTYPE html>
<html>
<head><title>登录界面</title><style>/* CSS样式可以在<head>标签中的<style>标签内编写，或者作为外部CSS文件引入 *//* 在这里插入之前提到的CSS代码 */</style>
</head>
<body><h1>登录</h1><form><label for="username">用户名:</label><input type="text" id="username" name="username" required><label for="password">密码:</label><input type="password" id="password" name="password" required><label for="remember">记住我:</label><input type="checkbox" id="remember" name="remember"><button type="submit">登录</button></form>
</body>
</html>

在上面的代码中：

  • <h1> 标签用于显示标题 “登录”。
  • <form> 标签包含了登录界面的表单元素。
  • <label> 标签用于添加标签说明文本。
  • <input> 标签表示文本输入框和密码输入框。
  • <checkbox> 标签表示复选框，用于选择 “记住我”。
  • <button> 标签表示提交按钮。

请注意，上述代码中的CSS样式部分被忽略，您需要将之前提到的CSS代码插入到<style>标签中或通过外部CSS文件引入，以确保样式正确应用到登录界面中的元素上。

相关文章：

在登录界面中设置登录框、多选项和按钮(HTML和CSS)

登录框&#xff08;Input框&#xff09;的样式&#xff1a; /* 设置输入框的宽度和高度 */ input[type"text"], input[type"password"] {width: 200px;height: 30px; }/* 设置输入框的边框样式、颜色和圆角 */ input[type"text"], input[type&q…...

编程日记 2023/7/30 22:20:12

【语音识别】- 声学，词汇和语言模型

一、说明 语音识别是指计算机通过处理人类语言的音频信号&#xff0c;将其转换为可理解的文本形式的技术。也就是说&#xff0c;它可以将人类的口语语音转换为文本&#xff0c;以便计算机能够进一步处理和理解。它是自然语言处理技术的一部分&#xff0c;被广泛应用于语音识别助…...

编程日记 2023/7/30 22:19:12

【考研英语语法及长难句】小结

【 考场攻略汇总 】 考点汇总 考场攻略 #1 断开长难句只看谓语动词&#xff0c;不考虑非谓语动词先找从句&#xff0c;先看主句 考场攻略 #2 抓住谓语动词&#xff0c;抓住句子最核心的表述动作或内容通过定位谓语动词&#xff0c;找到复杂多变的主语通过谓语动词的数量&…...

编程日记 2023/7/30 22:18:09

C# 反射

反射的概念&#xff1a;C#通过类型&#xff08;Type&#xff09;来创建对象&#xff0c;调用对象中的方法&#xff0c;属性等信息&#xff1b;B超就是利用了反射原理将超声波打在人的肚子上&#xff0c;然后通过反射波进行体内器官的成员&#xff1b; 反射提供的类&#xff1a;…...

编程日记 2023/7/30 22:17:07

Pytorch(二)

一、分类任务 构建分类网络模型 必须继承nn.Module且在其构造函数中需调用nn.Module的构造函数无需写反向传播函数&#xff0c;nn.Module能够利用autograd自动实现反向传播Module中的可学习参数可以通过named_parameters()返回迭代器 from torch import nn import torch.nn.f…...

编程日记 2023/7/30 22:16:02

Python 使用http时间同步设置系统时间源码

Python方式实现使用http时间同步设置系统时间源码&#xff0c;系统环境是ubuntu 12.04、Python2.7版本。需要使用到time、os及httplib方法。 Python使用http时间同步设置系统时间&#xff0c;源码如下&#xff1a; #-*-coding:utf8 -*- import httplib as client import time…...

编程日记 2023/7/30 22:15:00

golang sync.singleflight 解决热点缓存穿透问题

在 go 的 sync 包中&#xff0c;有一个 singleflight 包&#xff0c;里面有一个 singleflight.go 文件&#xff0c;代码加注释&#xff0c;一共 200 行出头。内容包括以下几块儿&#xff1a; Group 结构体管理一组相关的函数调用工作,它包含一个互斥锁和一个 map,map 的 key 是…...

编程日记 2023/7/30 22:13:59

4、Linux驱动开发：设备-设备号设备号注册

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…...

编程日记 2023/7/30 22:12:58

C++（MFC）调用Python

环境&#xff1a; phyton版本&#xff1a;3.10 VS版本&#xff1a;VS2017 包含文件头&#xff1a;Python\Python310\include 包含库文件&#xff1a;Python\Python310\libs 程序运行期间&#xff0c;以下函数只需要调用一次即可&#xff0c;重复调用会导致崩溃 void Initial…...

编程日记 2023/7/30 22:11:54

深度学习实践——循环神经网络实践

系列实验 深度学习实践——卷积神经网络实践&#xff1a;裂缝识别 深度学习实践——循环神经网络实践 深度学习实践——模型部署优化实践 深度学习实践——模型推理优化练习 代码可见于&#xff1a; 深度学习实践——循环神经网络实践 0 概况1 架构实现1.1 RNN架构1.1.1 RNN架…...

编程日记 2023/7/30 22:10:52

docker简单web管理docker.io/uifd/ui-for-docker

要先pull这个镜像docker.io/uifd/ui-for-docker 这个软件默认只能使用9000端口&#xff0c;别的不行&#xff0c;因为作者在镜像制作时已加入这一层 刚下下来镜像可以通过docker history docker.io/uifd/ui-for-docker 查看到这个端口已被 设置 如果在没有设置br0网关时&…...

编程日记 2023/7/30 22:09:50

SpringBoot内嵌的Tomcat:

SpringBoot内嵌Tomcat源码&#xff1a; 1、调用启动类SpringbootdemoApplication中的SpringApplication.run()方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplicat…...

编程日记 2023/7/30 22:08:50

企业级docker应用注意事项

现在很多企业使用容器化技术部署应用&#xff0c;绕不开的docker技术&#xff0c;在生产环境docker常用操作总结。参考&#xff1a;https://juejin.cn/post/7259275893796651069 1. 尽可能使用官方镜像 在docker hub 官方 使用后面带有 DOCKER OFFICIAL IMAGE 标签的镜像&…...

编程日记 2023/7/30 22:07:49

腾讯云高性能计算集群CPU服务器处理器说明

腾讯云高性能计算集群以裸金属云服务器为节点&#xff0c;通过RDMA互联&#xff0c;提供了高带宽和极低延迟的网络服务&#xff0c;能满足大规模高性能计算、人工智能、大数据推荐等应用的并行计算需求&#xff0c;腾讯云服务器网分享腾讯云服务器高性能计算集群CPU处理器说明&…...

编程日记 2023/7/30 22:06:47

tinkerCAD案例：23.Tinkercad 中的自定义字体

tinkerCAD案例&#xff1a;23.Tinkercad 中的自定义字体 原文 Tinkercad Projects Tinkercad has a fun shape in the Shape Generators section that allows you to upload your own font in SVG format and use it in your designs. I’ve used it for a variety of desi…...

编程日记 2023/7/30 22:05:47

Box-Cox 变换

Box-cox 变化公式如下&#xff1a; y ( λ ) { y λ − 1 λ λ ≠ 0 l n ( y ) λ 0 y^{(\lambda)}\left\{ \begin{aligned} \frac{y^{\lambda} - 1}{\lambda} && \lambda \ne 0 \\ ln(y) && \lambda 0 \end{aligned} \right. y(λ)⎩ ⎨ ⎧​λyλ−1​ln…...

编程日记 2023/7/30 22:04:45

Linux wc命令用于统计文件的行数，字符数，字节数

Linux wc命令用于计算字数。 利用wc指令我们可以计算文件的Byte数、字数、或是列数&#xff0c;若不指定文件名称、或是所给予的文件名为"-"&#xff0c;则wc指令会从标准输入设备读取数据。 语法 wc [-clw][–help][–version][文件…] 参数&#xff1a; -c或–b…...

编程日记 2023/7/30 22:03:44

Python读取多个栅格文件并提取像元的各波段时间序列数据与变化值

本文介绍基于Python语言&#xff0c;读取文件夹下大量栅格遥感影像文件&#xff0c;并基于给定的一个像元&#xff0c;提取该像元对应的全部遥感影像文件中&#xff0c;指定多个波段的数值&#xff1b;修改其中不在给定范围内的异常值&#xff0c;并计算像元数值在每一景遥感影…...

编程日记 2023/7/30 22:02:42

Linux 之 wget curl

wget 命令 wget是非交互式的文件下载器&#xff0c;可以在命令行内下载网络文件 语法&#xff1a; wget [-b] url 选项&#xff1a; -b &#xff0c;可选&#xff0c;background 后台下载&#xff0c;会将日志写入到 当前工作目录的wget-log文件 参数 url &#xff1a; 下载链…...

编程日记 2023/7/30 22:01:41

AngularJS 和 React区别

目录 1. 背景&#xff1a;2. 版本&#xff1a;3. 应用场景&#xff1a;4. 语法&#xff1a;5. 优缺点&#xff1a;6. 代码示例&#xff1a; AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点&#xff0c;例如都是基于 JavaScript 的开源框架&#xff0c…...

编程日记 2023/7/30 22:00:39

【Solr】Solr搜索引擎使用

文章目录 一、什么是Solr?二 、数据库本身就支持搜索啊,干嘛还要搞个什么solr?三、如果我们想要使用solr那么首先我们得安装它 一、什么是Solr? 其实我们大多数人都使用过Solr,也许你不会相信我说的这句话,但是事实却是如此啊 ! 每当你想买自己喜欢的东东时,你可能会打开某…...

编程日记 2023/7/30 21:59:38

一起学算法（选择排序篇）

距离上次更新已经很久了&#xff0c;以前都是非常认真的写笔记进行知识分享&#xff0c;但是带来的情况并不是很好&#xff0c;一度认为发博客是没有意义的&#xff0c;但是这几天想了很多&#xff0c;已经失去了当时写博客的初心了&#xff0c;但是我觉得应该做点有意义的事&a…...

编程日记 2023/7/30 21:58:35

智能体的主观和能动

摘要 智能体的主动性是提升智能机器的能力的关键。围绕智能体的主动性存在很多思想迷雾&#xff0c;本文继续我们以前的工作&#xff0c;试图清理这些概念上的问题。我们的讨论显示&#xff1a;要研究主动性&#xff0c;并不一定需要研究意识&#xff0c;仅需要研究主观和能动就…...

编程日记 2023/7/30 21:57:33

AB 压力测试

服务器配置 阿里云Ubuntu 64位 CPU1 核 内存2 GB 公网带宽1 Mbps ab -c100 -n1000 http://127.0.0.1:9501/ -n&#xff1a;在测试会话中所执行的请求个数。默认时&#xff0c;仅执行一个请求。 -c&#xff1a;一次产生的请求个数。默认是一次一个。 ab -c 100 -n 200 ht…...

编程日记 2023/7/30 21:56:30

多旋翼物流无人机节能轨迹规划（Python代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f308;3 Python代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 多旋翼物流无人机的节能轨迹规划是一项重要的技术&#xff0c;可以有效减少无人机的能量消耗&#xff0c;延长飞行时间&#xff0c;提高物流效率…...

编程日记 2023/7/30 21:55:28

Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 （保存原有存储目录结构）

1、在项目根目录创建uploadToCOS.js文件 &#xff08;建议起简单的名字 方便以后上传输入命令方便&#xff09; 2、uploadToCOS.js文件代码编写 const path require(path); const fs require(fs); const COS require(cos-nodejs-sdk-v5);// 配置腾讯云COS参数 const cos n…...

编程日记 2023/7/30 21:54:26

Linux 新硬盘分区，挂载

在Linux系统中&#xff0c;当你插入新的硬盘时&#xff0c;你需要进行一些步骤来使系统识别并使用它。以下是一些常见的步骤&#xff1a; 确保硬盘已正确连接到计算机。检查硬盘的电源和数据线是否牢固连接。 打开终端或命令行界面。 运行以下命令来扫描新硬盘&#xff1a; s…...

编程日记 2023/7/30 21:53:24

Stable Diffusion 开源模型 SDXL 1.0 发布

关于 SDXL 模型&#xff0c;之前写过两篇&#xff1a; Stable Diffusion即将发布全新版本Stable Diffusion XL 带来哪些新东西&#xff1f; 一晃四个月的时间过去了&#xff0c;Stability AI 团队终于发布了 SDXL 1.0。当然在这中间发布过几个中间版本&#xff0c;分别是 SDXL …...

编程日记 2023/7/30 21:52:24

NoSQL--------- Redis配置与优化

目录 一、关系型数据库与非关系型数据库 1.1关系型数据库 1.2非关系型数据库Nosql 1.3关系与非关系区别 1.4非关系产生的背景 1.5总结 二、Redis介绍 2.1Redis简介 2.3Redis优点 2.4 Redis为什么这么快&#xff1f; 三、Redis安装部署 3.1安装redis 3.2测试redis 3.3r…...

编程日记 2023/7/30 21:51:22

Ubuntu中关闭防火墙

在Ubuntu中关闭防火墙可以通过以下步骤进行&#xff1a; 查看防火墙状态&#xff1a; sudo ufw status如果防火墙状态为active&#xff08;活动状态&#xff09;&#xff0c;则执行以下命令来停用防火墙&#xff1a; sudo ufw disable输入以下命令确认是否停用防火墙&#x…...

编程日记 2023/7/30 21:50:21

汕头网站建设网站建设/会计培训班要多少钱一般要学多久

常用的两种解决方案&#xff1a; 第一&#xff1a;使用IE滤镜解决 关键代码&#xff1a; css代码 _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(srccss/images/png24.png,sizingMethodcrop); 有几点注意点&#xff1a; 1&#xff1a;这里对…...

编程日记 2025/2/8 15:04:56

wordpress4.7/推广普通话手抄报内容50字

前言&#xff1a;最近对公司的APP进行一些控件的升级&#xff08;很久以前就想动&#xff0c;我已经忍了很久了&#xff09;&#xff0c;记录一下ActionBar 转 ToolBar 期间遇到的大大小小的坑&#xff0c;顺便做个笔记。一、先说一开始的使用1.在xml布局文件的头部添加Toolbar…...

编程日记 2025/2/8 14:16:51

做门户网站起什么域名好/网站seo优化工具

本文研究全球与中国市场包装用铝盖的发展现状及未来发展趋势&#xff0c;分别从生产和消费的角度分析包装用铝盖的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产…...

编程日记 2025/2/8 13:43:15

贵阳网站建设培训班/深圳做网站的公司有哪些

点击上方蓝色字体&#xff0c;选择“标星公众号”优质文章&#xff0c;第一时间送达上一篇&#xff1a;这300G的Java资料是我师傅当年给我的&#xff0c;免费分享给大家下一篇&#xff1a;这200G的Java实战资料是我师傅当年教我的第二招作者&#xff1a;fuzhongmin05http://tin…...

编程日记 2025/2/8 9:15:58

在哪里可以学做网站/100个电商平台

Matplotlib ——&#xff08;分解&#xff09; Matrix Plot Library 矩阵　绘图　　库 一个极其强大的Python绘图库。官网&#xff1a;matplotlib.org 很少的代码即可绘制2D/3D&#xff0c;静态/动态等各种图形 一般常用的是它的子包&#xff1a;PyPlot&#xff0c;提…...

编程日记 2025/2/8 7:52:13

杭州住房和城乡建设局网站/爱站长尾关键词挖掘工具

企业信息化除了&#xff25;&#xff32;&#xff30;外&#xff0c;还需要什么&#xff1f; 如果ERP仅仅局限于局域网内应用&#xff0c;当然就不存在其他的问题。然而&#xff0c;当企业需要实时能够了解各地分支机构的经营状况&#xff1b;出差人员需要随时随地访问办公系统…...

编程日记 2025/2/7 19:40:49