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

21.2 CSS 三大特性与页面布局

news 2025/7/7 7:40:07

image-20230822200700134

1. 开发者工具修改样式

使用开发者工具修改样式, 操作步骤如下:
* 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择'检查'或者使用快捷键(一般是 F12 或者 Ctrl+Shift+I)来打开开发者工具.* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 一般是'Elements'或者'Elements'选项卡, 然后查找样式编辑器按钮, 点击它来打开样式编辑器.* 3. 修改样式: 在样式编辑器中, 可以找到并选择你想修改的元素, 在右侧的面板中你可以修改该元素的样式.可以修改元素的背景颜色, 字体样式, 边框, 内边距等等, 只需在样式规则中修改相关属性即可.* 4. 预览修改: 在修改样式的过程中, 开发者工具会实时预览你的修改效果. 可以看到元素在页面上的变化.如果需要, 还可以在浏览器调整窗口大小或者模拟设备来查看页面在不同屏幕上的效果.* 5. 应用修改: 一旦得到满意的修改, 可以将修改后的样式应用到页面上.可以直接在开发者工具中编辑页面的样式, 或者将修改后的样式复制到你的代码中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Developer Mode</title><style>p {font-size: 10px;color: red;}</style>
</head>
<body>
<h1>标题</h1>
<p>段落一</p>
<p>段落二</p>
</body>
</html>

2023-08-17_00019

2. CSS 三大特性

CSS具有三个重要的特性, 分别是:
* 1. 层叠性(Cascading): 相同选择器设置相同的样式会覆盖另一种冲突样式.层叠性的特点:1. 给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.2. 给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式.注意事项: 当样式冲突时, 只有当选择器优先级相同时, 才能通过层叠性判断结果.* 2. 继承性(Inheritance): 某些样式属性可以从父元素传递到其子元素.当父元素应用了某个样式属性时, 其子元素将默认继承这个属性的值, 无需在子元素中重复定义.* 3. 优先级(Specificity): 当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.通常, 选择器的具体性越高, 其优先级越高. 选择器的具体性由选择器的类型, 选择器的数量以及选择器的权重决定.这三个特性共同组成了CSS强大的样式控制机制.
使用层叠性, 继承性和优先级, 可以准确地控制网页元素的显示样式, 实现丰富多样的布局和设计效果.

2.1 层叠性

给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cascading</title><style>p {color: red;}p {color: aqua;}</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00004

给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式(程序至上往下运行).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cascading2</title><style>p {color: red;}p {color: aqua;font-size: 14px;}</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00006

2.2 继承性

继承性: 子元素可以继承其父元素的某些样式属性.以下是关于继承性的一些要点:
* 1. 哪些属性可以继承: 只有部分属性是可继承的.例如, color(文字颜色), font-family(字体系列), font-size(字体大小), line-height(行高)等.这意味着如果父元素设置了这些属性, 子元素将会继承并应用相同的属性值.* 2. 哪些属性不可继承: 并非所有属性都具有继承性.例如, background(背景), height(高度), border(边框), margin(边距), padding(内边距)等属性不会被子元素继承.* 3. 特殊的继承性规则: 尽管大部分可继承属性可以在父元素和其后代元素之间传递, 但有一些属性具有特殊的继承规则.例如, 链接'<a>'标签的文本颜色和文本修饰(如下划线)不会完全继承其父元素的设置,标题标签'<h1> - <h6>'的字体大小也不会完全继承其父元素的设置.* 4. 继承的优先级较低: 如果子元素直接设置了某个属性, 而父元素设置了相同的属性, 子元素会使用自己直接设置的值, 而不是继承父元素的值.直接设置的样式会覆盖继承而来的样式.使用继承性可以方便地应用样式到多个元素, 特别是针对文字和字体样式.
但在某些情况下, 可能需要小心处理继承, 以避免意外的样式传递. 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inheritance</title><style>div {color: red; /* 文字颜色: 红色 */font-size: 20px; /* 文字大小: 20像素 */background: grey; /* 背景颜色: 灰色 */text-decoration: none; /* 取消下划线 a便签不会继承*/}</style>
</head>
<body>
<div><h1>一级标签</h1>
</div>
<div><p>段落一</p>
</div><div><ul><li><p>段落二</p></li></ul>
</div><div><a href="">链接</a>
</div></body>
</html>

