【JAVA】CSS2：样式、选择器、伪类、颜色、字体、边框、列表、背景、盒子、布局、浮动

本文介绍了CSS样式、选择器、伪类、像素、颜色、字体、边框、列表、表格属性、背景、盒子、布局与浮动

1.样式

1.1 行内样式

<h1 style="color: aqua;font-size: large;">123</h1>

1.2 内部样式

  <style>h1{color: red;font: 100;}</style>

1.3 外部样式

        <!-- rel:引入的文档与当前文档的联系 --><link rel="stylesheet" href="./style.css">
</head>

1.4 样式优先级

行内样式>内部样式>外部样式

1.5 样式继承

如果本身设置了a样式，那么就用a样式；

如果本身没有设置了b样式，祖先设置了b样式，那么会优先继承离得近的祖先的b样式

能继承的css属性：除vertical-align的文本属性，比如color，text-align，font-size，text-indent，line-height，height...

2 选择器

2.1 选择器分类

/* 选择器样式后来者居上（css文件的后者） */
/* 1.通配选择器 */
*{font: 300;
}
/* 2.元素选择器 */
h1{background-color: aqua;font: 100;
}
/* 3.类选择器 */
.speak
{background-color: blueviolet;font: 100;
}
/* 4.交集选择器1 */
/*在speak类里面的p元素 */
p.speak{background-color: rgb(185, 26, 26);
}
/* 交集选择器2 */
.speak.sp{background-color: antiquewhite;
}
/* 5.id选择器 */
#id{background-color: rgb(227, 22, 145);
}
/* 6.并集选择器 */
#id1,
.lei1,
h2
{background-color: rgb(243, 148, 6);
}
/* 7.后代选择器，儿子孙子重孙子都是后代，选类名为ol的元素后代类名为li2的li标签 */
ol li.li2{background-color: rgb(16, 244, 46);
}
/* 8.子代选择器 */
.ul>li>h3{background-color: rgb(245, 8, 209);
}
/* 9.相邻兄弟选择器 */
div+p{background-color: rgb(157, 239, 15);
}
/* 通用兄弟选择器 */
div~h3{background-color: rgb(4, 238, 109);
}
/* 10.属性选择器：具有title属性的元素 */
[title]{color: aqua;
}
[title="title1"]{color:rgb(226, 241, 11);
}
/* 以a为开头的 */
[title^="a"]{color: blueviolet;
}
/* 以u为结尾的 */
[title$="u"]{color: rgb(10, 174, 250);
}
/* 包括g的title */
[title*="g"]{color: rgb(243, 14, 174);
}
/* 11.伪类选择器，对元素特殊状态的描述 */
/* 顺序不能乱，link、visited是a标签独有，hover、active所有标签共有 */a:link{color:aqua;}/* 选中访问过的a元素 */a:visited{color:rgb(246, 143, 8);}/* 鼠标悬停 */a:hover{color:rgb(246, 8, 12)}/* 激活的状态，鼠标点下去没点上来 */a:active{color:rgb(8, 246, 44)}span:hover{color:rgb(246, 8, 12)}/* 激活的状态 */span:active{color:rgb(8, 246, 44)}/* 获取焦点，只有往里面输入东西的元素可以使用 */input:focus,select:focus{color: aqua;background-color: brown;}/* 12.伪元素选择器  *//* 选中div身上第一个文字 */div::first-letter{color: yellowgreen;font-size: 40px;}/* 选中div第一行 */div::first-line{background-color: aqua;}/* 选中的是div中被鼠标选择的文字 */div::selection{background-color: yellow;color: blue;}/* 选中的是input中提示的文字 */input::placeholder{color: red;}/* 选中p元素最开始的位置，随后创建一个子元素 */p::before{content: "￥";color: red;}p::after{content:".00"}

2.2 选择器优先级

选择器同类型，后来者居上

从前往后比较权重，谁靠前的数大，优先级就高

并集选择器权重为1

3 伪类 

3.1 结构伪类

<head><style>/* 选中div后代p元素是第一个孩子的，first-child：所有的儿子中第一个儿子 */div p:first-child{color:aqua}</style>
</head>
<body><div><span>1111</span><span><p>12222</p></span><p>13333</p></div>
</body>

