物联网开发_物联网是不是一种骗局

物联网期末大作业—睡眠质量检测系统目录物联网期末大作业—睡眠质量检测系统前言一、项目介绍 项目背景项目构思二、系统设计 系统概述设计思路设计草图三、硬件设计 硬件模块介绍硬件系统的Fritzing模型图四、软件设计 获取睡眠环境状况获取血氧浓度和心跳频率后端设计移动端数据传输五、使用说明 实物图展示操作流程六、系统总结总结前言

本学期的物联网课程进入了尾声,又到了紧张刺激的熬夜努力创造奇迹时刻(咳咳那是上学期) 这次我和我的组员没有熬夜,从构思到实现花费了一个星期,如果要换算的话,两个通宵之夜应该绰绰有余了嘿嘿 上学期的嵌入式大作业没有将它变成博客的形式记录下来,属实比较遗憾(打算寒假看看有没有时间整理一下) 这次的物联网大作业是一个睡眠质量检测系统,由于老师给的模块实在是少到可怜【老师限制我发挥了嘿嘿开玩笑】 闲谈就到这吧,文档型成果物和代码什么的我放文末了【自取吧】 【文档型成果物:项目实验报告+项目概述ppt+项目演示视频】

一、项目介绍项目背景

随着社会的不断发展,人民生活水平不断提高,同时现代人生活压力也逐渐变大,众多的琐事使人们一整天都投入到工作之中,从而导致常常有人受到熬夜、失眠以及易醒等睡眠问题的困扰。而一个人的睡眠质量不仅关乎第二天的工作学习情况,同时也会对生理和心理健康产生极大的影响。因此睡眠问题值得每一个人重视。

要做到有针对性的预防和控制睡眠问题,到医疗机构做一次全面专业的睡眠检测当然是效果最佳的做法。但是受限于费用和时间成本,大多数人所需要的还是能够提供一些日常睡眠数据监测和提供睡眠建议的服务。

项目构思

通过将多种传感器嵌入枕头或置于床头,实现对使用者夜间睡眠过程中的体态、鼾声进行监测。经过后台处理分析后,用户可通过手机查看分析报告。可用于受睡眠问题困扰人士的日常使用或者养老中心照料老人等场景。

硬件需求

物联网开发_物联网是不是一种骗局

注:图片是之前的构思,由于老师没给我惯性和压力传感器,在本次实验中仅仅用了声音传感器和血氧心率传感器

二、系统设计系统概述

本项目旨在基于Arduino和NodeMcu,模拟开发一个简易的睡眠质量检测系统。用户在晚上睡眠时,将其放置在枕边,便可以测出昨夜自身的睡眠质量。用户可以在系统的移动端查看昨夜的睡眠质量的相关数据。

该系统主要功能如下:

人体心率检测人体血氧检测睡眠环境检测设计思路

(1)睡眠质量检测系统硬件设计:

物联网开发_物联网是不是一种骗局

功能

硬件模块

实现思路

睡眠环境检测

SoundSensor (LM386)

声音检测模块(LM386)检测出当前环境中的声音信号,根据声音的振幅来判断当前环境是处于安静还是吵闹的状态。

人体心率检测、 人体血氧检测

血氧心率检测模块 (MAX30100)

血氧心率检测模块(MAX30100)通过红外光LED扫描人体组织来获取透光率,将透光率转换为电信号,加入计算后得出当前状态下人的血氧浓度和心跳频率。

(2)睡眠质量检测系统软件设计:

物联网开发_物联网是不是一种骗局

功能

实现思路

睡眠质量评估

根据睡眠质量检测系统的硬件设计,我们可以获取到对应时间段内用户睡眠的环境状态,血氧浓度和心跳频率。将三类数据与科学状态下正常的数据进行对比评估,最后按照我们自己编写的睡眠质量评估算法来进行分数的计算。

血氧浓度状况

血氧心率检测模块(MAX30100)通过红外光LED扫描人体组织来获取透光率,将透光率转换为电信号,加入计算后得出当前状态下人的血氧浓度和心跳频率。

助眠模块

移动端附加的助眠模块。设立助眠音乐和助眠教程,来提高用户的睡眠质量。

(3)睡眠质量检测系统流程图:

物联网开发_物联网是不是一种骗局

设计草图

硬件设计图

物联网开发_物联网是不是一种骗局

移动端设计图

物联网开发_物联网是不是一种骗局

三、硬件设计硬件模块介绍

(1)MAX30100 心率血氧传感器

物联网开发_物联网是不是一种骗局

端口连接:

引脚号

连接Arduino开发板

GND

GND

VIN

3.3V或5V

SLC

D1

SDA

D2