上例中, h1标签继承了div标签的文字颜色属性, 背景颜色, 取消文字的下划线, 没有继承文字大小的属性.

2023-08-22_00007

上例中, a标签继承了div标签的文字大小, 背景颜色,  取消文字的下划线, 没有继承文字颜色属性.

2023-08-22_00008

2.3 优先级

当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.CSS会按照如下顺序来计算优先级:
* 1. 内联样式(具有最高优先级): 使用'style'属性直接在元素上定义的样式具有最高优先级, 特定性值为1000.
* 2. ID选择器: 具有ID选择器的样式具有比其他选择器更高的优先级, 特定性值为100.
* 3. 类选择器: 属性选择器和伪类选择器: 这些选择器的特定性值为10.
* 4. 元素选择器和伪元素选择器: 这些选择器的特定性值为1.
* 5. 通用选择器和组合选择器: 这些选择器的特定性值为0.
* 6. 属性值末尾添加!important: 提升优先级为最高.* 特定性值相等的情况下, 后面出现的规则会覆盖先前的规则, 因为它们在样式表中出现得更晚.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Specificity</title><style>p {color: red; /* 特定性值为1的元素选择器 */}#paragraph {color: blue; /* 特定性值为100的ID选择器 */}.red-text {color: green; /* 特定性值为10的类选择器 */}body p {color: purple; /* 特定性值为11的组合选择器: 1个元素选择器 + 1个元素选择器 */}</style>
</head>
<body>
<p id="paragraph" class="red-text">Hello, World!</p>
</body>
</html>

2023-08-22_00009

属性值中末尾添加!important提升属性优先级.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>important</title><style>* {color: aqua !important;font-size: 10px;}p {color: red;}</style>
</head>
<body>
<ul><li><p>Hello, world!</p></li>
</ul>
</body>
</html>

2023-08-22_00010

3. 页面布局

div标签:  是一个容器级标签, 一般用于配合css完成网页的基本布局. 特点: 独占一行.
span标签: 是一个文本级标签, 一般用于配合css完成网页中的局部信息. 

快捷嵌套标签: div.box$*2+tab; 
<div class="box1"><tab></tab>
</div>
<div class="box2"><tab></tab>
</div>$: 自动生成数字.
*: 后面的数字表示生成的标签数量, 例*2, 生成两个标签.
>: 表示生成子表情.

