纯html文件实现目录和文档关联
目录结构
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>项目结题报告</title><style lang="scss">::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scrollbar-track {background: #f1f1f1;}::-webkit-scrollbar-thumb {background: #d4d4d4;border-radius: 5px;}::-webkit-scrollbar-thumb:hover {background: #adadad;}html,body {margin: 0;padding: 0;height: 100%;}.common-layout {width: 100%;height: 100%;/* overflow: hidden; */.header {height: 70px;background-color: #083a55;color: #fff;box-shadow: 0px 0px 10px 2px #0000003d;z-index: 1;padding: 0 20px;display: flex;align-items: center;justify-content: space-between;.title {font-weight: bold;font-size: 28px;}.header-content {.common- {height: 70%;font-size: 18px;border-right: 1px solid rgb(70, 70, 70);margin-left: 20px;padding-right: 20px;cursor: pointer;.current {outline: none;font-size: 16px;}.iconfont {padding-right: 10px;color: #ffffff;}&:last-child {border: 0;}}}}.el-container {height: calc(100% - 70px);background-color: #f9f6ee;display: flex;.aside {margin: 10px 10px;width: 350px;position: relative;isolation: isolate;background-color: #ffffff;box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);.nav {height: 100%;padding: 25px 20px;box-sizing: border-box;font-size: 15px;text-align: left;p {margin-top: 0;font-size: 18px;font-weight: bold;}.list_item {margin: 0 0 0 25px;a {padding: 4px 0;display: inline-block;text-decoration: none;font-size: 15px;color: #5d5d5d;&:hover {color: #409eff;}}}.nav_item {padding: 5px 0;&:hover {cursor: pointer;color: rgb(0, 140, 255);}.active {color: #008cff}}.active {color: #008cff !important;}}}.main {margin: 10px 10px 10px 0;width: calc(100% - 370px);height: calc(100% - 20px);background-color: #ffffff;box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);text-align: left;padding: 0;.ref_container {height: 100%;overflow-y: auto;}.content_cover {width: 100%;height: calc(100vh - 90px);display: flex;margin-bottom: 100px;box-shadow: 0px 3px 10px 5px #ededed70;padding: 0 0 0 20px;box-sizing: border-box;.before {width: 55%;display: flex;flex-direction: column;.logo {height: 35%;img {height: 70%;padding-top: 20px;}}.title {height: 63%;h1 {color: #616161;font-weight: 600;}h4 {margin: 10px 20px;color: #4e4e4e;font-weight: 500;}}.footer {height: 8%;p {margin: 5px 20px;font-size: 16px;}}}.behind {width: 45%;height: 100%;overflow: hidden;img {height: 100%;}}}.content {padding: 0 20px;}.content_first {text-align: left;.cont {font-size: 15px;}.tips {margin: 15px 0;color: cadetblue;}.tip {margin: 0 0 0 10px;font-size: 14px;&:first-child {margin: 0;}}h6 {margin: 10px;text-align: center;}.echarts {display: flex;justify-content: space-between;margin: 40px 5px 0;box-shadow: 0px 0px 15px 2px #e0e0e057;.echart {width: calc(100% - 150px);}.echart2 {display: flex;@media screen and (min-width: 1851px) {iframe {width: 45%;max-width: 700px;}}@media screen and (max-width: 1850px) {flex-direction: column;iframe {width: 100%;max-width: 700px;}}}.echarts_nav {width: 300px;margin-left: 5px;padding: 15px;font-size: 16px;box-sizing: border-box;border-right: 1px solid #e1e1e1;.echarts_nav_item {margin: 10px 0;cursor: pointer;&:hover {color: #008cff}}.item_active {color: #008cff}}}:deep .my-table-header {background-color: #647687;color: white;}}.table7 {height: 420px;overflow-y: auto;}.table_container {height: 420px;overflow-y: auto;}table {width: 100%;border-collapse: collapse;thead {position: sticky;top: 0;background: #647687;z-index: 100;color: white;font-size: 14px;z-index: 100;th {padding: 8px 12px;border-right: 2px solid #ebeef5;&:last-child {border: 0;}}}tbody {border: 1px solid #ebeef5}tr {border-bottom: 1px solid #ebeef5;&:nth-of-type(even) {background-color: #fafafa;}&:hover {background-color: #cacfdd3d;}}td {font-size: 14px;padding: 8px 12px;border-right: 1px solid #ebeef5;}}}select {align-items: center;border-radius: 5px;box-sizing: border-box;cursor: pointer;display: flex;font-size: 14px;gap: 6px;line-height: 24px;min-height: 32px;padding: 4px 12px;position: relative;text-align: left;outline: none;}}}.print {display: none;}@media print {.print {display: contents;}@page {margin: 20px 10px;}body {overflow: visible;}.table_container {height: auto !important;overflow-y: auto;}.el-container {height: auto !important;}.no_print {display: none !important;}.content_cover {box-shadow: unset !important;margin-bottom: 0 !important;height: calc(100vh - 20px) !important;}.main {width: 100% !important;height: 100% !important;box-shadow: unset !important;}.echart2 {display: flex;flex-direction: column !important;iframe {width: 100% !important;}}.ref_container {overflow-y: unset !important;}table {border-collapse: collapse;border: 2px solid #ebeef5;tr {page-break-inside: avoid;break-inside: avoid;border-top: 2px solid #ebeef5;border-bottom: 2px solid #ebeef5;}th {color: #363636 !important;border-right: 0 !important;}}.table_7 {/* page-break-before: always; */}.table7 {th,td {font-size: 12px !important;padding: 8px 9px !important;}}.echarts {justify-content: center !important;box-shadow: unset !important;margin: 0 !important;.echart {width: 100% !important;min-width: 100% !important;}}}</style>
</head><body><div class="common-layout"><div class="header no_print"><div class="title">***报告</div><div class="header-content"><div class="common-"><span class="iconfont icon-human1"></span><span>客户单位：XX科学院</span></div></div></div><div class="el-container"><div class="aside no_print"><div class="nav"><p>目录</p><div id="navList"></div></div></div><div class="main"><div class="ref_container" id="content"><div><div class="content_cover"><div class="before"><div class="logo"><img src="image/1.png"></div><div class="title"><h1>项目结题报告</h1><h4>测序报告</h4><h4>客户单位：XX科学院</h4></div><div class="footer"><p>***有限公司</p><p>服务热线：***</p></div></div><div class="behind"><img src="image/2.png" alt=""></div></div><div class="content" style="page-break-after: always;"><div class="content_first" id="id1"><h3>1.项目概况</h3><img src="image/report/1.png" alt="" title=""></div><div class="content_first"><h3 id="id2">2.流程说明</h3><div class="content_second"><h4 id="id21">2.1.实验流程</h4><div><img src="image/report/2.1.png" alt=""><div id="id211"><h5>2.1.1.aa</h5><p class="cont">************</p></div><div id="id212"><h5>2.1.2.bb</h5><div class="cont">************</div></div><div id="id213"><h5>2.1.3.cc</h5><div class="cont">************************************************</div></div><div id="id214"><h5>2.1.4.dd</h5><p class="cont">************************************************************************************************</p></div><div id="id215"><h5>2.1.5.ee</h5><div class="cont">************************************************************************************************</div></div></div></div><div class="content_second" id="id22"><h4>2.2.信息分析流程</h4><p class="cont">************************************************************************************************</p><img src="image/report/2.2.png" alt=""></div></div><div class="content_first"><h3 id="id3">3.数据质控</h3><div class="content_second"><div id="id31"><h4>3.1 测序数据统计</h4><div><p class="cont">结果见表1。</p><h6 class="table_1">表1 ***</h6><div class="table_container table1"><table><thead class="thead"><tr><th>Sample</th><th>Raw reads</th><th>Raw bases</th><th>Q30(%)</th><th>GC(%)</th><th>Duplication(%)</th></tr></thead><tbody class="no_print"><tr><td>S1</td><td>2</td><td>3</td><td>3</td><td>3</td><td>3</td></tr></tbody></table></div><div class="tips"><p class="tip">注：</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p></div></div></div><h4 id="id32">3.2.质量控制</h4><div id="id321"><h5>3.2.1.质量分布</h5><div><div class="cont">************结果见图1。</div><div class="echarts"><div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;"><select name="cars" id="select1"onchange="selectChange('select1','iframe1','fig1_quality_boxplot')"></select></div><div class="echart"><iframe id="iframe1"src="public/fig1_quality_boxplot/9-16_quality_boxplot.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div><h6 class="h62">图1 </h6><div class="tips"><p class="tip">注：</p><p class="tip">************</p><p class="tip">************</p><p class="tip">************</p></div></div></div><div id="id322"><h5>3.2.2.Base Content分布</h5><div><div class="cont">************</div><div class="echarts" id="echart2"><div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;"><select id="select2" name="cars"onchange="selectChange2('select2','fig2_base_content')"><option value="16-122" selected>16-122</option><option value="16-146">16-146</option><option value="16-161">16-161</option><option value="16-176">16-176</option><option value="16-182">16-182</option><option value="16-183">16-183</option><option value="16-200">16-200</option><option value="16-201">16-201</option><option value="16F">16F</option><option value="16M">16M</option></select></div><div class="echart echart2"><iframe id="iframe21"src="public/fig2_base_content/16-122_read1_base_content.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe><iframe id="iframe22"src="public/fig2_base_content/16-122_read2_base_content.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div><h6 class="h62">图2 </h6><div class="tips"><p class="tip">注：</p><p class="tip">************，</p><p class="tip">************</p><p class="tip">************</p></div></div></div><div id="id33"><h4>3.3.过滤数据统计</h4><div><div class="cont">************</div><p class="cont">1)************</p><p class="cont">2)************</p><div class="cont">************数据处理的步骤如下：</div><p class="cont">1)************</p><p class="cont">2)************</p><p class="cont">3)************</p><div class="cont">数据过滤的基本情况见表2。</div><h6 class="h61">表2 </h6><div class="table_container table2"><table><thead><tr><th>Sample</th><th>Clean reads</th><th>Clean bases</th><th>Clean reads(%)</th><th>Clean bases(%)</th></tr></thead><tbody class="no_print"><tr><td>S1</td><td>70367889</td><td>5595586</td><td>0.838</td><td>1</td></tr><tr><td>S1</td><td>70367889</td><td>5595586</td><td>0.838</td><td>1</td></tr></tbody></table></div><div class="tips"><p class="tip">注：</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************，</p><p class="tip">************</p></div><div><div class="echarts"><div class="no_print"style="font-size: 16px;margin: 40px 0 0 20px;"><select name="cars" id="select3"onchange="selectChange('select3','iframe3','fig3_piecharts')"></select></div><div class="echart"><iframe id="iframe3" src="public/fig3_piecharts/9-3_pie.html"width="100%" height="600px" scrolling="no" frameborder="0"></iframe></div></div></div><h6 class="h62">图3 数据过滤统计</h6></div></div></div></div></div></div></div></div></div></div><script></script>
</body><script>let navList = [{'id': 'id1','title': '1. 项目概况'},{'id': 'id2','title': '2. 流程说明','children': [{'id': 'id21','title': '2.1 实验流程','children': [{'id': 'id211','title': '2.1.1 aa'},{'id': 'id212','title': '2.1.2 bb'},{'id': 'id213','title': '2.1.3 cc'},{'id': 'id214','title': '2.1.4 dd'},{'id': 'id215','title': '2.1.5 ee'}]},{'id': 'id22','title': '2.2 信息分析流程'}]},{'id': 'id3','title': '3. 数据质控','children': [{'id': 'id31','title': '3.1 测序数据统计'},{'id': 'id32','title': '3.2 质量控制','children': [{'id': 'id321','title': '3.2.1 质量分布'},{'id': 'id322','title': '3.2.2 Base Content分布'}]},{'id': 'id33','title': '3.3 过滤数据统计'}]}]//生成目录const titles = []function nav(list, id) {let divElement = document.getElementById(id);list.forEach((item, index) => {let div = document.createElement('div');let a = document.createElement('a');a.textContent = item.title;a.href = '#' + item.id;a.className = 'box';div.id = item.id + '_';div.className = 'list_item';divElement.appendChild(div);div.appendChild(a)titles.push(item)if (item.children) {nav(item.children, div.id)}});}//下拉选择改变后 iframe中的图改变function selectChange(id, iframeId, url) {let selectedValue = document.getElementById(id).valuedocument.getElementById(iframeId).src = 'public/' + url + '/' + selectedValue + '.html';}function selectChange2(id, url) {let selectedValue = document.getElementById(id).valuedocument.getElementById('iframe21').src = 'public/' + url + '/' + selectedValue + '_read1_base_content.html';document.getElementById('iframe22').src = 'public/' + url + '/' + selectedValue + '_read2_base_content.html';}//给每个下拉选择赋值function ceratdOption() {let options = [{ value: '9-3', text: '9-3' },{ value: '9-5', text: '9-5' },{ value: '9-6', text: '9-6' },{ value: '9-16', text: '9-16' },{ value: '9-20', text: '9-20' },{ value: '9-21', text: '9-21' },{ value: '9-26', text: '9-26' },{ value: '9-51', text: '9-51' },{ value: '9-55', text: '9-55' },{ value: '9-56', text: '9-56' }]options.forEach(function (option, index) {document.getElementById('select1').add(new Option(option.text + '_quality_boxplot', option.value + '_quality_boxplot'))document.getElementById('select3').add(new Option(option.text + '_pie', option.value + '_pie'))document.getElementById('select4').add(new Option(option.text + '_coverage', option.value + '_coverage'))document.getElementById('select5').add(new Option(option.text + '_snp_anno_pie', option.value + '_snp_anno_pie'))document.getElementById('select6').add(new Option(option.text + '_indel_anno_pie', option.value + '_indel_anno_pie'))});}//点击菜单高亮const menu = document.getElementById('navList')menu.addEventListener('click', (e) => {highlight(e.target)})// 设置当前菜单高亮function highlight(id) {document.querySelectorAll('.box').forEach(a =>a.classList.remove('active'));// 如果传递的是一个元素if (id instanceof HTMLElement) {id.classList.add('active')return}if (id.startsWith('#')) {id = id.substring(1)}document.querySelector(`a[href="#${id}"]`).classList.add('active')}// 锚点滚动 菜单高亮const handScroll = () => {for (let i = 0; i < titles.length; i++) {// 获取锚点对应内容元素的位置const rect = document.getElementById(titles[i].id).getBoundingClientRect()// rect.top 当前元素距离页面顶部的距离 rect.bottom 当前元素底部距离页面顶部的距离if ((rect.top >= 70 && rect.top < 100) || (rect.bottom > 90 && rect.bottom < 120)) {highlight(`#${titles[i].id}`)break;}}}const contentele = document.getElementById('content')contentele.addEventListener('scroll', handScroll)window.onload = function () {nav(navList, 'navList'); // 页面加载完成后调用函数console.log('onload', titles)ceratdOption()}</script></html>
相关文章：
纯html文件实现目录和文档关联
目录结构 效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>项目结题报告</title><style lang"scss">::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scro…...
C# | 委托 | 事件 | 异步
委托（Delegate）和事件（Event） 在C#和C中，委托（Delegate）与事件（Event）以及函数对象（Function Object）是实现回调机制或传递行为的重要工具。虽然…...
数据结构——顺序表与链表
1. 基础介绍 1、线性结构： 如果一个数据元素序列满足： （1）除第一个和最后一个数据元素外，每个数据元素只有一个前驱数据元素和一个后继数据元素； （2）第一个数据元素没有前驱数据…...
【uniapp】图片添加canvas水印
目录 需求&背景实现地理位置添加水印 ios补充 需求&背景 需求：拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。 效果图： 方案：使用canvas添加水印。 具体实现：上传图片组件是项目里现有的ÿ…...
ElementUI 级联选择器el-cascader启用选择任意一级选项，选中后关闭下拉框
1、启用选择任意一级选项 在 el-cascader 标签上加上配置项： :props"{ checkStrictly: true }"例如： <el-cascaderref"selectedArrRef"v-model"selectedArr":options"optionsList":props"{ checkStri…...
【音视频】ffplay常用命令
一、 ffplay常用命令 -x width：强制显示宽度-y height：强制显示高度 强制以 640*360的宽高显示 ffplay 2.mp4 -x 640 -y 360 效果如下 -fs 全屏显示 ffplay -fs 2.mp4效果如下： -an 禁用音频（不播放声音）-vn 禁…...
5人3小时复刻Manus？开源OpenManus项目全解剖，我的DeepSeek股票报告这样诞生
大家好，我是大 F，深耕AI算法十余年，互联网大厂技术岗。分享AI算法干货、技术心得。 更多文章可关注《大模型理论和实战》、《DeepSeek技术解析和实战》，一起探索技术的无限可能！ OpenManus是什么 1. 项目背景 OpenManus 是由 MetaGPT 核心团队仅用 3 小时复刻而成的开源…...
【Python运维】用Python自动化AWS资源管理：利用boto3实现高效管理S3桶和EC2实例
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 随着云计算的普及，AWS（Amazon Web Services）已经成为许多企业和开发者首选的云平台。为了提高工作效率，自动化管理AWS资源成为了一个热…...
django各种mixin用法
在 Django 中，Mixin 是一种用于扩展类功能的设计模式。通过 Mixin，可以在不修改原有类的情况下，为其添加新的方法或属性。Django 中的 Mixin 广泛应用于视图（View）、表单（Form）、模型（Model）等组件中。以下是 Django 中常见 Mixin 的用法和示例： 一、视图（View）中的…...
Java 大视界 -- Java 大数据在智能教育考试评估与学情分析中的应用（112）
💖亲爱的朋友们，热烈欢迎来到 青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...
Manus AI : Agent 元年开启.pdf
Manus AI : Agent 元年开启.pdf 是由华泰证券出品的一份调研报告，共计23页。报告详细介绍了Manus AI 及 Agent，主要包括Manus AI 的功能、优势、技术能力，Agent 的概念、架构、应用场景，以及 AI Agent 的类型和相关案例࿰…...
【计算机网络】计算机网络的性能指标——时延、时延带宽积、往返时延、信道利用率
计算机网络的性能指标 导读 大家好，很高兴又和大家见面啦！！！ 在上一篇内容中我们介绍了计算机网络的三个性能指标——速率、带宽和吞吐量。用大白话来说就是：网速、最高网速和实时网速。 相信大家看到这三个词应该就…...
FreeRTOS第15篇：FreeRTOS链表实现细节03_List_t与ListItem_t的奥秘
文/指尖动听知识库-星愿 文章为付费内容，商业行为，禁止私自转载及抄袭，违者必究！！！ 文章专栏：深入FreeRTOS内核：从原理到实战的嵌入式开发指南 1 FreeRTOS列表的核心数据结构 FreeRTOS的列表实现由两个关键结构体组成：List_t（列表）和ListItem_t（列表项）。它们共同…...
git 添加额外的远程仓库 URL
要使用 git branch -a 查看 net-next 远程仓库中的所有分支，请按照以下步骤操作： 步骤 1: 确保已添加 net-next 远程仓库 如果尚未添加 net-next 远程仓库，请运行以下命令： git remote add net-next git://git.kernel.org/pub/s…...
不同类型光谱相机的技术差异比较
一、波段数量与连续性 多光谱相机 波段数：通常4-9个离散波段，光谱范围集中于400-1000nm。 数据特征：光谱呈阶梯状，无法连续覆盖，适用于中等精度需求场景（如植被分类）。 高光谱相机…...
Swift系列01-Swift语言基本原理与设计哲学
本文将深入探讨Swift的核心原理、设计理念以及与Objective-C的对比 1. Swift与Objective-C的架构差异分析 Swift和Objective-C尽管可以无缝协作，但它们的架构设计存在本质差异。 1.1语言范式 Objective-C是一种动态语言，建立在C语言之上并添加了Smal…...
《OpenCV》——dlib（人脸应用实例）
文章目录 dlib库dlib库——人脸应用实例——表情识别dlib库——人脸应用实例——疲劳检测 dlib库 dlib库的基础用法介绍可以参考这篇文章：https://blog.csdn.net/lou0720/article/details/145968062?spm1011.2415.3001.5331，故此这篇文章只介绍dlib的人…...
以太网通讯
接口开发笔记-WebApi-CSDN博客 以太网常用通讯协议 1、modbus tcp using EasyModbus; using System;class Program {static void Main(string[] args){// 创建Modbus客户端实例ModbusClient modbusClient new ModbusClient("192.168.1.100"); // IP地址modbusCli…...
UDP学习笔记（一）为什么UDP需要先将数据转换为字节数组
UDP 发送数据时需要先将数据转换为字节数组再发送，主要是因为计算机网络传输的最基本单位是“字节”（Byte）。让我们从以下几个方面来深入理解这个设计选择： 1. 计算机网络只能传输“字节” 在网络通信中，无论是 TCP 还…...
数据分析/数据科学常见SQL题目：连续登录用户、留存率、最大观看人数
文章目录 1. SQL的执行顺序是什么？on和join谁先执行，为什么？on和where的区别？2. 已知表user,字段id, date，求新用户的次日留存率3. 已知表user，字段id，date，求每个日期新用户的次日留…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...