前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天

P29 - P43

从此开始进入 CSS 的学习。前面都是 HTML 的学习。

CSS 的作用:美化。

HTML 只是规定了网页内容有哪些,在网页中显示的位置默认是从上到下显示,还带有默认效果,比如超链接有颜色有下划线,无序列表有小圆点。想要把这些内容变得更加漂亮,就需要 CSS。所以在制作网页时,既需要 HTML 又需要 CSS。

Day 3 主要学习基础选择器和文字控制属性。

基础选择器的作用就是找标签,想要美化内容就要先找到这个内容再去美化,就用选择器去找这个内容。

选择器是很多的,今天先从基础选择器开始学习。

文字控制属性是用来控制文字的外观,比如文字的颜色、大小等等。

在这里插入图片描述

CSS 初体验

用 CSS 美化内容其实就是给内容加样式而已。

CSS 有多种写法,比较容易上手的一种写法是直接将 CSS 放到 HTML 中,放到 head 标签里面,title 标签下面。

CSS 代码是给浏览器看的,浏览器解释翻译完了在网页上呈现给用户看。

既然是给浏览器看的,那么就要放到 head 标签里面,习惯上放到 title 标签下面。

现在要将 CSS 放到 HTML 内部,而 CSS 和 HTML 是两种语言,要想让 CSS 打入 HTML 内部,就需要在 HTML 的 head 标签内部,title 标签下部,添加 style 标签,在 style 标签内部去写 CSS 既可。

CSS 代码都是由选择器加大括号组成。选择器的作用是找目标标签,要美化谁就用选择器去找谁既可。

CSS 属性的写法是:

属性名:属性值;

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-初始css</title><style>/* 这里是CSS注释了,而不是HTML注释 *//* CSS 代码 *//* 选择器 {CSS 属性} *//* 属性名和属性值成对出现 → 键值对 */p {/* 文字颜色 */color: red;/* 文字大小,即字号 */font-size: 30px;}</style>
</head>
<body><p>初识 CSS</p>
</body>
</html>

效果:

在这里插入图片描述

CSS 引入方式

在这里插入图片描述

CSS 有三个常见的书写位置。

rel: relationship

href: hipertext reference

实际工作中,一般都是用外部样式表。

程序示例:

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-CSS引入方式</title><link rel="stylesheet" href="./my.css">
</head>
<body><p>这是 p 标签</p><!-- 行内写法 style = " CSS 属性" --><div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>

CSS 代码:

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {color: red;
}

效果:

在这里插入图片描述

选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-标签选择器</title><style>/* 特点:选中同名标签设置相同的样式,说明无法差异化同名标签的样式 */p {color: blue;}</style>
</head>
<body><p>这是 p 标签。</p><p>111111</p><p>222222</p>
</body>
</html>

效果:

在这里插入图片描述

类选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04-类选择器</title><style>.red{color: red;}.size{font-size: 50px;}</style>
</head>
<body><p>11111</p><!-- 一个类选择器可以给多个标签使用 --><p class="red">22222</p><!-- 一个标签可以使用多个类名,class 属性值写多个类名,类名用空格隔开 --><div class="red size">3333333</div>
</body>
</html>

效果:

在这里插入图片描述

id 选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-id选择器</title><style>#red {color: red;}</style>
</head>
<body><div id="red">这是 div 标签。</div>
</body>
</html>

效果:

在这里插入图片描述

通配符选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06-通配符选择器</title><style>*{color: red;}</style>
</head>
<body><p>这是 p 标签。</p><div>这是 div 标签。</div><h1>这是 h1 标签。</h1>
</body>
</html>

效果:

在这里插入图片描述