3.1 div页面布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div</title><style>.header { /*头部区域*/height: 100px;width: 1900px;background: red;}.content { /*中部区域*/height: 750px;width: 1900px;background: aqua;}.footer { /*页尾*/height: 100px;width: 1900px;background: blue;}.logo { /*头部logo*/height: 50px;width: 200px;background: #000;}</style>
</head>
<body>
<div class="header">  <!--头部--><div class="logo"></div> <!--头部中设置logo的布局-->
</div>
<div class="content"></div>  <!--中部-->
<div class="footer"></div>  <!--尾部-->
</body>
</html>

2023-08-22_00011

3.2 span局部更改样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span标签</title><style>span {color: red;}</style>
</head>
<body><p>今天天气 <span>晴</span>，<span>18°</span></p>
</body>
</html>

image-20230822132213266

3.3 结构错误

文本级标签嵌套容器级标签会发生结构错误.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Error examples</title>
</head>
<body>
<p>段落1<h1>标题</h1>
</p>
</body>
</html>

可以正常显示, 但是层级结构改变了了.

2023-08-22_00013

4. 标签分类

HTML将标签分为: '容器级标签'和'文本级标签'.容器级标签是可以包含其他标签的标签, 它们用于创建网页的结构和布局.
一些常见的容器级标签有div, h1-h6, ul, ol和li等.
例如, div标签可以用来创建一个容器, 里面可以包含其他任意的标签.文本级标签用于处理文本内容, 它们一般只能包含文本, 超链接或图片标签.
一些常见的文本级标签包括span, p, em, ins, del等.
例如, p标签用于创建段落, 里面可以包含文字, 也可以包含其他文本级标签或超链接, 图片标签.通过合理使用容器级标签和文本级标签, 可以实现网页的结构, 样式和内容的显示.

CSS将标签分为: '块级元素', '行内元素'和'行内块元素'.块级元素通常是容器级标签, 它们独占一行, 默认宽度与父元素相同.
如果没有设置宽度, 块级元素会自动填充父元素的宽度.
块级元素的高度默认是内容的高度, 但可以通过设置宽高来修改显示效果.行内元素通常是文本级标签(除了p标签), 它们不独占一行.
行内元素的高度默认是内容的高度, 无法设置宽度, 默认与内容一样宽.行内块元素既可以设置宽高, 也不独占一行.
例如, img标签就是行内块元素, 可以设置宽高.通过使用不同类型的元素, 可以对页面的布局和样式进行灵活的控制.

4.1 块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Block level elements</title>
</head>
<body>
<!--独占一行-->
<div>div标签</div>
<h1>h标题</h1>
<p>p标签</p>
<ul><li>ul>li标题标签</li>
</ul>
</body>
</html>

image-20230822141027288

4.2 行内元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inline element</title>
</head>
<body>
<!--不独占一行-->
<ins>aaa</ins>
<del>bbb</del>
<em>ccc</em>
<a href="#">网址</a>
</body>
</html>

image-20230822141410899

4.3 行内块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Block level elements within rows</title>
</head>
<body>
<img src="image/img.png" alt="图片"> 二次元少女
</body>
</html>

image-20230822141810286

5. display显示模式

display属性: 控制元素的显示模式的.常用属性值:
- inline: 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度.
- block: 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度.
- inline-block: 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度.
- none: 将元素隐藏, 不会在前端页面展示, 也不占用位置, 但元素仍然存在于文档中.
通过使用display属性和对应的属性值, 可以调整元素的显示模式和布局.下面是一些用来快速设置常见属性值的快捷键:
- d+tab: display:block;
- h100+tab: height:100px;
- w100+tab: width:100px;

5.1 块级元素转行内元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 1</title><style>/* 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度. */div {display: inline;height: 100px; /*失效*/width: 100px; /*失效*/background: red;}</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
</body>
</html>

image-20230822142248051

display:inline属性防止高度产生影响.

5.2 行级元素转块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 2</title><style>/* 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度. */span {display: block;width: 100px; /*可以设置宽高*/height: 100px;background: red;}</style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

image-20230822143005002

5.3 转为行内块级标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 3</title><style>/* 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度. */div, span {display: inline-block; /*可以设置宽高*/height: 100px;width: 100px;background: red;}</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>

image-20230822143142867

6. visibility隐藏标签

visibility属性: 控制元素的可见性.常用属性值:
- visible: 元素可见(默认值).
- hidden: 元素不可见, 但仍保留其空间.
- collapse: 仅用于表格元素。行或列被移除，单元格不再占据空间。
- initial: 将可见性设置为默认值.
- inherit: 继承父元素的可见性.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>visibility</title><style>.c1 {display: none;  /* 隐藏标签, 标签不占位置*/}.c3 {visibility: hidden;  /*隐藏标签, 标签占用位置*/}</style></head><body><div class="c1">d1</div><div>d2</div><div class="c3">d3</div><div>d4</div>
</body>
</html>

image-20230822143749268

7. 页面布局练习

使用代码实现下面的页面(相似即可).

2023-08-22_00028

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度首页</title><style>body { /*页面的文字大小 颜色*/font-size: 18px;color: #666;}div { /*所有的div标签居中*/text-align: center;}.header { /*头部页面高300px*/height: 300px;}.content { /*中间的页面高300px*/height: 300px;}.footer { /*尾部页面高300px*/height: 300px;}.logo { /*设置logo的大小*/height: 250px;width: 500px;}.location { /*定位图片大小*/height: 15px;width: 20px;}.logoH {height: 250px;}input[type=text] { /*输入框*/width: 400px;height: 30px;}input[type=submit] { /*搜索按钮*/width: 100px;height: 30px;}.bd {height: 60px;}.bk {height: 170px;}.footerH {height: 60px;}</style>
</head>
<body>
<!--头部-->
<div class="header"><!--logo--><div class="logoH"><img src="image/logo.png" alt="" class="logo"></div><!--导航条--><div><a href="#">新 闻</a><strong>网 页</strong><a href="#">贴 吧</a><a href="#">知 道</a><a href="#">音 乐</a><a href="#">图 片</a><a href="#">视 频</a><a href="#">地 图</a></div></div><!--中部-->
<div class="content"><!--搜索栏--><div class="bd"><form action=""><input type="text"><input type="submit" value="百度一下"></form></div><!--链接地址--><div class="bk"><a href="">百科</a><a href="">hao123</a>|<a href="">更多>></a></div><!--广告推广--><div><img src="image/location.png" alt="" class="location"><a href="#">百度地图带你吃喝玩乐, 全心全意为人民服务</a></div>
</div><!--尾部-->
<div class="footer"><!--推广--><div class="footerH"><a href="#">把百度设为首页</a><a href="#">安装百度卫士</a></div><!--关于百度--><div class="footerH"><a href="#">加入百度推广</a>|<a href="#">搜索风云榜</a>|<a href="#">关于百度</a>|<a href="#">About Baidu</a></div><!--版本--><div class="footerH">©2016 Baidu 使用百度前必读 京ICP证666号</div>
</div>
</body>
</html>

相关文章：

21.2 CSS 三大特性与页面布局

1. 开发者工具修改样式 使用开发者工具修改样式, 操作步骤如下: * 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择检查或者使用快捷键(一般是 F12 或者 CtrlShiftI)来打开开发者工具.* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 一般是Elements或者Elemen…...

编程日记 2023/8/28 7:48:13

MySQL 特殊语法时间格式以及Greadb连接

一、时间语法 DATE_FORMAT和to_char() select to_char(now(),%Y-%m-%d %H:%i:%s) from dual; select DATE_FORMAT(now(),%Y-%m-%d %H:%i:%s) from dual; 2.to_date() 和STR_TO_DATE(#{date},%Y-%m-%d ) select to_date(now(),yyyy-mm-dd hh24:mi:ss) from dual;...

编程日记 2023/8/28 7:47:12

Python(.pyc)反编译：pycdc工具安装与使用

本文将介绍如何将python的.pyc文件反编译成源码&#xff0c;以便我们对源码的学习与改进。pycdc工具安装 下载地址&#xff1a; 1、Github地址&#xff1a;https://github.com/zrax/pycdc &#xff0c;下载后需要使用CMake进行编译。 2、已下载好及编译好的地址&#xff1a;ht…...

编程日记 2023/8/28 7:46:11

山西电力市场日前价格预测【2023-08-28】

日前价格预测 预测明日&#xff08;2023-08-28&#xff09;山西电力市场全天平均日前电价为319.70元/MWh。其中&#xff0c;最高日前电价为371.80元/MWh&#xff0c;预计出现在19: 15。最低日前电价为278.59元/MWh&#xff0c;预计出现在13: 00。 价差方向预测 1&#xff1a; …...

编程日记 2023/8/28 7:45:10

python3/pip3 SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed

环境&#xff1a; mac os 背景&#xff1a; 电脑之前安装的是python3.9 &#xff0c; 现在升级到python3.10。 从python官网下载macos版本的python3.10 pkg。 双击安装。 程序使用aiohttp访问ebay 。 出错&#xff1a; aiohttp.client_exceptions.ClientConnectorCertifi…...

编程日记 2023/8/28 7:44:09

Python中的迭代器与生成器

文章目录 1、迭代器2、生成器3、列表推导式和生成器表达式4、enumerate() 在Python中&#xff0c;迭代器&#xff08;Iterator&#xff09;和生成器&#xff08;Generator&#xff09;是两种用于处理可迭代对象的重要工具。而可迭代对象包括列表&#xff0c;元组&#xff0c;字…...

编程日记 2023/8/28 7:43:08

简单着色器编写（下）

函数部分介绍完了&#xff0c;最后来介绍一下main函数中的部分。 std::string vertexShader "#version 330 core\n" "\n" "layout(location0)in vec4 position;" "\n" "void main()\n" "{\n&…...

编程日记 2023/8/28 7:42:07

go并发编程基础

go并发编程 1waitgroup WaitGroup就是等待所有的goroutine全部执行完毕&#xff0c;add方式和Down方法要配套使用 package mainimport ("fmt""sync" )func main() {var wq sync.WaitGroupwq.Add(100) //监控多少个goroutine执行结束for i: 0;i<100;…...

编程日记 2023/8/28 7:41:05

PHP之 导入excel表格时，获取日期时间变成浮点数

读取到的时间 float(0.20833333333333) 原格式 15:00:00 代码 if (Request::isPost()) {$file_url input(upfile); // 本地上传文件地址// 读取文件内容$local_file_url __dir__./../../../public.$file_url;// $spreadsheet new Spreadsheet();// $sheet $spreadsheet-…...

编程日记 2023/8/28 7:40:04

学习 Java 报表技术导入 Maven 依赖出错：jacob 无法下载、jasperreports 依赖错误

发生缘由 最近在做一个可视化项目&#xff0c;用到了 Java 报表技术。在跟着「黑马」课程导入 pom.xml 文件的时候提示下载依赖错误。 com.jacob 包无法下载Failed to read artifact descriptor for com.lowagie:itext:jar:2.1.7.js6 运行环境 电脑系统版本&#xff1a;Win…...

编程日记 2023/8/28 7:39:02

力扣-哈希-最长连续序列

题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; **输入&#xff1a;**nums [100,4,200,1,3,2] **输出&a…...

编程日记 2023/8/28 7:38:01

Java线程 - 详解(1)

一&#xff0c;创建线程 方法一&#xff1a;继承Thread类 class MyThread extends Thread{Overridepublic void run() {System.out.println("线程1");} }public class Test {public static void main(String[] args) {MyThread myThread new MyThread();myThread.…...

编程日记 2023/8/28 7:37:00

结构体-C语言（初阶）

目录 一、结构体声明 1.1 结构概念 1.2 结构声明 1.3 结构成员的类型 1.4 结构体变量的定义和初始化 二、结构体成员的访问 2.1 结构体变量访问成员 2.2 结构体指针访问指向变量的成员 三、结构体传参 一、结构体声明 1.1 结构概念 结构是一些值的集合&#xff0c;这些值称为…...

编程日记 2023/8/28 7:35:59

【网络】HTTPS的加密

目录 第一组&#xff0c;非对称加密第二组&#xff0c;非对称加密第三组&#xff0c;对称加密证书签名 HTTPS使用的是非对称加密加对称加密的方案 &#xff08;非对称加密&#xff1a;公钥加/解密&#xff0c;私钥解/加密&#xff09; &#xff08;对称加密&#xff1a;一组对称…...

编程日记 2023/8/28 7:34:56

Nacos安装指南

Nacos安装指南 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;https://github.com/alibaba/nacos GitHub的Release下载…...

编程日记 2023/8/28 7:33:54

java-Optional 类详解

目录 前言 Optional的构造方法 Optional的相关方法介绍 isPresent用法&#xff1a; get用法&#xff1a; filter用法&#xff1a; orElse用法&#xff1a; orElseGet用法 orElseThrow用法 map用法 flatMap用法&#xff1a; 前言 Optional 类是java8的新特性&#xff0…...

编程日记 2023/8/28 7:32:53

sql数据库怎么备份，sql 实时备份

在当今互联网时代&#xff0c;数据已经成为企业的核心资产。然而&#xff0c;数据的安全性和完整性面临硬件问题、软件故障、人工操作错误等各种威胁。为了保证数据的安全&#xff0c;实时备份已经成为公司必须采取的重要措施之一。下面我们就重点介绍SQL实时备份的重要实施方法…...

编程日记 2023/8/28 7:31:51

RK3399平台开发系列讲解（存储篇）Linux 存储系统的 I/O 栈

平台内核版本安卓版本RK3399Linux4.4Android7.1🚀返回专栏总目录 文章目录 一、Linux 存储系统全景二、Linux 存储系统的缓存沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍 Linux 存储系统的 I/O 原理。 一、Linux 存储系统全景 我们可以把 Linux 存储系…...

编程日记 2023/8/28 7:30:48

Java“牵手”天猫淘口令转换API接口数据，天猫API接口申请指南

天猫平台商品淘口令接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取天猫商品的标题、价格、库存、商品快递费用&#xff0c;宝贝ID&#xff0c;发货地&#xff0c;区域ID&#xff0c;快递费用&#xff0c;月销量、总销量、库存、详情描…...

编程日记 2023/8/28 7:29:47

postgresql 条件表达式

postgresql 条件表达式 简单CASE表达式搜索CASE表达式缩写函数nullif函数示例 coalesce函数 总结 简单CASE表达式 语法如下 case 表达式when 值1 then 结果1when 值2 then 结果2else 默认值 end;select e.first_name , e.last_name , case e.department_id when 90 then 管…...

编程日记 2023/8/28 7:28:42

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/7/6 10:53:20

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/6 13:15:09

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/7/6 2:59:21

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/7/6 22:08:14

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/6/28 14:04:35

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/6/25 12:03:49

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/7/6 14:39:04

DeepSeek越强，Kimi越慌？

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

编程新知 2025/7/7 2:31:52

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/7/6 0:15:33