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

24.11.10 css

news 2026/2/9 21:23:15

2.css语法结构

选择器{

样式:样式值;

}

3.css引入方式

如何在html页面中写css代码

        1.页面中直接使用style标签 编写css                          调试样式代码时使用<style>  h1{color:red}</style>

       2.通过link标签 引入css文件                                 上线时使用  可使用三种路径 相对路径 相对根路径 绝对路径<link rel="stylesheet" href="/day2_css/css/mystyle.css">

          3.在元素上 通过style属性直接编辑样式                        尽量不用 后期维护更新比较麻烦<h1 style="color: red;" >我的标题</h1>

注意:

1,2 后加载的覆盖先加载的

3 覆盖1,2加载方式

4.css常用选择器

常用选择器

        1.标签选择器(通过html标签选择元素)   选取范围较大 只要是页面中指定的标签都会选中  2.class选择器(通过class值选元素)    选取范围精准 可以任意给元素指定class值 class值中有一个能匹配上即被选中class选择器 配合class多值的特性 让选取元素非常灵活3.id选择器(通过id值选元素)          选取范围精准 class可以替代id   id一般在写js是定义    基本选择器的优先级id>class>标签    权值高的覆盖权值低的

1.标签选择器p{color: blue;}
2.class选择器.myp{color: green;}
3.id选择器#aimp{color: lightcoral;}

选择器组合方式 (了解即可)

        4并集选择器  同时选多种类型元素       选择器,选择器5交集选择器  同时满足多种条件的元素   选择器选择器  先元素 再其他6后代选择器  选取元素内部的元素       选择器 选择器  选取范围较大7子代选择器  选取元素内部的子元素     选择器>选择器  选取较精准8属性选择器  [属性名] [属性名=属性值]9通用选择器  *               做全局默认设置

4并集选择器 h1,.myp{color: lightblue;}
5.交集选择器p.mystyle{color: blue;}
6.后代选择器div p{color: red;} 
7.子代选择器.testdiv>div>p{color: red;} 
8.属性选择器[type='button']{color: red;}/* .div1 [type='button']{color: red;}.div2 [type='button']{color: green;} */
9.全局选择器*{color: lightpink;}

5.css常用样式

文字背景常用设置

        常用样式属性1 color   文字颜色   颜色英文rgb值 红 绿 蓝  0-255#RGB 16进制#3CF 相当于 #33CCFF2 font-size 文字大小    单位 像素   绝对单位em rem     相对单位 默认字体倍率分辨率 1080p 1920*1080 2k 4k3 font-weight 字体粗细  数大的粗4 font-family 字体类型  默认黑体5 text-align: center;  调整文字左右位置6 line-height: 100px;  行高  行高与块高一致 文字正好在中心点7.background-image: url(./imgs/niu.jpg); 背景图片jpg png gif8.background-size: 50%;  调整大小比例9.background-repeat: no-repeat;  背景重复方式10. background-color: blueviolet; 背景颜色 背景图片与颜色一起使用时 图片会盖在颜色上边11. list-style:url(./imgs/niu2.png); 列表的标记 可以使用图片12. border: 1px solid black;  统一设置四条边分开设置left right top bottom 13. border-radius  像素 百分比四个角可以单独设置border-bottom-left-radius: 30%;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color:#3CF;font-size: 2em;font-weight: 900;font-family: '楷体';text-align: center;width: 200px;height: 200px;/* border: 1px solid black;border-radius: 10%; */line-height: 200px;background-image: url(./imgs/640.gif);background-size: 50%;background-repeat: no-repeat;background-color: blueviolet;border-bottom: 5px solid lightslategray;border-left: 5px solid rgb(43, 5, 131);border-bottom-left-radius: 30%;border-top-right-radius: 30%;}a{text-decoration: none;}.myul{list-style:url(./imgs/niu2.png);}</style></head><body><div>测试</div><a href="###">测试超链接</a><!-- <img src="./imgs/niu.jpg"/> --><ul class="myul"><li>尔滨装卸行李温柔得像放鸡蛋</li><li>郑钦文称不与选手交朋友 李娜回应</li><li>快递小哥在仓库遇到小猪包裹</li><li>王俊凯发文卡点为王源庆生</li></ul></body></html>

