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

【web前端】CSS样式

news 2025/10/30 12:36:02

CSS应用方式

在标签

<h2 style="color: aquamarine">hello world!</h2>

在head标签中写style标签

<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 100px;}.c2{height: 200px;color: aqua;}</style>
</head>
<body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1></body>

写到文件

  • 文件：
.c1{height: 100px;
}
.c2{height: 200px;color: aqua;
}
  • html:
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="com.css"></head>
<body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1>

选择器

类选择器

.c1{color: pink;
}
<h1 class="c1">乒乓球</h1>

ID选择器

#c2{height: 100px;
}
<h2 ID="c2">羽毛球</h2>

标签选择器

li{color: aquamarine;
}
<ul><li>篮球</li><li>排球球</li>
</ul>

属性选择器

input[type='text']{border: 1px;color: chocolate;
}
<input type="text">
<input type="password">

后代选择器

.yy li{color: blue;
}
<div class="yy"><ul><li>中国</li><li>美食</li></ul>
</div>

多个样式和覆盖

覆盖顺序是按照style中的顺序来的， <div class="c2 c1">中国移动</div>和 <div class="c1 c2">中国移动</div>是一样的效果

<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: blue;border: 1px solid red;}.c2{font-size: 20px;color: aqua;}</style>
</head>
<body><div class="c1 c2">中国移动</div>
</body>

相关文章：

【web前端】CSS样式