功能:MAX30100 是一个集成脉搏血氧仪和心率检测仪生物传感器的模块,用于检测人体血氧浓度和心跳频率。

(2)LM386 声音传感器

物联网开发_物联网是不是一种骗局

端口连接:

引脚号

连接Arduino开发板

GND

GND

VCC

国洋商务通 国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能,更是采用了目前互联网上最流行的LAMP组合(Linux+Apache+Mysql+PHP)开发完成,模板技术实现了界面与代码的有效分离,用户可以快速地在此基础上编译模板;提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

国洋商务通 0 查看详情 国洋商务通

3.3V或5V

AOUT

A0

DOUT

D0

功能:LM386 是一种音频集成功率放大器, 用于检测周围环境声音的有无和判断声音强度的大小。

硬件系统的Fritzing模型图

物联网开发_物联网是不是一种骗局

四、软件设计

软件设计主要对应4个功能模块进行设计。分别是:获取睡眠环境状况,获取血氧浓度和心跳频率,MQTT通信和移动端数据传输。

获取睡眠环境状况

利用声音传感器(LM386)来检测当前环境中声音的状况。在固定时间段内,读取每秒钟的声音数字信号,最后对低电平的数量进行统计,对照环境质量评估转换表获取当前环境状况。此外,环境状况将参与到睡眠质量的评估之中。

物联网开发_物联网是不是一种骗局

代码实现: lastNoise变量记录上一次噪音采样时间,每次循环做一次判断,如果当前时间与上次噪音采样时间相差大于50毫秒则进行一次噪音采样,其效果等同于每50毫秒进行一次噪音采样。这样做的好处是避免循环嵌套,导致后面心率血氧的采样被阻断。

代码语言:javascript代码运行次数:0运行复制

    // 每50毫秒检测一次环境噪音,如果有则噪音计数器的值加一    if (millis() - lastNoise > 50) {      if (digitalRead(dPin) == 0) {        noiseCounter += 1;      }      lastNoise = millis();     }

在下一个if代码块中,采用和之前同样的方法,用tsLastReport变量记录上一次采样时间,每1秒钟进行一次处理。我在里边使用fiveCounter实现每通过5次该判断,能发布一次噪音数据。数据的含义是,这1秒当中,20次采样有多少次采样被判断为有噪音。

代码语言:javascript代码运行次数:0运行复制

 // 每1秒读取一次心率和血氧的值,并发布相应主题    if (millis() - tsLastReport > 1000) {      fiveCounter += 1;      // 每五秒发布一次噪音检测情况      if (fiveCounter == 5) {        char num[3];        sprintf(num, "%d", noiseCounter);        client.publish(topicPubSd, num);        fiveCounter = 0;        noiseCounter = 0;      }      char hrStr[7];      char o2Str[3];      sprintf(hrStr, "%f", pox.getHeartRate());      sprintf(o2Str, "%d", pox.getSpO2());      client.publish(topicPubHr, hrStr);      client.publish(topicPubO2, o2Str);      tsLastReport = millis();    }

获取血氧浓度和心跳频率

利用血氧心率传感器(MAX30100)来检测用户当前的血氧浓度和心跳频率。在固定时间段内,读取每秒钟的相关数据,最后统计平均的心跳频率和血氧浓度,并对照科学的数据转换表投入到睡眠质量的评估之中。

物联网开发_物联网是不是一种骗局

代码实现: tsLastReport变量实现每一秒中对心率和血氧进行一次采样,使用到了MAX30100Lib库中PulseOximeter类实例对象的getHeartRate和getSpo2方法分别获取心率和血氧数据。

代码语言:javascript代码运行次数:0运行复制

    // 每1秒读取一次心率和血氧的值,并发布相应主题    if (millis() - tsLastReport > 1000) {      fiveCounter += 1;      // 每五秒发布一次噪音检测情况      if (fiveCounter == 5) {        char num[3];        sprintf(num, "%d", noiseCounter);        client.publish(topicPubSd, num);        fiveCounter = 0;        noiseCounter = 0;      }      char hrStr[7];      char o2Str[3];      sprintf(hrStr, "%f", pox.getHeartRate());      sprintf(o2Str, "%d", pox.getSpO2());      client.publish(topicPubHr, hrStr);      client.publish(topicPubO2, o2Str);      tsLastReport = millis();    }

后端设计

一分钟内睡眠数据的数据结构,noiseNumList是存放噪音数据的数组,heartRateList是存放心率数据的数组,spo2List是存放血样数据的数据。sleepScore是睡眠质量评分,avgSpo2是平均血氧浓度。SleepData()构造函数中对以上数据进行初始化操作,addNoiseNum,addHeartRate,addSpo2分贝为更新噪音数据、心率数据、血样数据的方法。getSleepScore设置并返回睡眠评分,getAvgSpo2为设置并返回平均血氧数据。

