html帮助文档框架

于 2024-01-31 22:31:59 发布
阅读量1k 收藏 21
点赞数 27
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44815745/article/details/135963447
版权
html帮助文档框架
<!DOCTYPE HTML>
<html>
<header>
	<title>帮助文档</title>
</header>
<body>

	<style>
		body {
			margin:0px;
			padding:0px;
		}
		.leftNav {
			position: fixed;
			height: 100%;
			width: 200px;
			background: #D3D3D3;
			left: 0px;
			overflow-y: scroll;
		}
		.content {
			padding-left:200px;
			padding-bottom:0px;
		}
		.sync_height {
			min-height:300px;
		}
		.default_li_hide {
			display:none;
		}
		li:hover{
			background:#778899;
			cursor:pointer;
		}
	</style>


	<div class="leftNav">
		<ul style = "list-style: none">
			<li  id ="debug_doc" ><a>调试说明</a></li>
		<ul style = "list-style: none" class="default_li_hide li_hover" id = "debug_doc_send_sub">
			<li id ="debug_doc_send_sub_hardware_link"><a>设备硬件连接</a></li>
			<li id ="debug_doc_send_sub_ui_link"><a>界面连接</a></li>
			<li id ="debug_doc_send_sub_REH_ui"><a>REH界面图示</a></li>
			<li id ="debug_doc_send_sub_REQ_ui"><a>REQ界面图示</a></li>
			<li id ="debug_doc_send_sub_REV_ui"><a>REV界面图示</a></li>
			<li id ="debug_doc_send_sub_bt_link"><a>蓝牙连接</a></li>
			<li id ="debug_doc_send_sub_bt_display_link"><a>测量显示</a></li>
			<li id ="debug_doc_send_sub_warring"><a>注意事项</a></li>
		</ul>
			<li  id ="comm_proto"><a>通讯协议</a>
			</li>
			<ul style = "list-style: none" class="default_li_hide" id = "comm_proto_send_sub">
				<li id ="comm_proto_send_sub_radar_proto"><a>雷达产品通信协议</a></li>
				<li id ="comm_proto_send_sub_abstracts"><a>概述</a></li>
				<li id ="comm_proto_send_sub_resi"><a>寄存器</a></li>
				<li id ="comm_proto_send_sub_RW"><a>寄存器读写示例</a></li>
				<li id ="comm_proto_send_sub_warring"><a>常见问题和注意事项</a></li>
			</ul>

		</ul>
	</div>
	<div class="content sync_height"  id="myDiv">
			<iframe id="ifrm"  class="sync_height" width="100%"  frameborder="0" src="./html/设备硬件连接.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="true" allowfullscreen="true">
</iframe>
	</div>
	</div>
	    <script>
			// 获取屏幕大小并设置div样式
			window.addEventListener('DOMContentLoaded', function() {
				var screenWidth = window.innerWidth;
				var screenHeight = window.innerHeight;
				var divElement = document.getElementById("myDiv");
				var iframeElement = document.getElementById("ifrm");
				divElement.style.width = screenWidth-220 + "px";
				divElement.style.height = screenHeight-10 + "px";
				iframeElement.style.width = screenWidth-220 + "px";
				iframeElement.style.height = screenHeight -10+ "px";
			});
			//显示书签
			document.getElementById("debug_doc").addEventListener("click", function(){
				var liElement = document.getElementById("debug_doc_send_sub");
				if(liElement.style.display == "none")
					liElement.style.display = "block";
				else
					liElement.style.display = "none";				
			});
			document.getElementById("comm_proto").addEventListener("click", function(){
				var liElement = document.getElementById("comm_proto_send_sub");
				if(liElement.style.display == "none")
					liElement.style.display = "block";
				else
					liElement.style.display = "none";				
			});

			//跳转页面 调试说明
			document.getElementById("debug_doc_send_sub_hardware_link").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/设备硬件连接.html";
			});
			document.getElementById("debug_doc_send_sub_ui_link").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/界面连接.html";
			});
			document.getElementById("debug_doc_send_sub_REH_ui").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/REH界面图示.html";
			});
			document.getElementById("debug_doc_send_sub_REQ_ui").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/REQ界面图示.html";
			});
			document.getElementById("debug_doc_send_sub_REV_ui").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/REV界面图示.html";
			});			
			document.getElementById("debug_doc_send_sub_bt_link").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/蓝牙连接.html";
			});
			document.getElementById("debug_doc_send_sub_warring").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/注意事项.html";
			});
			document.getElementById("debug_doc_send_sub_bt_display_link").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/测量显示.html";
			});
			// 通信协议
			document.getElementById("comm_proto_send_sub_radar_proto").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/REH、REV、REQ 系列雷达产品通信协议.html";
			});
			document.getElementById("comm_proto_send_sub_abstracts").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/概述.html";
			});
			document.getElementById("comm_proto_send_sub_resi").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/寄存器.html";
			});			
			document.getElementById("comm_proto_send_sub_RW").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/寄存器读写示例.html";
			});
			document.getElementById("comm_proto_send_sub_warring").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/常见问题和注意事项.html";
			});

		</script>