<head><style>/* 选中div第一个孩子的p元素，first-of-type：同类型儿子中第一个儿子，p的父亲是谁无所谓，只要是第一个孩子 */div p:first-of-type{color:aqua}</style>
</head>
<body><div><span>1111</span><span><p>12222</p></span><p>13333</p><p>13333</p></div>
</body>

 /* 所有的儿子中最后一个儿子 */div>p:last-child{color: aqua;}/* 如果（）里为n，则是所有的儿子，2n选中偶数，n从0开始，选中前五个：-n+5*/div>p:nth-child(0){color: blueviolet;}/* 从下往上数第几个 */div>p:nth-last-child(2){color: antiquewhite;}div>p:nth-of-type(3){color: rgb(13, 234, 65);}/* 没有兄弟的span元素 */div>span:only-child{color: rgb(6, 156, 236);}/* 同类型里面没有兄弟的span元素 */div>span:only-of-type{color: rgb(253, 12, 173);}/* html{}==:root{} ,选中的是根元素*/html{background-color: rgb(244, 159, 11);}div:empty{width: 200px;height: 300px;background-color: rgb(21, 242, 9);}

3.2 否定伪类

<head><style>/* div后代中不是第一个孩子的p元素，不管爹是谁；(first-child)表示爹必须是div */div p:not(:first-child){color: red;}</style>
</head>
<body><div><span>1111</span><span><p>12222</p></span><p>13333</p><p>13333</p></div>
</body>

 3.3 UI伪类

<head><style>/* 对于input：focus也可以让获取焦点变大，但是恢复不了 */input:checked{width: 200px;height: 300px;}input:disabled{background-color: rgb(61, 135, 199);}input:enabled{background-color: aqua;}</style>
</head>
<body><input type="checkbox">复选框<input type="radio">单选框<input type="button">按钮<input type="text"><input type="text" disabled>
</body>

3.4 目标伪类

<head><style>div:target{background-color: aqua;}div{width: 200px;height: 200px;background-color: blueviolet;}</style>
</head>
<body><a href="#1">1</a><br><a href="#2">2</a><br><a href="#3">3</a><br><a href="#4">4</a><br><a href="#5">5</a><br><div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div>
</body>

点击3：

 3.5 语言伪类

        <style>div:lang(zh){color: red;}:lang(en){color: aqua;}p:lang(){color: blue;}</style>
</head>
<body><div lang="zh">我是中文</div><div>English</div><p>我是中文</p>
</body>

4 像素

代码可以用cm，mm定义长度宽度，但是不够精细

电脑屏幕就是一个个像素组成的，但像素是一个相对单位，没有固定长度

px太精细太小不能看，所以有缩放

5 颜色

