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

【css】背景换颜色

更换前

longin.html 

 

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>login</title><link href="/css/style.css"  type="text/css" rel="stylesheet"><script src="/static/js/change.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">登录</div></div><div class="content"><div style="display: block;"><form action="/user/login" method="post"><p>账号</p><input type="text" placeholder="请输入用户名" name="username"/><p>密码</p><input type="password" placeholder="请输入密码"  name="password"/><br/><input type="submit" value="登录"/></form><p>没有账号,<a href="/user/register" target="top">去注册</a></p></div></div>
</div>
</body>
</html>

 

style.css

*{margin: 0;padding: 0;
}
body{background: #f3f3f3;
}
.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;
}
.item{width: 340px;height: 60px;background: #eeeeee;
}
.item div{width: 340px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;
}
.content{width: 100%;
}
.content div{margin: 20px 30px;display: none;text-align: left;
}
p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;
}
.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: cyan;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;
}
.active{background: white;
}
.item div:hover{background: #f6f6f6;
}

 如果我们要更改登录框后面的背景颜色

#65cea7

更换后

 

字体颜色代码:

                              

白色#FFFFFF 红色#FF0000    绿色#00FF00 蓝色#0000F  青色#00FFFF    
黄色#FFFF00      黑色#000000棕色#A67D3D金色#CD7F32灰色#C0C0C0
青黄色#93DB70牡丹红#FF00FF海蓝#70DB93蓝紫色#9F5F9F亮金色#D9D919
巧克力色#5C3317珊瑚红#FF7F00黄铜色#B5A642深绿#2F4F2F青铜色#8C7853
紫蓝色#42426F深绿松石色#7093DB深棕#5C4033淡灰色#545454浅蓝色#C0D9D9
森林绿#238E23深紫色#871F78深橄榄绿#4F4F2F浅灰色#A8A8A8桔黄色#E47833
海蓝色#32CD99橙色#FF7F00淡紫色#DB70DB浅绿色#8FBC8F粉红色#BC8F8F
银色#E6E8FA天蓝#3299CC

黄绿色#99CC32

海军蓝#23238E紫罗兰色#4F2F4F

相关文章:

【css】背景换颜色

更换前 longin.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>login</title><link href"/css/style.css" type"text/css" rel"stylesheet"><s…...

什么是美颜sdk?直播实时美颜sdk的工作流程和架构分析

在现代社交媒体和娱乐行业中&#xff0c;直播已经成为了一种受欢迎的娱乐形式&#xff0c;同时实时美颜也变得越来越重要。直播实时美颜SDK的工作流程和架构在这一领域起到了关键作用。本文将深入探讨这些SDK的内部机制&#xff0c;从而理解它们如何为用户提供出色的美颜效果。…...

第二证券:跌破3000点,热搜第一!

今天上午&#xff0c;“沪指开盘跌破3000点关口”冲上百度热搜榜榜首。 上午收盘&#xff0c;上证指数下跌0.27%&#xff0c;报2997.22点&#xff1b;深证成指下跌0.36%&#xff0c;创业板指下跌0.44%。 赛道股发力&#xff0c;光伏、风电、新能源轿车等板块盘中冲高。房地产…...

IJCAI2023【基于双曲空间探索的非独立同分布联邦学习】

1、介绍汇报的主题及汇报者 2、粗略介绍面临的挑战及出发点 3、介绍一下预备知识 4、解决方案 5、总览 6、实验设置 7、实验 8、结论...

实现Linux下Word转PDF、Java调用命令方式

使用 LibreOffice 实现 Word 转 PDF 和 Java 调用命令 1、 安装 LibreOffice 外网安装 # 一键安装 yum install -y libreoffice # 验证版本 libreoffice --version # Warning: -version is deprecated. Use --version instead. # LibreOffice 7.5.6.2 f654817fb68d6d4600d7…...

Java并发-06-AQS(AbstractQueuedSynchronizer)相关

1-概述 AQS全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架。同步器的设计是基于模板方法模式的&#xff0c;也就是说&#xff0c;使用者需要继承同步器并重写指定的方法&#xff0c;随后将同步器组合在自定义同步组件的实现中&#xff0c;并…...

【Python接口自动化】--深入了解HTTP接口基本组成和网页构建原理

引言 Python接口自动化有着广泛的应用场景&#xff0c;但是在实际使用过程中&#xff0c;可能会出现一些问题。比如&#xff0c;你不知道HTTP接口的基本构成&#xff0c;也不清楚网页是如何构建的。 这时&#xff0c;你就需要深入了解HTTP接口的基本组成和网页构建原理。通过本…...

window mysql5.7.27 启用SSL openssl mysql_ssl_rsa_setup

应客户监管部门要求 mysql必须要启用SSL。由于mysql安装在window上&#xff0c;启用过程中遇到了不少的坑&#xff0c;在此记录一下。 安装openssl 如果已经安装过可跳过此步 https://slproweb.com/download/Win64OpenSSL-1_1_1w.msi复制到浏览器下载后安装即可。如果需要其他…...

