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

前端 | （ 十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新

news 2026/2/7 12:24:37

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

系列笔记：

  • 【HTML4】（一）前端简介
  • 【HTML4】（二）各种各样的常用标签
  • 【HTML4】（三）表单及HTML4收尾
  • 【CSS2】（四）CSS基础及CSS选择器
  • 【CSS2】（五）CSS三大特性及常用属性
  • 【CSS2】（六）CSS盒子模型
  • 【CSS2】（七）浮动
  • 【CSS2】（ 八）定位与布局
  • 【实操】（ 九）尚品汇实操练习
  • 【HTML5】（ 十）HTML5简介及相关新增属性
  • 【CSS3】（ 十一）CSS3简介及基本语法（上）| 相关新增属性
  • 【CSS3】（ 十二）CSS3简介及基本语法（中）| 变换、过渡与动画
  • 【CSS3】 （十三）CSS3简介及基本语法（下）| 伸缩盒模型

文章目录

  • 📚CSS3简介
    • 🐇CSS3概述
    • 🐇CSS3私有前缀
  • 📚CSS3基本语法
    • 🐇CSS3新增长度单位
    • 🐇CSS3新增颜色设置方式
    • 🐇CSS3新增选择器
    • 🐇CSS3新增盒模型相关属性
      • ⭐️`box-sizing`怪异盒模型
      • ⭐️`resize`调整盒子大小
      • ⭐️`box-shadow`盒子模型
      • ⭐️`opacity`不透明度
    • 🐇CSS3新增背景属性
      • ⭐️`background-origin`
      • ⭐️`background-clip`
      • ⭐️`background-size`
      • ⭐️background复合属性
      • ⭐️多背景图
    • 🐇CSS3新增边框属性
      • ⭐️边框圆角
      • ⭐️边框外轮廓
    • 🐇CSS3新增文本属性
      • ⭐️文本阴影
      • ⭐️文本换行
      • ⭐️文本溢出
      • ⭐️文本修饰
      • ⭐️文本描边
    • 🐇CSS3新增渐变
      • ⭐️线性渐变
      • ⭐️径向渐变
      • ⭐️重复渐变
      • ⭐️渐变小案例
    • 🐇web字体
      • ⭐️基本用法
      • ⭐️定制字体
      • ⭐️字体图标

⭐️前文回顾：前端 | （ 十）HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p160-p170，本文对应p171-p178
⭐️补充网站：W3school，MDN

📚CSS3简介

🐇CSS3概述

在这里插入图片描述

🐇CSS3私有前缀

在这里插入图片描述
在这里插入图片描述

📚CSS3基本语法

🐇CSS3新增长度单位

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>新增长度单位</title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: deepskyblue;}.box2 {width: 20vw;height: 20vh;background-color: green;}.box3 {width: 20vmax;height: 20vmin;background-color: orange;}</style>
</head>
<body><div class="box1">像素</div><div class="box2">vw和vh</div><div class="box3">vmax</div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增颜色设置方式

前端 | （五）CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

在这里插入图片描述

🐇CSS3新增选择器

前端 | （四）CSS基础及CSS选择器 | 尚硅谷前端html+css零基础教程2023最新

在这里插入图片描述

🐇CSS3新增盒模型相关属性