</body>
</html>

基本框架

<!DOCTYPE HTML>
<html>
<header>
	<title>帮助文档</title>
</header>
<body>

	<style>
		body {
			margin:0px;
			padding:0px;
		}
		.leftNav {
			position: fixed;
			height: 100%;
			width: 200px;
			background: #D3D3D3;
			left: 0px;
			overflow-y: scroll;
		}
		.content {
			padding-left:200px;
			padding-bottom:0px;
		}
		.sync_height {
			min-height:300px;
		}
		.default_li_hide {
			display:none;
		}
		li:hover{
			background:#778899;
			cursor:pointer;
		}
	</style>


	<div class="leftNav">
		<ul style = "list-style: none">
			<li  id ="debug_doc" ><a>调试说明</a></li>
		<ul style = "list-style: none" class="default_li_hide li_hover" id = "debug_doc_send_sub">
			<li id ="debug_doc_send_sub_hardware_link"><a>设备硬件连接</a></li>
			<li id ="debug_doc_send_sub_ui_link"><a>界面连接</a></li>
			<li id ="debug_doc_send_sub_REH_ui"><a>REH界面图示</a></li>
			<li id ="debug_doc_send_sub_REQ_ui"><a>REQ界面图示</a></li>
			<li id ="debug_doc_send_sub_REV_ui"><a>REV界面图示</a></li>
			<li id ="debug_doc_send_sub_bt_link"><a>蓝牙连接</a></li>
			<li id ="debug_doc_send_sub_bt_display_link"><a>测量显示</a></li>
			<li id ="debug_doc_send_sub_warring"><a>注意事项</a></li>
		</ul>
			<li  id ="comm_proto"><a>通讯协议</a>
			</li>
			<ul style = "list-style: none" class="default_li_hide" id = "comm_proto_send_sub">
				<li id ="comm_proto_send_sub_radar_proto"><a>雷达产品通信协议</a></li>
				<li id ="comm_proto_send_sub_abstracts"><a>概述</a></li>
				<li id ="comm_proto_send_sub_resi"><a>寄存器</a></li>
				<li id ="comm_proto_send_sub_RW"><a>寄存器读写示例</a></li>
				<li id ="comm_proto_send_sub_warring"><a>常见问题和注意事项</a></li>
			</ul>

		</ul>
	</div>
	<div class="content sync_height"  id="myDiv">
        //嵌套网页
			<iframe id="ifrm"  class="sync_height" width="100%"  frameborder="0" src="./html/设备硬件连接.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="true" allowfullscreen="true">
</iframe>
	</div>
	</div>
	    <script>
			// 获取屏幕大小并设置div样式
			window.addEventListener('DOMContentLoaded', function() {
				var screenWidth = window.innerWidth;
				var screenHeight = window.innerHeight;
				var divElement = document.getElementById("myDiv");
				var iframeElement = document.getElementById("ifrm");
				divElement.style.width = screenWidth-220 + "px";
				divElement.style.height = screenHeight-10 + "px";
				iframeElement.style.width = screenWidth-220 + "px";
				iframeElement.style.height = screenHeight -10+ "px";
			});
			//显示书签  二级列表的显示与隐藏
			document.getElementById("debug_doc").addEventListener("click", function(){
				var liElement = document.getElementById("debug_doc_send_sub");
				if(liElement.style.display == "none")
					liElement.style.display = "block";
				else
					liElement.style.display = "none";				
			});

			//跳转页面 调试说明
			document.getElementById("debug_doc_send_sub_hardware_link").addEventListener("click", function(){
				var iframeElement = document.getElementById("ifrm");
				iframeElement.src = "./html/设备硬件连接.html";   // 跳转的网页需要自己编写
			});
		</script>
</body>
</html>

效果如下图

在这里插入图片描述