性能测试-JMeter分布式测试及其详细步骤

性能测试概要 性能测试是软件测试中的一种&#xff0c;它可以衡量系统的稳定性、扩展性、可靠性、速度和资源使用。它可以发现性能瓶颈&#xff0c;确保能满足业务需求。很多系统都需要做性能测试&#xff0c;如Web应用、数据库和操作系统等。 性能测试种类非常多&#xff0c…...

学习gin-vue-admin之创建api和swagger

文章目录 go:generateViper 读写配置文件ZAP 保存日志定时任务创建apimodel步骤 1. 创建service步骤 2. 创建api步骤 3. 创建router 初始化总路由启动go-swagger路由配置swag init test将嵌套结构定义为指针或对象利弊结构体嵌套学习资源 go:generate //go:generate go env -w …...

2023-10-17 mysql-innodb-解析write_row的record的一行数据-分析

摘要: 2023-10-17 mysql-innodb-解析write_row的record的一行数据-分析. record是一行数据的序列化后的一整个字节流, 在innodb中需要解读出字段. 本文分析如何解析record, 以便学习这种技巧. row_mysql_store_col_in_innobase_format 调用堆栈: #0 row_mysql_store_col_in…...

认识web自动化测试!

1.什么是自动化测试&#xff1f; 自动化测试的概念: 软件自动化测试就是通过测试工具或者其他手段&#xff0c;按照测试人员的预定计划对软件产品进行自动化测试&#xff0c;他是软件测试的一个重要组成部分&#xff0c;能够完成许多手工测试无法完成或者难以实现的测试工作&a…...

多商户进驻小程序商城的作用是什么

多商户进驻商城简单来说就是在一个商城里&#xff0c;由经营者邀请同行、异业商家进驻到商城里&#xff08;子商户&#xff09;&#xff0c;可丰富商城经营业态&#xff0c;满足客户多方购物需求&#xff0c;打造购物商圈及经营者获得更多收益等。 通过【雨科】平台的多商户进驻…...

接口响应慢该如何排查

不知道大家有没有遇到这种情况&#xff0c;接口业务逻辑写完后&#xff0c;用 postman 一调&#xff0c;发现接口响应时间好长&#xff0c;不得不对接口进行优化。但是此时接口的代码往往逻辑比较复杂&#xff0c;调用层次也比较多&#xff0c;很难定位到耗时较长的代码块。 遇…...

spring boot MongoDB实战

文章目录 项目搭建文章评论实体类的编写文章评论的基本增删改查根据上级ID查询文章评论的分页列表MongoTemplate实现评论点赞 GITHUB 项目搭建 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0&q…...

企业数字化转型时,会遇到的5大挑战

企业数字化转型时&#xff0c;会遇到的5大挑战添加链接描述 数字化转型已然是当今商业战略的一大基石&#xff0c;根据Gartner的《2023年度董事会调查》显示&#xff0c;有89%的企业将数字业务视为其增长的核心。但该研究的另一项统计数据也显示&#xff1a;在这些企业中&…...

动态语句 sqlserver

EXEC sp_executesql DynamicSQL, NFirstName NVARCHAR(50), LastName NVARCHAR(50), FirstName, LastName在EXEC sp_executesql语句中&#xff0c;后面的参数需要按特定顺序传递。这些参数的顺序如下&#xff1a; 1.第一个参数是动态SQL语句本身&#xff0c;通常是一个NVARCHA…...

【一文清晰】单元测试到底是什么?应该怎么做?

我是java程序员出身&#xff0c;后来因为工作原因转到到了测试开发岗位。测试开发工作很多年后&#xff0c;现在是一名自由职业者 1、什么是单元测试 2、该怎么做单元测试 一、什么是单元测试&#xff1f; 单元测试&#xff08;unit testing&#xff09;&#xff0c;是指对软件…...

二、基于PCL的RANSAC拟合点云中所有直线或平面——3D点云处理系列

RANSAC原理&#xff1a;略。 其他博客大多都是介绍拟合单条直线或平面的代码案例&#xff0c;本文介绍如何拟合多条直线或平面&#xff0c;其实是在单个拟合的基础上接着拟合&#xff0c;以此类推。 注意&#xff1a;步骤中的直线模型是每次随机在点云中取点计算的。 步骤&…...

Linux实用指令-指定运行级别、帮助指令

一、 指定运行级别 1.运行级别说明&#xff1a; 0:关机 1:单用户[找回丢失密码] 2:多用户状态没有网络服务 3:多用户状态有网络服务 4:系统未使用保留给用户 5:图形界面 6:系统重启 常用运行级别是3和5&#xff0c;要修改默认的运行级别。可改文件/etc/inittab 的id:5:initd…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...