文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

手机连接ESP8266的WIFI，进入内置网页，输入要显示的内容，在OLED显示屏上显示文本

此系统能够让用户通过一个简单的Web界面输入信息，并将其显示在OLED屏幕上。这种设备的应用非常广泛，可以用于智能家居系统、信息提示牌或任何需要远程显示信息的场景。...功能实现 显示启动信息 一旦设备启动，它会在OLED屏上显示如何连接到Wi-Fi网络的信息，包括网络的SSID和一个基础的Web链接。...Web服务器交互 用户可以通过访问在OLED显示屏上提供的Web地址来输入想要显示的消息。这通过一个简单的HTML表单完成，提交后消息会发送到ESP8266。...消息显示 提交的信息将通过Web服务器的路由处理器接收，并显示在OLED屏幕上。同时，服务器会向用户确认消息已显示。...编程注意事项 在代码中，我们首先定义了所有必要的库和参数，如屏幕尺寸和Wi-Fi设置。主要的逻辑包括设置AP模式、初始化Web服务器，并创建处理HTTP请求的函数。

6.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    浅谈 Glide - BitmapPool 的存储时机 & 解答 ViewTarget 在同一View显示不同的图片时，总用同一个 Bitmap 引用的原因

    Glide 在使用默认的Targer方式下，同一个 View 加载不同 URL 图片的时候，返回的 Bitmap 引用地址是一样的，但图片像素不一样。...之所要保存它，是因为这个APP要实现多开，每一个页面其对应的有一个二维码图片，每一个二维码图片的 bitmap 是不同的，这样在切换的时候，就可以对应显示出属于当前页面的 bitmap。...如果单独存 Bitmap，这样在APP中切换页面的时候，其实也就是切换数据，更新数据即可。 结合上面的语言来看，那么上面代码应该是没问题的。...那么到底是什么原因导致了： Glide 在满足下面两点的时候，加载返回的 Bitmap 引用地址是一样的，但图片像素不一样？...最后在加载图片并解码完成后，在从 BitmapPool 中寻找缓存的时候，就能找到上面的缓存的，擦除像素，加入新图片的像素，最终返回 Bitmap 其中第4点就是 BitmapPool 的存储时机。

    1.9K100

    【CSS】盒子模型内边距 ③ ( 盒子模型内边距案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

    文章目录 一、盒子模型内边距案例 二、使用 Fireworks 分析网页 1、导入图片 2、缩放图片 3、切片工具测量图片 4、吸管工具获取图片颜色 5、测量结果 三、代码示例 一、盒子模型内边距案例...---- 模仿 CSDN 博客界面的导航栏 , 将下图中 矩形框 中的导航栏 样式写出来 ; 案例分析 : 导航栏宽度 是不固定的 , 有的链接宽度很窄 , 如 " 最近 " , " 课程 " 等...---- 1、导入图片 Adobe Fireworks 是一款网页制图软件 , 可以快速设计开发网页界面原型 , 这里使用该软件分析 已有的 网页 ; 将上述 导航栏 图片 拖动到 Adobe Fireworks...工具 中进行分析 ; 2、缩放图片 使用 Ctrl + 鼠标滚轮 , 可以放大缩小图片显示 ; 3、切片工具测量图片 使用 切片工具 , 可以测量 图片中 矩形区域 的 宽高 , 宽高显示在下方...#E8E8ED ; 5、测量结果 测量的 导航栏 整体 高度 为 48 像素 , 没有 上左右 边框 , 整体背景为白色 ; 下边框 1 像素 , 颜色值为 #E8E8ED , 文本高度

    1.8K20

    大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

    五、盒子模型 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ ? 其实网页布局的本质就是： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。...5.4.5.1、相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom...浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。 6.4、浮动小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。...7.3、定位模式 在 CSS 中，通过 position 属性定义元素的定位模式，语法如下： 选择器 { position: 属性值; } 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

    2.7K20

    【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

    : repeat-x; , 背景在 X 轴方向上平铺 ; 纵向平铺 : background-repeat: repeat-y; , 背景在 Y 轴方向上平铺 ; 4、背景图片位置 如果 盒子的大小...y 坐标 ; 5、超大背景图片设置 网页背景兼容问题 在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 , 如 : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同...; 超大背景图片编辑策略 图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 ,...在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 : background: rgba(0, 0, 0, .2); 背景半透明 指的是 盒子的背景设置为半透明 ,...可以看到下面的内容 , 盒子里面显示的内容不受背景影响 , 照常显示 ;

    11.2K10

    前端成神之路-CSS高级技巧

    图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。 ?...滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ ?...负边距+定位：水平垂直居中 咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?

    9.9K30

    CSS3给网页穿上美丽的外衣

    css是衣服，起到装饰的作用，花花绿绿的 4、CSS的优势 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的...16进制 3、RGB 红绿蓝 三原色 颜色不需要记，ui会给你的 文字对齐方式 text-align: center 居中 right 右对齐 left 左对齐 对齐参照点不同 ，对齐的方式也不同，以父级元素为标准...标签超链接，当链接从未访问过时，显示初始颜色，只要点击过，就显示visite设置的颜色。...; div背景图片，图片大，div小的时候 可以直接用坐标进行调整，左负右正，上负下正，控制台，进行调整 练习： 制作我的购物车 16、span标签 span是一个文字标签 等于小括号 移动坐标 x...: url(“1.jpg”) no-repeat right bottom; div背景图片，图片大，div小的时候 可以直接用坐标进行调整，左负右正，上负下正，控制台，进行调整 练习： 制作我的购物车

    84110

    【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

    文章目录 一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例...一、案例效果 ---- 实现下面的案例效果 : 二、核心要点说明 ---- 1、网页默认样式 所有的网页 , 基本都需要设置如下默认样式 , 清除默认的内外边距 清除列表默认样式 : 主要是列表项前面的圆点...设置总体背景 : 为 body 标签设置背景颜色或图片即可 图片自适应填充 : 设置 标签的内容宽度为 100% 即可 , 目的是令图片自适应缩放 ; /* 清除标签默认的内外边距 *...width: 100%; } 2、盒子模型居中显示 盒子模型居中显示 : 此处涉及到了 顶部的 Banner 图片 , 和 下方的 导航栏 需要居中显示 , 设置 margin: auto; 和 margin...设置渐变背景 , 可设置 样式的小图片 , 让其在水平方向 重叠平铺 , 即可得到 下面的连续背景 : 代码示例 : .nav { /* 设置盒子模型尺寸 */ width

    3.7K20

    【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...和 最小宽度 ; 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ; 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局...= 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中

    7.3K20

    前端学习(7)~css学习(一)：字体属性和文本属性

    比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。...盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。...上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。...2、字体属性的说明： （1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： font-family: "华文彩云"; 上方代码中，如果用户的 Windows 电脑里面没有这个字体.../2.gif) ; /*列表项前设置为图片*/ margin-left:80px; /*公有属性*/ } 另外还有一个简写属性叫做list-style，它的作用是：将上面的多个属性写在一个声明中

    3.1K20

    前端之HTML和CSS

    文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。 　　...-- 这是一段注释 --> 常用html字符实体 　　代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下... 　　在网页上显示 “” 会误认为是标签，想在网页上显示“”可以使用它们的字符实体，比如： 是一个html的一个标签...布局示例 　　根据网页布局的原理以及上面的实例，写出网页的html结构代码。...带语义的标签  1、h1~h6：表示标题 2、p：表示段落 3、img：表示图片 4、a：表示链接 不带语义的标签  1、div：表示一块内容 2、span：表示行内的一块内容 所以我们要根据网页上显示的内容

    6K30

    前端成神之路-盒子模型

    目标： 理解： 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能说出外边距合并的解决方法...应用： 能利用边框复合写法给元素添加边框 能计算盒子的实际大小 能利用盒子模型布局模块案例 1.看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢...看透网页布局的本质： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。 以上两步 就是网页布局的本质 ?...7. ps基本操作以及常用快捷键： 因为网页美工大部分效果图都是利用ps 来做的，所以，以后我们大部分切图工作都是在ps里面完成。...去掉列表默认的样式 无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。

    1.7K30

    「学习笔记」CSS基础

    HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。...作用 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。...行内块元素的特点 和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个 默认宽度就是它本身内容的宽度。 高度，行高，外边距以及内边距都可以控制。...定位(position)的扩展 绝对定位的盒子居中 绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法： left : 50%...同理垂直居中。 堆叠顺序（z-index） 在使用「定位」布局时，可能会「出现盒子重叠的情况」。 加了定位的盒子，默认「后来者居上」， 后面的盒子会压住前面的盒子。

    4.6K30

    网络结构与HTML学习笔记

    最关键的地方，在自己的电脑上安装一个客户端软件，通过客户端访问服务器。例如： QQ http协议： 就是上互联网所遵守的一种规则。 www.sina.com.cn 是要访问的服务器的名称。...(3)超文本：就是网页上不光有文本，还有图片，音乐，视频等。 (4)标注:是一种记号，是一种标志。如：红绿灯。 (6)语言:这里的"语言"就是代码，跟所谓的"程序语言"一点关系都没有。...(7)HTML的主要目的：就是用来显示网页的不同效果、不同部分。 如:文本，这就表示将文本进行加粗。(bold),这个..就是标记。...往这个文件夹放入一张图片格式，gif,png,jpg等等都可以。。。我下面的这张是png图片。。。...我们学习了boda常用的属性以及HTML的一些标记，但是图显示的效果却不是那么的好看。原因就是没有排版好，接下来使用居中来使这个页面更好看一点，顺便多加入几个别的标记。

    1.8K20

    姬小光前端兴趣班【第009期】- 切图大法之代码的整理

    上一期我们已经学会了使用 PS 切图并生成网页，那么这一期我们看看生成后的代码如何处理，才能变成一个合格的网页。...切图大法之代码的整理 由于我们上一期使用的是一个邮件营销活动的页面，也就是说要通过邮件的形式发送给用户，在用户的邮箱里打开浏览的网页。...你会发现页面内容是在窗口的左侧，这是由于页面内容比窗口的宽度窄，而我们又没有设置居中样式造成的。 那么，页面的主体内容是 table 元素，我们就在 table 上添加一个居中的样式： ?...代码中的五个 img 就是我们上一期切出的切片，假设我么要在优惠券上加一个链接，那么按顺序可以知道这是第三个 img，故我们在第三个 img 外面套上一层超链接，假设链接到百度首页： ?...如果发送邮件时没有以附件形式带过去，这些图片在客户端是无法显示的，所以我们必须找到一个可以上传图片的地方，把它们发布到网上去，然后得到一个绝对路径的地址，再嵌入的页面中就可以了。

    66330

    ❤️创意网页：超简单好看的HTML5七夕情人节表白网页(表白直接拿去用) HTML+CSS+JS

    ``：包含了文档的元数据信息和样式表。 4. ``：设置网页的标题。 5. ``：定义内部样式表，用于设置网页的样式。 6. `body`：定义页面的内容。...`display: flex;`：设置页面的布局为弹性布局，使其内容在垂直和水平方向上居中显示。 `align-items: center;`：使页面内容在垂直方向上居中对齐。...`justify-content: center;`：使页面内容在水平方向上居中对齐。 `height: 100vh;`：设置页面高度为视窗的高度，使其充满整个屏幕。...`text-align: center;`：设置文本内容在水平方向上居中对齐。 `font-size: 24px;`：设置文本的字体大小为24像素。...这段代码实现了一个带有下雪背景效果和爱心的网页，同时显示了两个倒计时效果，一个是从指定日期开始计算的时间流逝，另一个是每秒钟刷新的下雪效果。

    7.5K20

    【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

    ---- 网页中实现下面的效果 ; 1、HTML 标签结构 基本的 HTML 标签 , 的内容水平居中显示 , 设置如下样式 : /* I. div 内部的 a 链接标签水平居中 */ .nav { text-align: center; } 3、设置链接标签默认显示样式...在 div 盒子中的 a 标签是 行内元素 , 为其设置宽高是无效的 , 首先要将其转为 行内块样式 ; display: inline-block; 标签背景图片大小为 120 x 50 像素 ,..., 之前设置的 标签 的高度为 50 像素 , 这里将行高设置成 50 像素即可 ; line-height: 50px; 图片背景设置 , 使用简写方式 , 设置图片链接 , 与 图片的平铺模式即可...edu.csdn.net/">学习 社区 2、效果展示 默认状态效果 : 鼠标移动到按钮上之后的效果

    6.7K20

    前端基础——CSS+DIV布局

    CSS+DIV布局，就是在整体上用标记把页面分为若干个块，然后对各个块进行CSS定位，最后再在各个块中添加相应内容。        ...简单来说，盒子模型的核心就在那些“盒子”的margin、border、padding这几个属性上，想要布局出合理漂亮的网页，这是基本功。        ...z-index属性：         z-index的值可以为任意整数值，可以为正数也可以为负数，代表着元素“显示的优先级”，值越大，显示的优先级越高。两张简单的图片足以说明： ?...比如对margin使用负值就是一个很实用的小技巧，假如想让container固定宽度居中显示（假设container宽度为700px），则可以对container采用relative的定位方法，left...值为页面的50%，再设置margin-left为自己宽度的一半，这样，无论在哪种分辨率的浏览器中显示效果都是固定宽度且居中，如下图： ?

    3.5K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券