CSS应用方式 在标签 <h2 style"color: aquamarine">hello world!</h2> 在head标签中写style标签 <head><meta charset"UTF-8"><title>Title</title><style>.c1{height: 100px;}.c2{height: 200px;color: aqua;…...

编程日记 2024/6/10 19:00:47

【ARM Cache 与 MMU 系列文章 7.7 – ARMv8/v9 MMU Table 表分配原理及其代码实现 1】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU Table 表分配原理及其代码实现虚拟地址空间 Region的配置系统物理地址位宽获取汇编代码实现MMU Table 表分配原理及其代码实现 假设当前系统中需要映射多个region，其中第一个要映…...

编程日记 2024/6/10 18:59:47

AIGC之MetaHuman：HeyGen(基于AI驱动的视频生成平台+数字人)的简介、安装和使用方法、案例应用之详细攻略

AIGC之MetaHuman&#xff1a;HeyGen(基于AI驱动的视频生成平台数字人)的简介、安装和使用方法、案例应用之详细攻略 目录 HeyGen的简介 1、HeyGen是一款AI视频生成平台&#xff0c;它提供以下关键功能&#xff1a; HeyGen的安装和使用方法 1、使用方法 01创建或选择一个头…...

编程日记 2024/6/10 18:58:45

6.7-6.10作业

1. /*1.使用switch实现银行系统&#xff0c;默认用户为A&#xff0c;密码为1234&#xff0c;余额2000 如果登录失败&#xff0c;则直接结束 如果登录成功&#xff0c;则显示银行页面 1.查询余额 2.取钱 3.存钱 如果是1&#xff0c;则打印余额 如果是2&#xff0c;则输入取钱金…...

编程日记 2024/6/10 18:57:45

【Redis】Redis经典问题：缓存穿透、缓存击穿、缓存雪崩

目录 缓存的处理流程缓存穿透解释产生原因解决方案1.针对不存在的数据也进行缓存2.设置合适的缓存过期时间3. 对缓存访问进行限流和降级4. 接口层增加校验5. 布隆过滤器原理优点缺点关于扩容其他使用场景SpringBoot 整合 布隆过滤器 缓存击穿产生原因解决方案1.设置热点数据永不…...

编程日记 2024/6/10 18:56:43

从GPU到ASIC，博通和Marvell成赢家

ASIC市场上&#xff0c;博通预计今年AI收入将达到110亿美元以上&#xff0c;主要来自与Google和Meta的合作&#xff1b;Marvell预计2028年AI收入将达到70亿至80亿美元&#xff0c;主要来自与Amazon和Google的合作。 随着芯片设计和系统复杂性的增加&#xff0c;科技大厂将更多地…...

编程日记 2024/6/10 18:55:43

【java问答小知识6】一些Java基础的知识，用于想学习Java的小伙伴们建立一些简单的认知以及已经有经验的小伙伴的复习知识点

请解释Java中的双亲委派模型是什么&#xff1f; 回答&#xff1a;双亲委派模型是Java类加载机制的核心原则&#xff0c;它确保所有类加载器在尝试加载一个类之前&#xff0c;都会委托给它的父类加载器。 Java中的类路径&#xff08;Classpath&#xff09;是什么&#xff1f; 回…...

编程日记 2024/6/10 18:54:41

数学建模笔记

数学建模 定义角度 数学模型是针对参照某种事物系统的特征或数量依存关系&#xff0c;采用数学语言&#xff0c;概括地或近似地表述出的一种数学结构&#xff0c;这种数学结构是借助于数学符号刻画出来的某种系统的纯关系结构。从广义理解&#xff0c;数学模型包括数学中的各…...

编程日记 2024/6/10 18:53:41

shell编程（三）—— 控制语句

程序的运行除了顺序运行外&#xff0c;还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来&#xff0c;用于检测一个条…...

编程日记 2024/6/10 18:52:40

反射学习记

Java 中的反射是什么意思&#xff1f;有哪些应用场景&#xff1f; 每个类都有⼀个 Class 对象&#xff0c;包含了与类有关的信息。当编译⼀个新类时&#xff0c;会产生一个同名的 .class 文件&#xff0c;该⽂件 内容保存着 Class 对象。类加载相当于 Class 对象的加载&a…...

编程日记 2024/6/10 18:51:39

使用Python操作Redis

大家好&#xff0c;在当今的互联网时代&#xff0c;随着数据量和用户量的爆发式增长&#xff0c;对于数据存储和处理的需求也日益增加。Redis作为一种高性能的键值存储数据库&#xff0c;以其快速的读写速度、丰富的数据结构支持和灵活的应用场景而备受青睐。本文将介绍Redis数…...

编程日记 2024/6/10 18:50:37

Vue-CountUp-V2 数字滚动动画库

安装&#xff1a; $ npm install --save countup.js vue-countup-v2示例如下&#xff1a; <template><div class"iCountUp"><ICountUp:delay"delay":endVal"endVal":options"options"ready"onReady"/>&…...

编程日记 2024/6/10 18:49:36

C语言详解（文件操作）1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

编程日记 2024/6/10 18:48:35

Python Requests库详解

大家好&#xff0c;在现代网络开发中&#xff0c;与Web服务器进行通信是一项至关重要的任务。Python作为一种多才多艺的编程语言&#xff0c;提供了各种工具和库来简化这一过程。其中&#xff0c;Requests库作为Python中最受欢迎的HTTP库之一&#xff0c;为开发人员提供了简单而…...

编程日记 2024/6/10 18:47:34

Kafka 详解：全面解析分布式流处理平台

Kafka 详解&#xff1a;全面解析分布式流处理平台 Apache Kafka 是一个分布式流处理平台&#xff0c;主要用于构建实时数据管道和流式应用。它具有高吞吐量、低延迟、高可用性和高可靠性的特点&#xff0c;广泛应用于日志收集、数据流处理、消息系统、实时分析等场景。 &…...

编程日记 2024/6/10 18:46:33

RabbitMQ系列-rabbitmq无法重新加入集群，启动失败的问题

当前存在3个节点&#xff1a;rabbitmq5672、rabbitmq5673、rabbitmq5674 当rabbitmq5673节点掉线之后&#xff0c;重启失败 重启的时候5672节点报错如下&#xff1a; 解决方案 在集群中取消失败节点 rabbitmqctl forget_cluster_node rabbitrabbitmq5673删除失败节点5673的…...

编程日记 2024/6/10 18:45:31

postgresql之翻页优化

列表和翻页是所有应用系统里面必不可少的需求&#xff0c;但是当深度翻页的时候&#xff0c;越深越慢。下面是几种常用方式 准备工作 CREATE UNLOGGED TABLE data (id bigint GENERATED ALWAYS AS IDENTITY,value double precision NOT NULL,created timestamp with time zon…...

编程日记 2024/6/10 18:44:30

小白学Linux | 日志排查

一、windows日志分析 在【运行】对话框中输入【eventvwr】命令&#xff0c;打开【事件查看器】窗 口&#xff0c;查看相关的日志 管理员权限进入PowerShell 使用Get-EventLog Security -InstanceId 4625命令&#xff0c;可获取安全性日志下事 件 ID 为 4625&#xff08;失败登…...

编程日记 2024/6/10 18:43:26

Spring6

一 概述 1.1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发。从简单性、可测…...

编程日记 2024/6/10 18:42:25

数字孪生概念、数字孪生技术架构、数字孪生应用场景，深度长文学习

一、数字孪生起源与发展 1.1 数字孪生产生背景 数字孪生的概念最初由Grieves教授于2003年在美国密歇根大学的产品全生命周期管理课程上提出&#xff0c;并被定义为三维模型&#xff0c;包括实体产品、虚拟产品以及二者间的连接&#xff0c;如下图所示&#xff1a; 2011年&…...

编程日记 2024/6/10 18:41:24

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/10/30 10:46:51

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/10/29 10:32:27

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/10/29 5:36:35

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/10/26 5:43:27

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/10/27 13:38:34

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/10/30 3:32:09

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/10/30 3:51:57

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱？分层思维来救场！

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...

编程新知 2025/10/25 15:54:43

PostgreSQL 与 SQL 基础：为 Fast API 打下数据基础

在构建任何动态、数据驱动的Web API时&#xff0c;一个稳定高效的数据存储方案是不可或缺的。对于使用Python FastAPI的开发者来说&#xff0c;深入理解关系型数据库的工作原理、掌握SQL这门与数据库“对话”的语言&#xff0c;以及学会如何在Python中操作数据库&#xff0c;是…...

编程新知 2025/10/29 9:07:06