没有钱的钱仔
关注
  • 27
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
帮助文档 html 模板,html模板
weixin_36360511的博客
06-07 977
选择“使用模板”，配置基本信息，配置新URL对应的版本号，单击“创建”。 也可以选择“导入模板”，但是导入的模板数据需要遵循正确的模板规则。 表1 参数说明 参数 说明 openApi版本 接口定义需要符合openApi规范，这里配置具体openApi的版本号。 选择模板 选择系统预置的模板。ule_type为1时，为文件后缀，“;”进行分割，如.jps;.js。当rule_type为2时，为目录...
html帮助文档
07-30
html帮助文档.chm文件,方便创建开发网站时查找相关的标签
微软HTML帮助集（CHM文件）
最新发布
weixin_40191861的博客
06-09 1256
即（英語：），是继承早先的發展的一种，用来提供線上幫助，是一种应用较广泛的文件格式。因为CHM檔案如一本書一樣，可以提供內容目錄、索引和搜尋等功能，所以也常被用来制作。實際上，微軟閱讀器的.lit就是由CHM擴充而成。1.4Microsoft HTML幫助集 1.x畫面Microsoft Help 2.x瀏覽畫面。
全面的HTML帮助文档
12-22
HTML编写应用程序，分框Frame，表格Table，超文本连接指针，表格标记，逻辑行字体标记，常用的控制符，HTML参考手册等资源。
HTML帮助文件
07-22
资源名称：HTML帮助文件内容简介：HTML介绍HTML文件是什么？HTML表示超文本标记语言（Hyper Text Markup Language）。 HTML文件是一个包含标记的文本文件。 这些标记保速浏览器怎样显示这个页面。 HTML文件必须有htm或者html扩展名。 HTML文件可以用一个简单的文本编辑器创建。 想不想尝试一下？假如你运行的是windows系统，打开记事本，在其中输入以下 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
html5帮助文档
bulote
01-21 614
中文入口：http://www.w3school.com.cn/html5/index.asp 英文入口：http://www.w3schools.com/html5/default.asp
简述HTML文档的框架结构,HTML框架的基本结构.docx
weixin_42358791的博客
06-03 697
HTML匡架的基本结构在一个网页中，并不是所有的内容都需要改变，如网页的导航栏、网页页脚等部 分是不需要改变的，如果在每一个网页中都重复添加这些元素， 不仅会浪费时间， 而且在浏览时也会带来不便、耗费更多的时间，为了解决这种问题，我们可以使 用框架来对网页进行布局。本节单词记忆：标签 l.frameset 2.frame 属性 l.cols 2.rows 3.n oresize4.borderco...
mui移动框架中文帮助文档
07-22
资源名称：mui移动框架中文帮助文档内容简介：MUI 是一个轻量级的 HTML、CSS 和 JS 框架，遵循 Google 的 Material Design 设计思路轻量追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；...
HTML 帮助文件 制作工具
06-09
5. **框架与导航**：HTML帮助文件通常包含一个框架集，用于组织多个相关的HTML页面。导航栏和索引则帮助用户快速找到所需的信息。 6. **编译器整合**：像FAR HTML这样的工具就是将HTML文件、图片、CSS和其他资源...
网页式HTML帮助文档
08-01
网页式HTML帮助文档是一种常见的在线或离线技术文档格式，广泛应用于软件开发、教程制作以及各种知识库的构建。HTML（HyperText Markup Language）是网页的基础语言，它通过标记来组织网页内容，使得文档结构清晰，...
HTML5+CSS3帮助文档
09-16
HTML5+CSS3的帮助文档，用来查阅相关的文档，讷讷恩嗯嗯嗯呃
html 帮助文档
01-14
网页制作完全手册.chm 很全 很详细的 HTML属性 帮助文档。
Html帮助文档
03-01
博文链接：https://xiaoyongxin.iteye.com/blog/226810
HTML帮助文档
12-12
这个压缩包包含了一系列关于HTML帮助文档的资源，可以帮助我们更深入地理解HTML及其相关技术。 首先，"Html 特殊符号.htm" 文件很可能包含了HTML特殊字符和实体的详细信息。在HTML中，有些字符如 "和 ">" 有特殊的...
HTML5前台框架
03-30
在实际应用中，这样的文件可能包含HTML、CSS和JavaScript代码，它们组成了一个可运行的前端框架实例。开发者可以通过研究这些文件，学习如何利用框架的API和结构来构建自己的项目。 在使用HTML5前台框架时，开发者...
帮助中心 html模板,html模板
weixin_34597791的博客
05-31 636
页面”对话框中，选择“页面模板”进行配置。 “页面模板”选择“系统默认”时，默认返回WAF内置的HTTP返回码为418的拦截页面。 “页面模板”选择“自定义”时，如图2所示。 HTTP返回码：自定义页面配置的返回码。 页面类型：可选择text/html、text/xml和application/json三种类型。huaweicloud.com/api-ticket/ticket_api_10001...
htmlhelp帮助文档
11-26
希望大家下载了 能帮助到大家 htmlhelp帮助文档 很有用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值