盒子模型

        盒子模型页面元素在排布时 使用的逻辑概念 盒子互相嵌套和排布content 内容大小   可以自动适应也可以设置宽高width heightborder  边框      特殊显示效果padding 内部填充   边框到内容之间填充 (元素整体会变大)margin  外边距     元素之间的间隔距离                   margin: 100px auto;  元素居中 特殊用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.mydiv{width: 100px;height: 100px;border: 10px solid black;/* padding: 50px; 内部填充  内容与边框的间隔 *//*   padding: 50px 40px 30px 20px; */顶部 右侧  底部  左侧 /* padding-left: 50px; *//* 四个方向可以单独设置 *//* margin:10px *//* 外边距 控制元素与元素的间隔 *//* margin-left: 50px;margin-top: 50px; */margin: 0px auto;}h1{margin-top: 50px;}</style></head><body><div class="mydiv">测试div<br>12332111</div><div class="mydiv">测试div<br>12332111</div><h1>11111</h1></body></html>

div+css布局

div+css布局实际上就是在页面中画格子大格子中套小格子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 页面元素排布时 像画table一样 行加单元格的思想来布局div+css宽高排版时 为了方便适配 通常使用相对单位百分比  高度使用百分比时 要求父元素的高度已指定视窗比例相对单位宽度 vw 100vw 视窗宽度100%高度 vh 100vh 视窗高度100%*//* html,body{margin: 0px;height: 100%;} */body{margin: 0px;}.mainPanel{width: 100vw;height: 100vh;background-color: lightgrey;}.top{width: 100%;height: 15%;background-color: rgb(255, 179, 179);}.middle{width: 100%;height: 70%;background-color: rgb(156, 234, 248);}.bottom{width: 100%;height: 15%;background-color: rgb(222, 238, 180);}.left{width: 20%;height: 100%;background-color: rgb(255, 119, 187);float: left;}.right{width: 80%;height: 100%;background-color: rgb(134, 69, 255);float: left;}</style></head><body><div class="mainPanel"><div class="top"></div><div class="middle"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></div></body></html>

注意:

float属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。

left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动（默认值）。
inherit：从父元素继承float属性的值

布局时可以使用绝对单位

宽高排版时为了方便适配通常使用两种相对单位

   百分比  高度使用百分比时 要求父元素的高度已指定

    视窗比例相对单位宽度 vw 100vw 视窗宽度100%高度 vh 100vh 视窗高度100%

显示方式属性

 display  元素显示方式block           块方式显示inline          行内方式显示inline-block    行内快方式显示none            不显示

显示规则:

块 (block) 从上到下排列宽高有效

行内(inline) 从左到右排列宽高无效

行内块() 从走到右排列宽高有效图片表单元素(输入框选择框按钮.....)

透明度:

opacity: 0; 透明度 0透明-1不透中间半透

rgba(41, 211, 168, 0.151)

透明度

伪类选择器

伪类选择器 (选取元素的交互状态)

:active  鼠标点击
:hover   鼠标悬停 (鼠标放在了某个元素上)

手型光标

cursor: pointer; 手型光标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 伪类选择器 (选取元素的交互状态):active  鼠标点击:hover   鼠标悬停 (鼠标放在了某个元素上)这两个选择器作用在同一个元素上时会被覆盖，有一个元素不显示效果cursor: pointer;  手型光标*/.testDiv{width: 100px;height: 100px;border: 1px solid black;}.testDiv:active{background-color: red;}.testDiv:hover{border: 10px solid rgb(114, 105, 105);cursor: pointer;}a:hover{font-size: 30px;}</style></head><body><div class="testDiv"></div><a href="###">aaaa</a></body></html>

定位属性