小练习

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07-画盒子</title><style>.div1 {width: 100px;height: 100px;background-color: brown;}.div2 {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div>
</body>
</html>

效果:

在这里插入图片描述

文字控制属性

文字控制属性的作用是美化文字。

在这里插入图片描述

字体大小

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08-字体大小</title><style>/* 谷歌浏览器文字默认大小是16px */p {/* font-size 属性必须要有单位,否则属性不生效 */font-size: 30px;}</style>
</head>
<body><p>测试字体大小。</p><div>测试默认字体大小。</div>
</body>
</html>

效果:

在这里插入图片描述

调出浏览器的调试工具的方法:在网页任意位置,右键:

在这里插入图片描述

出现的这个面板叫做浏览器的调试工具:

在这里插入图片描述

点击左上角的这个小箭头,使其处于高亮状态:

在这里插入图片描述

将鼠标放置在想要查看格式的位置,不要点击,只需要将鼠标放在这个位置既可。

在这里插入图片描述

可以看出,文字大小确实是 16px。

字体粗细

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09-字体粗细</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>h3 标题</h3><div>div 标签</div>
</body>
</html>

效果:

在这里插入图片描述

字体倾斜

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10-字体倾斜</title><style>em{font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>em 标签。</em><div>div 标签。</div>
</body>
</html>

效果:

在这里插入图片描述

行高

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11-行高</title><style>p {/* line-height: 30px; */line-height: 2;}</style>
</head>
<body><p>一百五十名警察和侦探包围了他那位于顶层的藏身之处,这些警察在房顶上凿孔,他们试图用催泪瓦斯把克劳利——这位杀害警察的人——熏出来。接着警察把机关枪架设在周围的建筑物上,在超过一小时的时间内,这一处纽约市的高档住宅区之一,回响起啪啪的手枪声和嗒嗒嗒的机枪声。克劳利蜷缩在一个沙发后面不停地向警察射击,当时有上万激动的群众围观这一战斗场面。以前在纽约市的街道上从来没有上演过这样的一幕。</p>
</body>
</html>

效果:

在这里插入图片描述

在这里插入图片描述

行高按照定义,是一行文字的高度加上该行文字的上间距和该行文字的下间距,每一行文字的上间距都是相同的,每一行文字的下间距都是相同的,所以行高也等于一行文字的高度加上该行文字的下间距再加上该行文字的下一行文字的上间距,也就是一行文字的顶部到下一行文字的顶部,当然也等于一行文字的底部到下一行文字的底部

行高 - 垂直居中

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12-行高-垂直居中</title><style>div {height: 100px;background-color: skyblue;/* 注意:只能是单行文字垂直居中 *//* 如果是多行文字,只需要加行高,拉开两行文字之间的距离既可 */line-height: 100px;}</style>
</head>
<body><div>文字</div>
</body>
</html>

效果:

在这里插入图片描述

字体

在这里插入图片描述

无衬线字体:sans-serif

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13-字体族</title><style>div {font-family: 楷体;}</style>
</head>
<body><div>字体族</div>
</body>
</html>

效果:

在这里插入图片描述

font 复合属性

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>14-font属性</title><style>/* 文字倾斜、文字加粗、字体大小是 30px,行高 2 倍,楷体 */div {font: italic 700 30px/2 楷体;}</style>
</head>
<body><div>测试 font 属性</div>
</body>
</html>

效果:

在这里插入图片描述

文本缩进

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15-文本缩进</title><style>p {text-indent: 2em;font-size: 20px;}</style>
</head>
<body><p>推开丁仪那套崭新的三居室的房门,汪淼闻到了一股酒味,看到丁仪躺在沙发上,电视开着,他的双眼却望着天花板。汪淼四下打量了一下,看到房间还没怎么装修,也没什么家具和陈设,宽大的客厅显得很空,最显眼的是客厅一角摆放的一张台球桌。汪淼在浏览器的地址栏中输入那个很容易记住的游戏网址:www.threebody.com,网页上显示该游戏只支持V装具方式。汪淼想起了纳米中心的职工娱乐室里好像有一套V装具,就走出已经空荡荡的中心实验大厅,去值班室要了钥匙,在娱乐室中穿过一排台球桌和健身器材,在一台电脑旁找到了V装具,费了很大劲才把感应服穿上,然后戴上显示头盔,启动电脑。荒原依旧,但V装具感应服中的压缩机咝咝地启动了,汪淼感到一股逼人的寒气。前方出现了两个行走的人影,在曙光的背景前呈黑色的剪影。汪淼追了上去,他看到两人都是男性,披着破烂的长袍,外面还裹着一张肮脏的兽皮,都带着一把青铜时代那种又宽又短的剑,其中一人背着一只有他一半高的细长的木箱子。那人扭头看看汪淼,他的脸像那兽皮一样脏和皱,双眼却很有神,眸子映着曙光。“冷啊。”他说。</p>
</body>
</html>

效果:

在这里插入图片描述

文本对齐方式

在这里插入图片描述

text-align 这个属性调整的是内容的对齐方式,不影响标签的位置。即改变的文字内容的位置而不是改变了标签的位置。

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16-文本对齐方式</title><style>h1 {text-align: center;}</style>
</head>
<body><h1>标题文字</h1>
</body>
</html>

效果:

在这里插入图片描述

图片对齐方式

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>17-图片对齐方式</title><style>div {text-align: center;}</style>
</head>
<body><div><img src="./images/1.jpg" alt=""></div>
</body>
</html>

效果:

在这里插入图片描述

文本修饰线

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18-文本修饰线</title><style>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a 标签,去掉下划线</a><div>div 标签,添加下划线</div><p>p 标签,添加删除线</p><span>span 标签,添加顶划线</span>
</body>
</html>

效果:

在这里插入图片描述

color 文字颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>19-文字颜色</title><style>h1{color: red;}h2{color: rgb(0, 255, 0);}h3{/* 0 表示完全透明,1 表示完全不透明 */color: rgba(0, 255, 0, 0.5);}h4 {/* 6 位可以简写为 3 位,相同的两位可以只写一个 */color: #0000ff;/* 相当于 00f */}</style>
</head>
<body><h1>h1 标签</h1><h2>h2 标签</h2><h3>h3 标签</h3><h4>h4 标签</h4>
</body>
</html>

效果:

在这里插入图片描述

调试工具 - 谷歌浏览器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>20-调试工具</title><style>div {color: red;font-size: 40; /* 没有单位 px,是不起作用的 */}</style>
</head>
<body><div>调试文字</div>
</body>
</html>

效果:

在这里插入图片描述

在这里插入图片描述

上面部分是 HTML 代码,下面部分是作用在这部分 HTML 代码上的 CSS 代码。

将代码修改正确后,刷新网页。

在这里插入图片描述

在这里插入图片描述

综合案例一:新闻详情

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>21-综合案例 —— 新闻详情</title><style>h1{text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {text-align: center;}.color{color: #999;}.color2 {color: #333;}.indent {text-indent: 2em;}.size1{font-size: 14px}.size2{font-size: 18px}div {color: #999;font-size: 14px}.pic {text-align: center;}</style>
</head>
<body><h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1><p class="color size1">来源:央视网 | 2222年12月12日 12:12:12</p><!-- <div>来源:央视网 | 2222年12月12日 12:12:12</div> --><p class="indent size2 color2"><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。湖北省通过大力推广新品种水稻,建设高标准农田等一系列措施,为秋粮稳产提供有力支撑。</p><p class="indent size2 color2">中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p><div class="pic"><img src="./1.jpg" alt=""></div><p class="indent size2 color2">王化林说的新品种,是湖北省研发的杂交水稻“华夏香丝”,不仅产量高,还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内,像“华夏香丝”这样抗旱节水的品种还有20多个,这些水稻新品将在荆门全面推广,确保来年增产增收。</p><p class="indent size2 color2">此外,湖北还大力推进高标准农田建设。截至今年6月,已建成3980万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p>
</body>
</html>

综合案例二:CSS 简介

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>22-综合案例二:CSS 简介</title><style>h1 {color: #333;}p {color: #444;text-indent: 2em;font-size: 14px;line-height: 30px;}a {color: #0069c2;}li {color: #444;font-size: 14px;line-height: 30px;}</style>
</head>
<body><h1>CSS(层叠样式表)</h1><p>层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 <a href="#">样式表</a> 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p><p><strong>CSS 是开放网络的核心语言之一,</strong>由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。</p><ul><li>CSS 介绍 如果你是 Web 开发的新手,请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li><li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程,它们覆盖了全部基础知识,能使你在 CSS 之路上从初出茅庐到游刃有余。</li><li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ,描述了 CSS 的各个属性与概念。</li></ul>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863413.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS Flex弹性布局

一、传统布局与flex布局 1、传统布局 2、flex布局 二、flex布局原理 1、布局原理 2、flex布局体验 三、flex布局父项常见属性 1、常见的父项属性 2、flex-direction设置主轴的方向 3、justify-content 设置主轴上的子元素排列方式 4、flex-wrap 设置子元素是否换行 …

二叉树从根节点出发的所有路径

二叉树从根节点出发的所有路径 看上图中 二叉树结构 从根节点出发的所有路径 如下 6->4->2->1 6->4->2->3 6->4->5 6->8->7 6->8->9 逻辑思路&#xff1a; 按照先序遍历 加 回溯法 实现 代码如下 // 调用此方法&#xff0c;将根节点传递…

上位机图像处理和嵌入式模块部署(mcu 项目1:上位机编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过要做一个报警器。如果只是简单做一个报警器呢&#xff0c;这个基本上没有什么难度。这里&#xff0c;我们就适当提高一下…

Navicat上新啦

前言 Navicat&#xff0c;在数据库界&#xff0c;几乎是一个神奇的存在&#xff0c;似乎统治了数据库开发工具的“一片天”。且看下图&#xff1a; 红的蓝的绿的橙的…&#xff0c;可以说&#xff0c;留给它的color不多了。 那么商业BI到服务监控、从云托管到云协作&#xff…

短剧App开发的全攻略

短剧App开发的全攻略可以概括为以下几个关键步骤&#xff1a; 1、市场调研与需求分析 进行市场调研&#xff0c;研究目标用户群体&#xff0c;了解他们的需求和偏好。 观察竞争对手的App&#xff0c;分析他们的优点和缺点&#xff0c;以此为基础来制定自己的开发计划。 确定App…

Zookeeper节点ACL权限设置—digest模式

ACL全称为Access Control List&#xff08;访问控制列表&#xff09;&#xff0c;用于控制资源的访问权限。ZooKeeper使用ACL来控制对其znode&#xff08;ZooKeeper数据树的数据节点&#xff09;的访问。 zk利用ACL策略控制节点的访问权限: CREATE c 可以创建子节点 DELETE …

3D打印随形水路在注塑生产中的显著优势

3D打印技术在模具制造中已崭露头角&#xff0c;特别是在注塑生产中&#xff0c;3D打印随形水路的应用正变得日益普遍。 首先&#xff0c;该技术能精准优化模具温度。3D打印随形水路随形冷却的设计让模具温度更加均匀&#xff0c;水路更贴近产品&#xff0c;有效提升产品品质和缩…

k8s如何使用 HPA 实现自动扩展

使用Horizontal Pod Autoscaler (HPA) 实验目标&#xff1a; 学习如何使用 HPA 实现自动扩展。 实验步骤&#xff1a; 创建一个 Deployment&#xff0c;并设置 CPU 或内存的资源请求。创建一个 HPA&#xff0c;设置扩展策略。生成负载&#xff0c;观察 HPA 如何自动扩展 Pod…

redis实战-缓存穿透问题及解决方案

定义理解 缓存穿透&#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远都不会生效&#xff08;只有数据库查到了&#xff0c;才会让redis缓存&#xff0c;但现在的问题是查不到&#xff09;&#xff0c;会频繁的去访问数据库。 解决…

系统运维面试总结(系统权限)

系统运维面试总结&#xff08;系统权限&#xff09; 一、权限优化简述Linux权限划分原则二、备份策略三、Raid四、资源查看五、Linux启动流程 一、权限优化简述Linux权限划分原则 ckhunter也是一款常用的Linux杀毒软件 不可修改但可删除 二、备份策略 供参考较为全面的备份方案…

【Redis】SpringBoot连接Redis

1. 创建项目并配置文件 勾选NoSQL中的 Spring Data Redis。当然,把 Web 中的 SpringWeb 也勾选一下.方便写接口进行后续测试。 在 application.yml 中配置 2. 不同数据类型使用Demo 在SpringBoot中&#xff0c;为我们提供了StringRedisTemplate类&#xff0c;供我们处理一些文…

期末重现题型--错题集

看书里的定义&#xff1a;链表是一种常见而重要的动态存储分布的数据结构。它由若干个同一结构类型的“结点”依次串联而成的。

keil软件的一些使用技巧

1.MDK 的 TAB 键支持块操作 也就是可以让一片代码整体右移固定的几个位&#xff0c;也可以通过 SHIFTTAB 键整体左移固定的几个位。 2.快速注释与快速消注释 就是先选中你要注释的代码区&#xff0c;然后右键&#xff0c;选择Advanced→Comment Selection 就可以了。 3.快速打…

ComfyUI效率节点Efficient示例

文生图工作流 Efficient Loader节点用于高效加载和缓存模型 ckpt_name&#xff1a;选择要加载的检查点模型的名称。通常选择你的主要模型名称 vae_name&#xff1a;定义要使用的VAE&#xff08;变分自编码器&#xff09;模型。一般选择与你的主要模型匹配的VAE&#xff0c;或者…

Open vSwitch 行为匹配的实现

一、Datapath 模块的行为匹配 在 Open vSwitch 的数据包转发流程中&#xff0c;存在快速路径和慢速路径两种模式&#xff0c;如下图所示&#xff1a; 其中&#xff0c;快速路径直接在 Datapath 模块完成行为匹配&#xff0c;将数据包转发出去。而慢速路径的数据包无法在 Datapa…

厦门新能安科技Ampace校招实习待遇及Verify测评SHL演绎数字推理历年真题题库

一、厦门新能安科技公司介绍 厦门新能安科技有限公司主要业务包括电池制造和销售&#xff0c;电容器及其配套设备制造与销售&#xff0c;电池零配件生产与销售。此外&#xff0c;公司还提供包括技术服务、技术开发、技术咨询、技术交流、技术转让和技术推广在内的全方位服务。公…

HarmonyOS Next开发学习手册——选项卡 (Tabs)

当页面信息较多时&#xff0c;为了让用户能够聚焦于当前显示的内容&#xff0c;需要对页面内容进行分类&#xff0c;提高页面空间利用率。 Tabs 组件可以在一个页面内快速实现视图内容的切换&#xff0c;一方面提升查找信息的效率&#xff0c;另一方面精简用户单次获取到的信息…

微软推出集成GPT-4o的文本转语音虚拟数字人服务

微软近日宣布&#xff0c;其全新的文本转语音虚拟数字人服务正式上线&#xff0c;并集成了GPT-4o技术。这一服务为用户提供了创建实时互动数字人的可能。通过先进的自然语言处理技术&#xff0c;数字人能够将文本转化为自然流畅的语音&#xff0c;并配以生动的虚拟形象&#xf…

[数据集][目标检测]猪只状态吃喝睡站检测数据集VOC+YOLO格式530张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;530 标注数量(xml文件个数)&#xff1a;530 标注数量(txt文件个数)&#xff1a;530 标注类别…

在Redis中使用Lua脚本实现多条命令的原子性操作

Redis作为一个高性能的键值对数据库&#xff0c;被广泛应用于各种场景。然而&#xff0c;在某些情况下&#xff0c;我们需要执行一系列Redis命令&#xff0c;并确保这些命令的原子性。这时&#xff0c;Lua脚本就成为了一个非常实用的解决方案。 问题的提出 假设我们有一个计数…