<head><style>div{color: aqua;}h1{color: #00ff00;}h2{/* 简写形式，十六进制，f表示ff，e表示透明度 */color:#0f0e;}h3{color: rgb(200, 0, 0);}h4{color: rgb(0, 100%, 80%);}h5{/* 0.5表示透明度 */color: rgba(100,100,100,0.5);}</style>
</head>
<body><div>1</div><h1>3</h1><h2>4</h2><h3>5</h3><h4>6</h4><h5>7</h5>
</body>

 

6 字体

chrome默认最小接受文字大小：12px，默认16px

衬线字体:像毛笔写出来的

6.1 实现文字垂直居中

行高=像素、数字（参考自身font-size倍数）、百分比（参考自身font-size百分比）

/* 实现文字垂直居中 */height: 200px;line-height: 200px;

6.2 vertical-align

用于图片、行内元素等

默认基线

<head><style>div{background-color: aqua;font-size: 200px;   }img{vertical-align:baseline}</style>
</head>
<body><div>x<img src="./image/favicon.ico"></div>
</body>

 img{vertical-align:bottom}

img{/* 与x的中心点对齐 */vertical-align:middle}

img{/* 低于基线 */vertical-align:sub}

6.3 text-align

<head><style>.d1{text-align: left;}.d2{text-align:center;}.d3{text-align:right;}</style>
</head>
<body><div class="d1">我是11</div><div class="d2">我是21</div><div class="d3">我是31</div>
</body>

6.4 单位

长度单位em：相对于当前元素的font-size的倍数，当前元素找不到font-size找父元素的，父元素没有再往上找，否则用默认

 rem：相对于根元素（html）的font-size的倍数

width: 50%;50%是父元素width的px的50%

6.5 font属性

.div1{font-size: 40px;/* 电脑设置应该有该字体 *//* 最好用英文 */font-family: "微软雅黑";/* italic字体变斜 */font-style: italic;/* 控制字体粗细 */font-weight: 100;}.div2{/* 字体复合属性 *//* 字体族必须最后一位，字体大小必须倒数第二位 */font: bold 30px "楷体",sans-serif;}/* 所有元素字体都20px */body{font: 100px;/* 从前到后，找到能用的为止 *//* sans-serif非衬线字体，serif衬线字体 */font-family: "宋体","微软雅黑",sans-serif;/* 字母间距 */letter-spacing: 10px;}.div4{font-size: 10px;/* 乱写默认微软雅黑 */font-family: "宋体213123213";/* 单词间距，通过空格判断 */word-spacing:20px;}.div5{/* overline上划线，dotted虚线 */text-decoration: overline dotted red;}.div6{/* underline下划线，wavy波浪线 */text-decoration: underline wavy green;}.div7{/* underline下划线，wavy波浪线 */text-decoration: line-through;font-size: 40px;/* 向后空两位，文本缩进 */text-indent:80px;

7 边框

span{/* solid实线 */border: 2px green solid;}

 8 列表

        <style>ul{/* 列表符号list-style-type: decimal;/* 列表符号位置 *//* list-style-position: inside; *//* 自定义列表符号 *//* list-style-image: url("123.gif"); */ /* 复合属性 */list-style:circle inside url("./image/favicon.ico")}li{background-color: aqua;}</style>
</head>
<body><ul><li>我是1</li><li>我是2</li><li>我是3</li></ul>
</body>

 9 表格独有属性

9.1 border-spacing

<head><style>table{/* 单元格间距 */border-spacing: 10px;}</style>
</head>
<body><!-- cellspacing="30" --><table border="1" ><caption>学生信息</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>成绩</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody><tfoot><tr><td>1tfoot</td><td>2tfoot</td><td>3tfoot</td><td>4tfoot</td></tr></tfoot></table><hr>
</body>

9.2 table-layout 

table{/* auto根据内容分配单元格大小；fixed固定大小,需要加宽度限定，不然等同auto */table-layout: fixed;width: 500px;}

 

9.3 border-collapse 

        <style>table{width:500px;border:4px solid red}th,td{border: 2px solid orange;}</style>

 

table{}添加：

/* 合并相邻单元格的边框 */border-collapse:collapse;

 

9.4 其他属性

/* 隐藏没有内容的单元格 */empty-cells: hide;/* 标题放下面 */caption-side: bottom;

 10 背景

<head><style>div{width: 400px;height: 400px;/* background-color: aqua; *//* 大的图片展示一部分，小的重复且铺满 *//* background-image: url('./image/favicon.ico');background-repeat: no-repeat; *//* background-position: left bottom; *//* background-position: center;相当于background-position: center center; *//* background-position: left;相当于background-position: left center; *//* 以图片左上角为基点，div左上角为原点，移动y轴100px，移动x轴200px *//* background-position: 100px 200px; *//* 移动x轴100px，y轴处于center *//* background-position: 100px; */background:url('./image/favicon.ico') no-repeat 100px aqua;}</style>
</head>
<body><div></div>
</body>

11 鼠标

 div{/* 进入div盒子，鼠标形式变动 */cursor: all-scroll;}

 12 盒子

12.1 margin,padding,border,content

<head><style>div{width: 400px;height: 400px;background-color: aqua;/* margin:-100px:此时width、height变为300px *//* margin合并：上兄弟margin-bottom与下兄弟margin-top合并一起 *//* padding内边距 *//* padding-left: 20px;padding-top: 10px;padding-top: 10px;padding-bottom: 20px; *//* padding复合属性，border、margin同理 *//*padding:10px： 10px上下左右 *//*padding:10px 20px： 10px上下，20px左右 *//*padding:10px 20px 30px： 10px上，20px左右,30px下 *//*padding:10px 20px 30px 40px： 10px上，20px右,30px下 40px左 */}</style>
</head>
<body><div></div>
</body>

12.2 margin塌陷

<head><style>.outer{width: 400px;height: 400px;background-color: rgb(121, 70, 148);   /* 解决margin塌陷1  *//* border: 1px solid ; *//* 解决margin塌陷2  *//* padding: 10px; *//* 解决margin塌陷3  *//* overflow: hidden; */}.in1{width: 100px;height: 100px;background-color: aqua;/* margin塌陷：子元素的margin被父元素抢走 */margin-top: 20px;}</style>
</head>
<body><div>213</div><div class="outer"><div class="in1"></div></div><div>213</div>
</body>

margin塌陷效果：

12.3 处理内容溢出 

                overflow: hidden;
超出的给隐藏overflow: scroll;
滚动条overflow: auto;overflow: visible;

13 布局

13.1 实现效果1

实现效果：

代码：

<head><style>.outer{width: 400px;height: 400px;background-color:gray;overflow: hidden;}.in1{width: 100px;height: 100px;background-color: rgb(234, 215, 10);/* 盒子左右居中 */margin:0 auto;/* 文本左右居中 */text-align: center;/* 文本上下居中 */line-height: 100px;/* 盒子上下居中 */margin-top:150px; }</style>
</head>
<body><div class="outer"><div class="in1">inner</div></div>
</body>

 13.2 实现效果2

代码：

        <style>.outer{width: 400px;height: 400px;background-color:gray;text-align: center;/* 如果行内元素、行内块元素也想居中，可以当成文字处理 */line-height: 400px;margin:0 auto;overflow: hidden;/* 图片受父元素文字影响大，文字越大图片越跑偏 */font-size:0}span{font-size: 20px;background-color: aqua;/* 图片位置与x中间位置对齐 *//* 上一个布局调盒子上下是margin-top */vertical-align: middle;}img{/* 图片位置与x中间位置对齐 */vertical-align: middle;}</style>
</head>
<body><div class="outer"><span>inner</span><img src="./image/favicon.ico"></div>
</body>

 13.3 幽灵空白

效果代码：

<head><style>.outer{width: 400px;background-color:rgb(243, 9, 9);    }</style>
</head>
<body><div class="outer"><img src="./image/favicon.ico">xg</div>
</body>

解决办法：

/* 解决办法1 */img{vertical-align: bottom;}
/* 解决办法2,条件：div内只有一张图片，没有其他内容 */img{display: block;}
<head><style>.outer{width: 400px;background-color:rgb(46, 185, 173);   font-size: 0;}/* 解决办法3：单独设置字体大小 */span{font-size: 20px;}</style>
</head>
<body><div class="outer"><img src="./image/favicon.ico"><span>xg</span></div>
</body>

 14 浮动

浮动：文字环绕文字，文字环绕图片

14.1 浮动给特点

1.脱离文档流。文档流即默认效果

2.宽高内容撑开且可设置

3.不会margin合并与塌陷

4.若标签内只有浮动元素则父元素高度塌陷

5.对后面的兄弟有影响

in1、in2、in3：float: left;

<div class="outer"><div class="in1">1</div><div class="in2">2</div><div class="in3">3</div><div class="in4">4</div>

<div class="outer"><div class="in4">4</div><div class="in1">1</div><div class="in2">2</div><div class="in3">3</div>

14.2 清除浮动

方法一：给父元素指定高度

方法二：给父元素设置浮动

方法三：父元素设置overflow：hidden

效果：

方法四： 

<head><style>.outer::after{background-color: rgb(121, 70, 148);margin: 10px;border: 1px solid red;width: 400px;}        .in1,.in2,.in3{width: 100px;height: 100px;float: left;border: 1px solid red; background-color: aqua;}.in4{width: 100px;height: 100px;border: 1px solid red; background-color: rgb(32, 243, 13);/* 清除左浮动产生的影响 *//* clear: left; *//* 清除4之前所有浮动产生的影响 *//* 想在最后加clear:both;不能是行内元素 */clear:both;}</style>
</head>
<body><div class="outer"><div class="in1">1</div><div class="in2">2</div><div class="in3">3</div><div class="in4">4</div>
</body>

注意：

1 in4不和in1，2，3同一行

2 如果in4是行内、行内块元素，直接当文本处理

3 如果in4是浮动，且in4{clear:both;},所以用clear：both不能是浮动的

 方法五：

.outer::after{content:'';/* 默认是行内元素 */display: block;clear: both;  }

in1，2，3，4都浮动的状态下

但是，in4不浮动时：

14.3 浮动练习

需求

代码：

<!DOCTYPE html><html lang="en">
<head><style>*{margin: 0;padding:0;}.leftfix{float: left;}.rightfix{float: right;}.clearfix::after{content:"";display: block;clear: both; }.container{width: 960px;height: 80px;margin: 0 auto;text-align: center ;}.logo,.banner2{width: 200px;height: 80px;}.banner1{width: 540px;height: 80px;margin:0 10px;}.logo,.banner2,.banner1{background-color: gray;line-height: 80px;}.menu{width: 960px;height: 30px;background-color: gray;line-height: 30px;text-align: center;margin-top:10px}.column1,.column2{/* 边框也占了w和h，所以都-2 */width: 368px;height: 198px;text-align: center;line-height: 198px;border:1px solid black;margin-right:10px;  }.column3,.column4,.column5,.column6{width: 178px;height: 198px;border: 1px solid black;text-align: center;line-height: 198px;margin-right:10px;  }.content{margin-top: 10px;}.leftbottom{margin-top: 10px;}.column7,.column8,.column9{width: 198px;height: 128px;text-align: center;line-height: 128px;border:1px solid black;}.column8{margin: 10px 0;}.footer{height: 60px;background-color: gray;text-align: center;line-height: 60px;margin-top:10px;}</style>
</head>
<body><div class="container"><!-- 头部区 --><div class="header  clearfix"><div class="logo leftfix">logo</div><div class="banner1 leftfix">banner1</div><div class="banner2 leftfix">banner2</div></div><!-- 菜单区 --><div class="menu">菜单</div><!-- 内容区 --><div class="content clearfix"><div class="left leftfix"><div class="lefttop clearfix"><div class="column1 leftfix">栏目1</div><div class="column2 leftfix">栏目2</div></div><div class="leftbottom clearfix"><div class="column3 leftfix">栏目3</div><div class="column4 leftfix">栏目4</div><div class="column5 leftfix">栏目5</div><div class="column6 leftfix">栏目6</div></div></div><div class="right leftfix"><div class="column7">栏目7</div><div class="column8">栏目8</div><div class="column9">栏目9</div></div></div><!-- 页脚 --><div class="footer">页脚</div></div>  </body></html>

效果：

注意：

1结构要清晰，注释要写上

2width，height需要考虑padding，border

3左浮，清浮动单独成{}

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

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

相关文章

从16-bit 到 1.58-bit ：大模型内存效率和准确性之间的最佳权衡

从16-bit 到 1.58-bit ：大模型内存效率和准确性之间的最佳权衡

通过量化可以减少大型语言模型的大小&#xff0c;但是量化是不准确的&#xff0c;因为它在过程中丢失了信息。通常较大的llm可以在精度损失很小的情况下量化到较低的精度&#xff0c;而较小的llm则很难精确量化。 什么时候使用一个小的LLM比量化一个大的LLM更好? 在本文中&a…
阅读更多...
关于比特币的AI对话

关于比特币的AI对话

【ChatGPT】 比特币源码开源吗&#xff1f; 是的&#xff0c;比特币的源码是开源的。比特币项目是在MIT许可证下发布的&#xff0c;这意味着任何人都可以查看、修改、贡献和分发代码。比特币的源码托管在GitHub上&#xff0c;可以通过下面的链接进行访问&#xff1a; https://g…
阅读更多...
13.【蓝桥杯】-ing 移除链表元素 简单题

13.【蓝桥杯】-ing 移除链表元素 简单题

一、题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1a; 输入&…
阅读更多...
【深度学习笔记】优化算法——学习率调度器

【深度学习笔记】优化算法——学习率调度器

学习率调度器 &#x1f3f7;sec_scheduler 到目前为止&#xff0c;我们主要关注如何更新权重向量的优化算法&#xff0c;而不是它们的更新速率。 然而&#xff0c;调整学习率通常与实际算法同样重要&#xff0c;有如下几方面需要考虑&#xff1a; 首先&#xff0c;学习率的大…
阅读更多...
2024-03-10 c++

2024-03-10 c++

&#x1f338; MFC下拉框控件 | Combo Box eg 计算器 1。新建MFC项目&#xff08;基于对话框、静态库&#xff09; 2。添加控件&#xff0c;删除初始的3个多余控件 加3个edit control 加1个combo box&#xff0c;属性sort改为false&#xff0c;data为 ;-;;;% 加1个static text…
阅读更多...
不同路径 不同路径 II 整数拆分

不同路径 不同路径 II 整数拆分

62.不同路径 力扣题目链接(opens new window) 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。…
阅读更多...
SpringBoot中MD5使用

SpringBoot中MD5使用

SpringBoot中MD5使用 新建md5类 public final class MD5 {public static String encrypt(String strSrc) {try {char[] hexChars {0, 1, 2, 3, 4, 5, 6, 7, 8,9, a, b, c, d, e, f};byte[] bytes strSrc.getBytes();MessageDigest md MessageDigest.getInstance("MD5…
阅读更多...
linux设置systemctl启动

linux设置systemctl启动

linux设置nginx systemctl启动 生成nginx.pid文件 #验证nginx的配置&#xff0c;并生成nginx.pid文件 /usr/local/nginx/sbin/nginx -t #pid文件目录在 /usr/local/nginx/run/nginx.pid 设置systemctl启动nginx #添加之前需要先关闭启动状态的nginx&#xff0c;让nginx是未…
阅读更多...
一文了解原型和原型链

一文了解原型和原型链

本文重点概念&#xff1a; 1、所有的对象都是new一个函数创建的 2、所有的函数都有一个属性prototype&#xff0c;称为函数原型 3、函数原型得到的这个对象都有一个属性constructor,指向该函数 4、所有的对象都有一个属性&#xff1a;隐式原型__proto__&#xff0c;隐式原型…
阅读更多...
【APP逆向】酒仙网预约茅台程序，包含逆向过程详解

【APP逆向】酒仙网预约茅台程序，包含逆向过程详解

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 所属的专栏：爬虫实战，零基础、进阶教学 景天的主页：景天科技苑 文章目录 酒仙网预约抢购茅台1.抓包分析,账户名和密码登录2.短信登录3.登录+茅台预约 密码登录酒仙网预约抢购茅台 目标：账号登…
阅读更多...
【JetsonNano】onnxruntime-gpu 环境编译和安装，支持 Python 和 C++ 开发

【JetsonNano】onnxruntime-gpu 环境编译和安装，支持 Python 和 C++ 开发

1. 设备 2. 环境 sudo apt-get install protobuf-compiler libprotoc-devexport PATH/usr/local/cuda/bin:${PATH} export CUDA_PATH/usr/local/cuda export cuDNN_PATH/usr/lib/aarch64-linux-gnu export CMAKE_ARGS"-DONNX_CUSTOM_PROTOC_EXECUTABLE/usr/bin/protoc&qu…
阅读更多...
C#MQTT编程10--MQTT项目应用--工业数据上云

C#MQTT编程10--MQTT项目应用--工业数据上云

1、文章回顾 这个系列文章已经完成了9个内容&#xff0c;由浅入深地分析了MQTT协议的报文结构&#xff0c;并且通过一个有效的案例让伙伴们完全理解理论并应用到实际项目中&#xff0c;这节继续上马一个项目应用&#xff0c;作为本系列的结束&#xff0c;奉献给伙伴们&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023