定位属性 position默认文档流 块从上到下 行内元素从左到右relative相对定位  元素不脱离文档流 元素以原始位置偏移 absolute绝对定位  元素脱离文档流  以页面位置进行偏移fixed  固定定位  元素脱离文档流  以页面位置进行偏移 并固定在此处static  默认文档流top   向下偏移  可以取负值 反方向left  向右偏移z-index 图层顺序  必须用在有定位改变的元素上 static时无效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{width: 100px;height: 100px;border: 1px solid black;background-color: lightcoral;position: fixed;top: 10px;left: 10px;z-index: 1;}
/* 
定位属性 position默认文档流 块从上到下 行内元素从左到右relative相对定位  元素不脱离文档流 元素以原始位置偏移 absolute绝对定位  元素脱离文档流   以页面位置进行偏移fixed   固定定位  元素脱离文档流   以页面位置进行偏移 并固定在此处static  默认文档流加了定位出图层      top    向下偏移  可以取负值 反方向
left   向右偏移z-index 图层顺序  必须用在有定位改变的元素上 static时无效*/.div2{width: 100px;height: 100px;border: 1px solid black;background-color: lightgoldenrodyellow;/* margin-top: 50px; */position: fixed;top: 30px;left: 30px;z-index: 2;}.div3{width: 300px;height: 100px;border: 1px solid black;background-color: lightskyblue;position: fixed;top: 50px;left: 50%;margin-left: -150px;z-index: 3;}</style></head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>

Javascript1

24.11.10 css

2.css语法结构选择器{ 样式:样式值; 样式:样式值; } 3.css引入方式如何在html页面中写css代码 1.页面中直接使用style标签编写css 调试样式代码时使用<style> h1{color:red}</style>2.通过link标签引入css文件 …...

编程日记 2024/11/13 3:22:01

git新手使用教程

git新手使用教程一、安装和初始化配置2、新建仓库3.工作区域和文件状态4.添加和提交文件5 git reset回退版本6 使用git diff查看差异7 使用git rm删除文件8 .gitignore忽略文件9 注册GitHub账号10 SSH配置和克隆仓库11 关联本地仓库和远程仓库12 Gitee的使用由B站视频教程整理…...

编程日记 2024/11/13 3:21:00

运维发展方向