⭐️box-sizing怪异盒模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>box-sizing</title><style>.box1 {width: 200px;height: 200px;background-color: deepskyblue;padding: 5px;border: 5px solid black;margin-bottom: 20px;}.box2 {width: 200px;height: 200px;background-color: gray;padding: 5px;border: 5px solid black;box-sizing: border-box;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

在这里插入图片描述

⭐️resize调整盒子大小

实际开发中有什么意义嘛？好像没有👀 了解一下~

  • resize必须和overflow配合！

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>resize</title><style>.box1 {width: 400px;height: 400px;background-color: orange;resize: both;overflow: scroll;}.box2 {width: 800px;height: 600px;background-color: skyblue;}</style>
</head>
<body><div class="box1"><div class="box2">看右下角！可以调整大小！</div></div>
</body>
</html>

在这里插入图片描述

⭐️box-shadow盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>box-shadow</title><style>.box1 {width: 400px;height: 400px;background-color: orange;margin: 0 auto;margin-top: 100px;font-size: 40px;/* 写两个值，含义：水平位置 垂直位置 *//* box-shadow: 10px 10px; *//* 写三个值，含义：水平位置 垂直位置 阴影的颜色 *//* box-shadow: 10px 10px blue; *//* 写三个值，含义：水平位置 垂直位置 模糊程度 *//* box-shadow: 10px 10px 20px; *//* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 *//* box-shadow: 10px 10px 20px blue; *//* 写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 *//* box-shadow: -10px -10px 20px 10px blue; *//* 写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 *//* box-shadow: 10px 10px 20px 10px blue inset; */position: relative;top: 0;left: 0;transition: 0.4s linear all ;}.box1:hover {box-shadow: 0px 0px 20px black;top: -1px;left: 0;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️opacity不透明度

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>opacity</title><style>.box1 {position: relative;}h1 {position: absolute;top: 100px;left: 0;background-color: black;color: white;width: 400px;line-height: 100px;text-align: center;font-size: 40px;opacity: 0.5;}</style>
</head>
<body><div class="box1"><img src="../images/你瞅啥.jpg" alt=""><h1>你瞅啥</h1></div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增背景属性

⭐️background-origin

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_background-origin</title><style>.box1 {width: 400px;height: 400px;background-color: skyblue;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed pink;color: white;background-image: url('../images/bg01.jpg');background-repeat: no-repeat;/* 从border区域开始 */background-origin: border-box;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️background-clip

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>background-clip</title><style>.box1 {width: 400px;height: 400px;line-height: 400px;background-color: skyblue;margin: 0 auto;font-size: 125px;font-weight: bold;padding: 50px;border: 50px dashed pink;color: transparent;background-image: url('../images/bg02.jpg');background-repeat: no-repeat;background-origin: border-box;/* 好好看的效果 *//* 无论是背景的颜色还是背景图片都受此元素指挥 *//* 前提是文字颜色设置为透明色 */-webkit-background-clip: text;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️background-size

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03_background-size</title><style>.cover_like {width: 400px;height: 400px;border: 1px solid black;background-image: url('../images/bg03.jpg');background-size: cover;}.contain_like{width: 400px;height: 400px;border: 1px solid black;background-image: url('../images/bg03.jpg');background-size: contain;}</style>
</head>
<body><div class="cover_like"></div><hr><div class="contain_like"></div>
</body>
</html>

在这里插入图片描述

⭐️background复合属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_background复合属性</title><style>.box1 {width: 400px;height: 400px;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.7);/* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */background:skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

⭐️多背景图

CSS3允许元素设置多个背景图片

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>多背景图</title><style>div {width: 400px;height: 400px;border: 1px solid black;background: url('../images/bg-lt.png') no-repeat left top,url('../images/bg-rt.png') no-repeat right top,url('../images/bg-lb.png') no-repeat left bottom,url('../images/bg-rb.png') no-repeat right bottom;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增边框属性

⭐️边框圆角

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_边框圆角</title><style>div {width: 400px;height: 400px;border: 2px solid black;margin: 0 auto;border-radius:100px;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

⭐️边框外轮廓

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>边框外轮廓</title><style>.box1 {width: 400px;height: 400px;padding: 10px;border: 10px solid black;background-color: gray;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 外轮廓与边框的距离 */outline-offset: 30px;/* 复合属性 */outline:20px solid orange;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增文本属性

⭐️文本阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文本阴影</title><style>body {background-color: black;}h1 {font-size: 80px;text-align: center;color: white;text-shadow: 0px 0px 20px red;font-family: '翩翩体-简';}</style>
</head>
<body><h1>红浪漫洗浴欢迎您的光临</h1>
</body>
</html>

在这里插入图片描述

⭐️文本换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_文本换行</title><style>div {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;white-space: pre-wrap;}</style>
</head>
<body><div>山回路转不见君           雪上空留马行处山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处</div>
</body>
</html>

在这里插入图片描述

⭐️文本溢出

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03_文本溢出</title><style>ul {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;list-style: none;padding-left: 0;padding: 10px;}li {margin-bottom: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
</head>
<body><ul><li>焦点访谈：隐形冠军 匠心打造 分毫必争</li><li>我，嫁到日本才发现，女性活得真憋屈，体毛不能有，放屁也不自由</li><li>高洪波无缘！足协盟主热门人选曝光，3选1，冷门人物或成黑马杀出</li><li>《狂飙》爆火以后“疯驴子”被骂上热搜：跪着赚钱丢人吗</li><li>气温猛降15℃，冷空气再来袭！这些地方迎大范围降雨！“虚高”气温大跳水！！！！！</li></ul>
</body>
</html>

在这里插入图片描述

⭐️文本修饰

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_文本修饰</title><style>h1 {font-size: 100px;/* text-decoration-line: overline; *//* text-decoration-style: dashed; *//* text-decoration-color: blue; */text-decoration: overline wavy blue;}</style>
</head>
<body><h1>你好啊，欢迎来到尚硅谷学习</h1>
</body>
</html>

在这里插入图片描述

⭐️文本描边

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05_文本描边</title><style>h1 {font-size: 100px;/* -webkit-text-stroke-color:red; *//* -webkit-text-stroke-width:3px; *//* -webkit-text-stroke-width:3px; */-webkit-text-stroke:3px black;color: transparent;}</style>
</head>
<body><h1>lalayouyixixixi！</h1>
</body>
</html>

在这里插入图片描述

🐇CSS3新增渐变

⭐️线性渐变

  • 多个颜色之间的渐变，默认从上到下渐变。
    在这里插入图片描述
  • 使用关键词设置线性渐变的方向。
    在这里插入图片描述
  • 使用角度设置线性渐变的方向
    在这里插入图片描述
  • 调整开始渐变的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_线性渐变</title><style>.box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;text-align: center;line-height: 200px;}.box1 {background-image: linear-gradient(red,yellow,green);}.box2 {background-image: linear-gradient(to right top,red,yellow,green);}.box3 {background-image: linear-gradient(20deg,red,yellow,green);}.box4 {background-image: linear-gradient(red 50px,yellow 100px,green 150px);}.box5 {background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);font-size: 80px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;-webkit-background-clip: text;}</style>
</head>
<body><div class="box box1">默认情况（从上到下）</div><div class="box box2">通过关键词调整线性渐变的方向</div><div class="box box3">通过角度调整线性渐变的方向</div><div class="box box4">调整线性渐变的区域</div><div class="box box5">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️径向渐变

  • 多个颜色之间的渐变，默认从圆心四散。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_径向渐变</title><style> .box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;margin-top: 20px;}.box1 {background-image: radial-gradient(red,yellow,green);}.box2 {background-image: radial-gradient(at right top,red,yellow,green);}.box3 {background-image: radial-gradient(at 100px 50px,red,yellow,green);}.box4 {background-image: radial-gradient(circle,red,yellow,green);}.box5 {background-image: radial-gradient(200px 200px,red,yellow,green);}.box6 {background-image: radial-gradient(red 50px,yellow 100px,green 150px);}.box7 {background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);}</style>
</head>
<body><div class="box box1">默认情况</div><div class="box box2">通过关键词调整径向渐变圆的圆心</div><div class="box box3">通过像素值调整径向渐变圆的圆心</div><div class="box box4">通过circle关键字调整为正圆</div><div class="box box5">通过像素值调整为正圆</div><div class="box box6">调整径向渐变的区域</div><div class="box box7">综合写法</div>
</body>
</html>

在这里插入图片描述

⭐️重复渐变

在这里插入图片描述

⭐️渐变小案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_渐变小案例</title><style>.box1 {width: 300px;height: 400px;padding: 20px;border: 1px solid black;background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);background-clip: content-box;}.box2 {width: 200px;height: 200px;border-radius: 50%;background-image: radial-gradient(at 80px 80px,white,#333);}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

在这里插入图片描述

🐇web字体

⭐️基本用法

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。

  • 语法（简写方式）

    @font-face {
font-family: "情书字体";
src: url('./方正手迹.ttf');
}

  • 语法（高兼容性）

    @font-face {
font-family: "atguigu";
font-display: swap;
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,
Android*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>@font-face {font-family: "情书字体";src: url('./font1/方正手迹.ttf');}@font-face {font-family: "atguigu";font-display: swap;src: url('./font2/webfont.eot'); /* IE9 */src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('./font2/webfont.woff2') format('woff2'),url('./font2/webfont.woff') format('woff'), /* chrome、firefox */url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */}.t1 {font-size: 100px;font-family: '情书字体';}.t2 {font-size: 100px;font-family: 'atguigu';}</style>
</head>
<body><h1 class="t1">春风得意马蹄疾，不信人间有别离</h1><h1 class="t2">春风得意马蹄疾，不信人间有别离</h1>
</body>
</html>

在这里插入图片描述

⭐️定制字体

  • 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
  • 可使用阿里 Web 字体定制工具

⭐️字体图标

  • 相比图片更加清晰。
  • 灵活性高，更方便改变大小、颜色、风格等。
  • 兼容性好， IE 也能支持。
  • 阿里图标官网地址
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>/* 第一步 */@font-face {font-family: 'iconfont';src: url('./font3/iconfont.woff2?t=1676857973138') format('woff2'),url('./font3/iconfont.woff?t=1676857973138') format('woff'),url('./font3/iconfont.ttf?t=1676857973138') format('truetype');}/* 第二步 */.iconfont {font-family: "iconfont" !important;font-size: 100px;}</style>
</head>
<body><span class="iconfont">&#xe85c;</span><span class="iconfont">&#xe85d;</span><span class="iconfont">&#xe85e;</span><span class="iconfont">&#xe85f;</span>
</body>
</html>

在这里插入图片描述

相关文章：

前端 | （ 十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 系列笔记&#xff1a; 【HTML4】&#xff08;一&#xff09;前端简介【HTML4】&#xff08;二&#xff09;各种各样的常用标签【HTML4】&#xff08;三&#xff09;表单及HTML4收尾…...

编程日记 2023/7/28 2:15:44

Kafka入门到起飞系列 - 副本机制，什么是副本因子呢？

我们一直在讲一个主题会有多个分区&#xff0c;这多个分区可以分布在一台服务器上&#xff0c;也可以分布在多台服务器上&#xff0c;还可以增加分区&#xff08;Kafka目前只支持分区&#xff09;&#xff0c;这是Kafka提供的一种横向扩展的手段 比如我们创建了一个主题&#x…...

编程日记 2023/7/28 2:14:43

2023年基准Kubernetes报告：6个K8s可靠性失误

云计算日益成为组织构建应用程序和服务的首选目的地。尽管一年来经济不确定性的头条新闻主要集中在通货膨胀增长和银行动荡方面&#xff0c;但大多数组织预计今年的云使用和支出将与计划的相同&#xff08;45%&#xff09;&#xff0c;或高于计划的&#xff08;45%&#xff09;…...

编程日记 2023/7/28 2:13:42

程序员面试系列，k8s常见面试题

原文链接 一、什么是 Kubernetes&#xff1f;解释其主要功能和用途。 Kubernetes&#xff08;通常简称为K8s&#xff09;是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。它最初由谷歌开发&#xff0c;并于2014年捐赠给了云原生计算基金会&a…...

编程日记 2023/7/28 2:12:40

docker版jxTMS使用指南：站点的调整

本文讲解4.4版jxTMS中的站点的调整&#xff0c;整个系列的文章请查看&#xff1a;[docker版jxTMS使用指南&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请…...

编程日记 2023/7/28 2:11:39

element ui input 深层循环v-model绑定默认数据删除不了的情况

例子&#xff1a; 在项目开发中遇到的&#xff0c;简单记录一下 <el-input style"width: 180px"v-model"item.dataForm"input"handleChangeDataForm($event)"type"number"placeholder"请输入1-2的数值"size"smal…...

编程日记 2023/7/28 2:10:37

GBDT的参数空间与超参数优化

目录 1. 默认参数下的GBDT与其它算法的对比 2. 基于TPE对GBDT进行优化 step1&#xff1a;建立benchmark step2&#xff1a;定义参数init需要的算法 step3&#xff1a;定义目标函数、参数空间、优化函数、验证函数 step4&#xff1a;训练贝叶斯优化器 step5&#xff1a;修…...

编程日记 2023/7/28 2:09:34

多线程练习——抽奖箱

题目&#xff1a; 分析以下需求&#xff0c;并用代码实现&#xff1a; 有一个抽奖池,该抽奖池中存放了奖励的金额,该抽奖池中的奖项为 {10,5,20,50,100,200,500,800,900,2,80,300,700};创建两个抽奖箱(线程)设置线程名称分别为“抽奖箱1”&#xff0c;“抽奖箱2”&#xff0c;随…...

编程日记 2023/7/28 2:08:32

RK3399平台开发系列讲解（内核调试篇）Valgrind 内存调试与性能分析

🚀返回专栏总目录 文章目录 一、为什么要学会Valgrind二、什么是内存泄露三、Valgrind的移植四、Valgrind相关参数沉淀、分享、成长，让自己和他人都能有所收获！😄 📢Valgrind 是一个开源的内存调试和性能分析工具，用于帮助开发者找出程序中的内存错误，如内存泄漏、使…...

编程日记 2023/7/28 2:07:31

Windows 11的最新人工智能应用Windows Copilot面世！

Windows Copilot是Windows 11预览版中的一项AI辅助功能。 Windows 11还包括设置应用程序的更改&#xff0c;更广泛的支持压缩文件格式。 上个月&#xff0c;微软宣布将继续其将ChatGPT应用于所有产品的冒险之旅&#xff0c;推出了名为Copilot的新Windows 11功能。几个月前&…...

编程日记 2023/7/28 2:06:30

Mac 预览（Preview）丢失PDF标注恢复

感谢https://blog.csdn.net/yaoyao_chen/article/details/127462497的推荐&#xff01; 辛苦用预览在pdf上做的阅读标记&#xff0c;关闭后打开全丢失了&#xff0c;推荐尝试下网站导入文件进行恢复&#xff1a; 直接使用该网页应用PDF Annotation Recovery 或者访问该项目&a…...

编程日记 2023/7/28 2:05:29

4.5. 方法的四种类型

文章目录 1、无参数无返回值的方法2、有参数无返回值的方法3、有返回值无参数的方法4、有返回值有参数的方法5、return 在无返回值方法的特殊使用 1、无参数无返回值的方法 // 无参数无返回值的方法(如果方法没有返回值&#xff0c;不能不写&#xff0c;必须写void&#xff0c…...

编程日记 2023/7/28 2:04:27

四旋翼无人机使用教程

文章目录 前言一、检查遥控器电源开关混控拨码开关微调开关飞行模式刹车开关行程开关接收机对码 二、检查飞机检查接线 三、解锁并飞行 前言 PX4固件 QGC地面站 Pixhwak飞控 Mc6c遥控器 开源飞控博大精深&#xff0c;欢迎广大爱好者加博主微信名片&#xff0c;一起学习交流。…...

编程日记 2023/7/28 2:03:26

优化 PHP 数据库查询性能

优化 PHP 数据库查询性能可以从以下几个方面入手&#xff1a; 使用索引&#xff1a;在数据库中创建适当的索引可以大大提高查询性能。索引可以加快数据的查找速度&#xff0c;特别是在大型数据库中。选择合适的数据类型&#xff1a;选择正确的数据类型可以减少存储空间的占用&…...

编程日记 2023/7/28 2:02:24

vue 使用stompjs websocket连接rabbitmq

1. 首先确保rabbitmq服务已开启web-stomp 1.1 登录rabbitmq web控制台 1.2 在overview目录下 下拉找到Ports and contexts 看列表有没有http/web-stomp 1.3 如果没有需要开启 window/centos 进入rabbitmq安装目录的bin目录下执行rabbitmq-plugins enable rabbitmq_web_stomp ra…...

编程日记 2023/7/28 2:01:23

com.android.ide.common.signing.KeytoolException:

签名没问题但是提示Execution failed for task :app:packageDebug. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable > com.android.ide.common.signing.KeytoolException: Failed to read ke…...

编程日记 2023/7/28 2:00:22

leetcode 1870. Minimum Speed to Arrive on Time（准时到达的最小速度）

需要找一个speed, 使得dist[i] / speed 加起来的时间 < hour, 而且如果前一个dist[i] / speed求出来的是小数&#xff0c;必须等到下一个整数时间才计算下一个。 speed最大不会超过107. 不存在speed满足条件时返回-1. 思路&#xff1a; 如果前一个dist[i] / speed求出来的…...

编程日记 2023/7/28 1:59:20

本地非文字资源无法加载

目录 方法A.静态/动态绑定路径 方法B.require导入&#xff08;运行时加载&#xff09; 方法C.import导入&#xff08;x&#xff09;&#xff08;编译时加载&#xff09; 方法D.ref直接操作元素赋值&#xff08;x&#xff09; 相关知识 import和requir区别 模板路径&#…...

编程日记 2023/7/28 1:58:18

Java电子招投标采购系统源码-适合于招标代理、政府采购、企业采购

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看…...

编程日记 2023/7/28 1:57:16

万向节死锁

要理解万向节死锁的产生原因&#xff0c;首先要理解欧拉角变换&#xff0c;欧拉角变换是基于最初始的坐标进行变换而非变换后的坐标进行变换。 欧拉角变换需要空间中的三个角&#xff08;即变换后每个轴的偏移量&#xff09;&#xff0c;另外还有每个轴的变换顺序。值得注意的…...

编程日记 2023/7/28 1:56:15

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/1 22:51:12