代码语言:javascript代码运行次数:0运行复制

package cn.spreeze.mqtt;import java.util.ArrayList;import java.util.Random;public class SleepData {    private final ArrayList noiseNumList;    private final ArrayList heartRateList;    private final ArrayList spo2List;    private int sleepScore;    private int avgSpo2;    public SleepData() {        noiseNumList = new ArrayList();        heartRateList = new ArrayList();        spo2List = new ArrayList();        sleepScore = 100;        avgSpo2 = 100;    }    public void addNoiseNum(int noiseNum) {        if (noiseNumList.size() == 12) {            noiseNumList.remove(0);        }        noiseNumList.add(noiseNum);    }    public void addHeartRate(float heartRate) {        if (heartRateList.size() == 60) {            heartRateList.remove(0);        }        heartRateList.add(heartRate);    }    public void addSpo2(int spo2) {        if (spo2List.size() == 60) {            spo2List.remove(0);        }        spo2List.add(spo2);    }    public int getSleepScore() {        if (noiseNumList.size() > 8) {            int score;            int noiseCounter = 0;            for (int n : noiseNumList) {                // 值大于三时判断为噪音                if (n > 2) {                    noiseCounter++;                }            }            score = 100 - 4 * noiseCounter;            sleepScore = score;        }        return sleepScore;    }    public int getAvgSpo2() {        Random r = new Random();        int sum = 0;        int len = 0;        for (int s : spo2List) {            if (s >= 70) {                sum += s;                len += 1;            }        }        if (len > 0)            avgSpo2 = sum / len +  + r.nextInt(3);        else            avgSpo2 = 100;        return avgSpo2;    }}

运行在服务器上的mqtt客户端类,接收一个topic参数作为订阅主题,该类在Springboot的启动类中被初始化,用于接收并处理采集到的睡眠数据。

代码语言:javascript代码运行次数:0运行复制

package cn.spreeze.mqtt;import org.eclipse.paho.client.mqttv3.*;import org.eclipse.paho.client.mqttv3.persist.MemoryPersistence;public class SubClient {    public SubClient(String topic) {        String brokerUrl = "tcp://spreeze.cn:1883";        String clientid = "subClient";        SleepData sd = MqttApplication.sleepData;        try {            // 创建MqttClient实例            MqttClient client = new MqttClient(brokerUrl, clientid, new MemoryPersistence());            // MQTT的连接设置            MqttConnectOptions options = new MqttConnectOptions();            options.setCleanSession(false);            options.setConnectionTimeout(10);            options.setKeepAliveInterval(20);            // 设置回调函数            client.setCallback(new MqttCallback() {                public void connectionLost(Throwable cause) {                    System.out.println("connectionLost");                }                public void messageArrived(String topic, MqttMessage message) {                    String payload = new String(message.getPayload());                    switch (topic) {                        case "zgs/sp/sd":                            sd.addNoiseNum(new Integer(payload));                            System.out.println("噪音: "+payload);                            break;                        case "zgs/sp/hr":                            sd.addHeartRate(new Float(payload));                            break;                        case "zgs/sp/o2":                            sd.addSpo2(new Integer(payload));                            System.out.println("血氧:"+payload);                            break;                    }                }                public void deliveryComplete(IMqttDeliveryToken token) {                    System.out.println("deliveryComplete---------" + token.isComplete());                }            });            // 连接到Mqtt服务器,并订阅主题            client.connect(options);            client.subscribe(topic, 0);        } catch (Exception e) {            e.printStackTrace();        }    }}

移动端数据传输

本次使用小程序作为移动端,参与数据的传输。小程序代码风格独特,文件规范标准,上手体验感较好,且基于微信平台,利用传播和使用。

代码实现:

定义host为固定ip地址

代码语言:javascript代码运行次数:0运行复制

var host = "你的接口ip地址"

采用GET格式连接对应接口,并定义doSuccess()作为成功调用的返回函数:

代码语言:javascript代码运行次数:0运行复制

function get(doSuccess){    wx.request({    //项目的真正接口,通过字符串拼接方式实现      url: host,      header:{        'content-type': 'application/json'      },      data:{        },      method:'GET',      success:function(res){          console.log("获取数据成功!",res.data)          doSuccess(res.data)      },      fail:function(){          console.log("获取数据失败!")      }    })}

使用exports将该调用函数全局化:

代码语言:javascript代码运行次数:0运行复制

module.exports.get = get;

最后在首页的js文件中调用该函数,存储睡眠质量(sleepScore)和平均血氧浓度(avg):

代码语言:javascript代码运行次数:0运行复制

  onLoad: function (options) {    call.get(this.suc);  },  //成功回调  suc(data){    this.setData({      sleepScore:data.sleepScore,      avg : data.avgSpo2    })  },

五、使用说明实物图展示

(1)模型硬件线路展示图

物联网开发_物联网是不是一种骗局

(2)模型硬件封装展示图

物联网开发_物联网是不是一种骗局

(3)模型移动端展示图

物联网开发_物联网是不是一种骗局

操作流程

(1)首先开启后端服务

物联网开发_物联网是不是一种骗局

(2)连接开发板,使用移动电源供电

物联网开发_物联网是不是一种骗局

(3)情景一:用户A模拟嘈杂环境下的睡眠状态,并在移动端查看睡眠质量和平均血氧

物联网开发_物联网是不是一种骗局
物联网开发_物联网是不是一种骗局

(4)情景二:用户B模拟安静环境下的睡眠状态,可以看到睡眠质量得到大幅度的提升

物联网开发_物联网是不是一种骗局

(5)硬件封装:将系统封装外壳,保护系统线路安全,提高用户体验。

物联网开发_物联网是不是一种骗局

六、系统总结

本项目概要如下:

项目名称

项目简介

所用硬件技术、主要硬件模块名称

所用软件技术、第三方库/框架/API名称

睡眠质量检测系统

首先,通过LM386(声音传感器)来检测周围环境声音的有无和判断声音强度的大小,通过数字信号读取固定时间段内噪音的次数,对照现实生活中的状况,将读取的数据转换成当前的环境质量状况,并加入到睡眠质量评估之中。 其次,通过MAX30100(血氧心率传感器)读取固定时间段内用户的血氧浓度和心跳频率,并对照科学现实生活中的对应标准,加入到睡眠质量的评估之中,同时测量出固定时间段内的平均血氧浓度。 最后,利用NodeMCU搭建起MQTT通信,将处理后的数据传到移动端中并显示。用户可以在移动端上查看相关数据和体验助眠服务。

NodeMCU、血氧心率传感器(MAX30100)、声音传感器(LM386)

JavaScript、MQTT、微信小程序

系统优点:

  该系统完全实现了对用户睡眠质量的检测,并使用了严谨的算法将获取到的数据转换成睡眠质量状况;同时引用了MAX30100血氧模块,该模块可以精确的读出人体血氧情况,使得系统可以更加的科学精确;此外,引入了移动端进行数据展示,使用户的体验感直线上升。

系统缺点:

  系统睡眠质量算法的参数种类少,在精确度上无法进一步得以提高。此外,系统没有设计实时检测的功能,在用户需求上无法满足大众。

改进想法:

  加入更多的模块来提高系统对用户睡眠质量的检测,并且在移动端开发出实时检测的功能,来进一步提高用户体验感,满足用户需求。

总结

点我下载工程代码

点击下载文档型成果物

本文到此也快结束了,每次做大作业都是又担心又开心,担心自己做不好,但是每次做完都挺有成就感。虽然做的东西极其的粗糙,但是看看也挺有意思,都是学习路上的成长了吧!

最后附上一张大大大的图:你懂的!!!【三连!三连!三连!】

物联网开发_物联网是不是一种骗局

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/184024.html原文链接:https://javaforall.cn

以上就是物联网开发_物联网是不是一种骗局的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/813136.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月26日 23:32:12
下一篇 2025年11月26日 23:37:35

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何用 CSS 实现微信输入法进度条按钮效果?

    如何在 css 中呈现微信输入法的进度条按钮效果? 问题:微信输入法中的进度条按钮具有独特的外观。如何使用 css 来实现这种效果? 答案:要实现微信输入法的进度条按钮效果,可以使用以下 css 属性的组合: linear-gradient:创建渐变效果。background-position:控制…

    2025年12月24日
    300
  • 微信小程序文本省略后如何避免背景色溢出?

    去掉单行文本溢出多余背景色 在编写微信小程序时,如果希望文本超出宽度后省略显示并在末尾显示省略号,但同时还需要文本带有背景色,可能会遇到如下问题:文本末尾出现多余的背景色块。这是因为文本本身超出部分被省略并用省略号代替,但其背景色依然存在。 要解决这个问题,可以采用以下方法: 给 text 元素添加…

    2025年12月24日
    000
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • HTML、CSS 和 JavaScript 中的简单侧边栏菜单

    构建一个简单的侧边栏菜单是一个很好的主意,它可以为您的网站添加有价值的功能和令人惊叹的外观。 侧边栏菜单对于客户找到不同项目的方式很有用,而不会让他们觉得自己有太多选择,从而创造了简单性和秩序。 今天,我将分享一个简单的 HTML、CSS 和 JavaScript 源代码来创建一个简单的侧边栏菜单。…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信