作为一名运维工程师，我建议可以从以下几个方面规划职业发展： 1. 夯实基础知识 - Linux 系统管理与优化 - 网络协议和架构 - 数据库运维(MySQL、PostgreSQL等) - Shell 脚本编程 - Python/Go 等自动化语言 2. 掌握现代化工具 - 容器技术(Docker、Kubern…...

编程日记 2024/11/13 3:19:58

jmeter常用配置元件介绍总结之函数助手

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之取样器 jmeter常用配置元件介绍总结之函数助手 1.进入函数助手对话框2.常用函数的使用介绍2.1.RandomFromMultipleVars函数2.2.Random函数2.3.R…...

编程日记 2024/11/13 3:16:55

Pytorch从0复现worc2vec skipgram模型及fasttext训练维基百科语料词向量演示

目录 Skipgram架构代码开源声明 Pytorch复现Skip-gram 导包及随机种子设置维基百科数据读取建立词频元组列表并根据词频排序建立词频字典,word_id字典,id_word字典二次采样正采样与负采样 Skipgram模型类模型训练词向量输出近义词寻找 fasttext训练Skip-…...

编程日记 2024/11/13 3:15:51

fastapi 查询参数支持 Pydantic Model：参数校验与配置技巧

fastapi 查询参数支持 Pydantic Model：参数校验与配置技巧本文介绍了 FastAPI 中通过 Pydantic model 声明查询参数的使用方法，提供了更加灵活和强大的参数校验方式。通过将查询参数定义在 Pydantic model 中，开发者可以对参数设置默认值、…...

编程日记 2024/11/13 3:13:49

mysql 大数据查询

基于 mysql 8.0 基础介绍 com.mysql.cj.protocol.ResultsetRows该接口表示的是应用层如何访问 db 返回回来的结果集它有三个实现类 ResultsetRowsStatic 默认实现。连接 db 的 url 没有增加额外的参数、单纯就是 ip port schema 。 @Test public void generalQuery() t…...

编程日记 2024/11/13 3:12:47

如何在 Spring Boot 中利用 RocketMQ 实现批量消息消费

文章目录准备工作项目依赖配置 RocketMQ生产批量消息消费批量消息测试批量消息发送和消费总结推荐阅读文章 RocketMQ 是一款分布式消息队列，支持高吞吐、低延迟的消息传递。对于需要一次处理多条消息的场景，RocketMQ 提供了批量消费的机制，这…...

编程日记 2024/11/13 3:06:39

基于驾驶员面部特征的疲劳检测系统

大家好，本文是对基于驾驶员面部特征的疲劳检测系统源码的介绍与说明。项目下载：基于驾驶员面部特征的疲劳检测系统 1.关于项目疲劳驾驶检测系统通过监测驾驶人的眼睛状态，头部状态，嘴部状态等指标，识别出疲劳迹象…...

编程日记 2024/11/13 2:58:27

前端知识点---字符串的8种拼接方法(Javascript)

文章目录 01使用运算符(改变了原始字符串)02使用运算符(改变了原本的字符串)03 使用 concat() 方法(不改变原本的字符串)04使用模板字面量（不改变原本的字符串）05使用 join() 方法（不改变原本的字符串）①指定分隔符 ②没有指定…...

编程日记 2024/11/13 2:55:24

用 Python 从零开始创建神经网络（一）：编码我们的第一个神经元

编码我们的第一个神经元引言1. A Single Neuron：Example 1Example 2 2. A Layer of Neurons：Example 1 引言本教程专为那些对神经网络已有基础了解、但尚未动手实践过的读者而设计。尽管网上充斥着各种教程，但很多内容要么过于简略&#x…...

编程日记 2024/11/13 2:53:22

低代码开发

低代码（Low Code）是一种软件开发方法，它通过可视化界面和少量的编码来快速构建应用程序。低代码平台的核心理念是通过抽象和最小化手工编码的方式，加速软件开发和部署的过程。定义低代码是一种软件开发方法，它允许…...

编程日记 2024/11/13 2:48:09

sql server 文件和文件组介绍

sql server 文件和文件组介绍数据库文件和文件组 - SQL Server | Microsoft Learn...

编程日记 2024/11/13 2:46:07

caozha-CEPCS（新冠肺炎疫情防控系统）

caozha-CEPCS，是一个基于PHP开发的新冠肺炎疫情防控系统，CEPCS（全称：COVID-19 Epidemic Prevention and Control System），可以应用于单位、企业、学校、工业园区、村落等等。小小系统，希望能为大…...

编程日记 2024/11/13 2:40:02

1Panel修改PostgreSQL时区

需求 1Panel安装的PostgreSQL默认是UTC时区，需要将它修改为上海时间步骤进入PostgreSQL的安装目录 /opt/1panel/apps/postgresql/postgresql/data打开postgresql.conf文件修改： log_timezone Asia/Shanghai timezone Asia/Shanghai保存后重启…...

编程日记 2024/11/13 2:39:01

开发一个CRM系统难吗？CRM系统的实现步骤

越来越多企业意识到了，客户关系管理（CRM）系统已成为企业提升客户体验、推动销售增长的必备工具。一个高效的CRM系统不仅能够帮助企业优化客户数据管理，还能提升客户满意度，增强客户忠诚度，从而推动业务的持…...

编程日记 2024/11/13 2:34:57

kafka常见面试题总结

Kafka 核心知识解析一、Kafka 消息发送流程 Kafka 发送消息涉及两个线程：main 线程和 sender 线程。在 main 线程中，会创建一个双端队列 RecordAccumulator，main 线程负责将消息发送给 RecordAccumulator，而 sender 线程则从 R…...

编程日记 2024/11/13 2:32:54

文章目录 01 typeof 运算符02 instanceof 运算符03 Array.isArray()04 Object.prototype.toString.call()05 constructor 属性06 isNaN() 和 Number.isNaN() (常用)07 isFinite() 和 Number.isFinite()08 typeof null 是 "object" 的问题 01 typeof 运算符返回值是…...

编程日记 2024/11/13 2:31:53

aspose如何获取PPT放映页“切换”的“持续时间”值

aspose如何获取PPT放映页“切换”的“持续时间”值项目场景问题描述问题1：从官方文档和资料查阅发现并没有对切换的持续时间进行处理的方法问题2：aspose的依赖包中，所有的关键对象都进行了混淆处理解决方案1、找到ppt切换的持续时间对应的混…...

编程日记 2024/11/13 2:30:52

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度

一、引言：多云环境的技术复杂性本质企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。我们可以考虑用CNN来替代RNN，但是…...

编程新知 2026/2/1 7:05:07

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2026/2/4 16:21:14

JAVA后端开发——多租户

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

编程新知 2025/12/18 8:35:12

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16