• html+css+javascript打造网页内容浮动导航菜单

    1需求分析

    前段时间把“圳品”信息发布到网站上了，内容包括四大块：

    1. 按分布区域统计分析
    2. 按产品类别统计分析
    3. 按认定时间统计分析
    4. 河池市“圳品”清单


    导致网页很长，有同事反映说查看起来不是很方便，于是决定加上一个网页内容浮动导航菜单，把上面这四大块列为菜单项，用户点击相应的菜单项，就跳转到相应的内容，并且提供关闭和收缩、展开导航菜单的功能。如下图：

    2 制作菜单

    为了让菜单显示统一美观，我们使用了css。

    2.1 css的三种使用方式

    2.1.1内部样式表

    将CSS代码写在HTML文档的head标签中，并且用style标签定义

    1. <head>
    2. <style type="text/css">
    3. 选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
    4. style>
    5. <head>

    2.1.2 行内式（内联样式）

    通过标签的style属性来设置元素的样式，只对其所在的标签及嵌套在其中的子标签起作用。

    <标签名 style="属性1:属性值1;属性2:属性值2;……属性n:属性值n;">内容标签名>


    2.1.3 外部样式表（外链式）

    将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

    1. <head>
    2.         <link href="CSS文件的路径" rel="stylesheet" />
    3. head>

    由于网页系统不是我们自己搭建的，所以使用了行内式（内联样式）。


    2.2 实现菜单浮动


    用了css中的position和z-index，即：

    position: fixed; z-index:2;

    2.3 实现菜单半透明效果

    使用了css中的opacity，即：

    opacity:.8

    2.4 实现字体阴影效果


    使用了css中的text-shadow，即：

    text-shadow: 1px 1px 2px black;

    2.5 关闭菜单图标

    用

    显示x，即：

          <div style="cursor: pointer; float:right; margin-right:10px;"  title="关闭">xdiv>


    2.6 收缩/展开菜单的图标

    用

    显示+或-，即：

        <div id="oc" style="cursor: pointer;float:right;margin-right:10px;" title="收缩">－div>


    2.7 网页内容浮动导航菜单显示代码

    如下：  

    1. <div id="nav" style="width:215px; height:155px; border:3px double green;top:400px; left:1000px;position:fixed;z-index:2;">
    2. 	<div style="width:210px; text-align:center;background: green; font-weight:bold; color: white;padding:3px">
    3. 		内容导航
    4. 		<div style="cursor: pointer; float:right; margin-right:10px;"  title="关闭">
    5. 			x
    6. 		div>
    7. 		<div id="oc" style="cursor: pointer;float:right;margin-right:10px;" title="收缩">
    8. 			－
    9. 		div>
    10. 	div>
    11. 	<div id="mn" style="padding:5px;background: #ccffff; opacity:.8; visibility:block">
    12. 		<p style="white-space: normal;">
    13. 			<a href="#a1" style="text-decoration:none;color:black; text-shadow: 1px 1px 2px black">一、按分布区域统计分析a>
    14. 		p>
    15. 		<p style="white-space: normal;">
    16. 			<a href="#a2" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">二、按产品类别统计分析a>
    17. 		p>
    18. 		<p style="white-space: normal;">
    19. 			<a href="#a3" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">三、按认定时间统计分析a>
    20.      	p>
    21. 		<p style="white-space: normal;">
    22. 			<a href="#a4" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">四、河池市“圳品”清单a>
    23. 		p>
    24. 	div>
    25. div>

    2.3 JavaScript代码也有三种使用方式

    要实现关闭和收缩、展开导航菜单的功能，需要使用JavaScript代码来实现。

    与css相似，在网页中使用JavaScript代码也有三种使用方式。

    2.3.1 嵌入式（或称内嵌式）

    将使用


    • 外链式适合javascript代码量较多的情况。

    由于网站平台不是自己开发和运维的，所以使用了行内式。

    2.4 实现关闭导航菜单的功能

    要关闭内容浮动导航菜单，也就是不让内容浮动导航菜单显示出来，可以通过css的display或visibility来实现。

    2.4.1 display的用法

    这里我们用了display来实现。

    CSS 语法

    display: value;

    属性值

    值描述
    none此元素不会被显示。
    block此元素将显示为块级元素，此元素前后会带有换行符。
    inline默认。此元素会被显示为内联元素，元素前后没有换行符。
    inline-block行内块元素。（CSS2.1 新增的值）
    list-item此元素会作为列表显示。
    run-in此元素会根据上下文作为块级元素或内联元素显示。
    compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    table此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
    inline-table此元素会作为内联表格来显示（类似 ），表格前后没有换行符。）。）。）。）。）。）
    table-row-group此元素会作为一个或多个行的分组来显示（类似
    table-header-group此元素会作为一个或多个行的分组来显示（类似
    table-footer-group此元素会作为一个或多个行的分组来显示（类似
    table-row此元素会作为一个表格行显示（类似
    table-column-group此元素会作为一个或多个列的分组来显示（类似
    table-column此元素会作为一个单元格列显示（类似
    table-cell此元素会作为一个表格单元格显示（类似 和 ）
    table-caption此元素会作为一个表格标题显示（类似
    ）
    inherit规定应该从父元素继承 display 属性的值。

    2.4.2 实现关闭功能

     当用户点击关闭导航菜单的按钮x时，我们将导航菜单最外层的

    （其id为nav）的display值设置为none。

    1. <div id="nav" style="width:215px; height:200px; border:3px double green;top:400px; left:1000px;position:fixed;z-index:2;">
    2. ……
    3.         <div style="cursor: pointer; float:right; margin-right:10px;" onclick="document.getElementById('nav').style.display='none'" title="关闭">
    4.             x
    5.         div>
    6. ……
    7. div>

    2.4 实现导航菜单的收缩、展开

    2.4.1 收缩

    当前用户点 - （

    id="oc"，Open、Close）来收缩菜单时，我们设置包含4个菜单项的
    （id="mn"，menu）的display值设置为none，将 -  改为+（
    id="oc"），修改tilte值为“展开”，修改导航菜单最外层的
    （其id为nav）的高度（height）。

    1.         <div id="oc" style="cursor: pointer;float:right;margin-right:10px;"
    2. 	onclick="
    3. 	var nav=document.getElementById('nav');
    4. 	var mn=document.getElementById('mn');
    5. 	var oc=document.getElementById('oc');
    6. 	with (mn.style) 
    7. 	{
    8. 		if (display != 'none') 
    9. 		{
    10. 			 //收缩菜单
    11. 		     display='none'; 
    12. 			 nav.style.height='26px'; 
    13. 			 oc.title='展开';
    14. 			 oc.innerText='＋';
    15. 		}
    16. 		else
    17. 		{
    18. 			//展开菜单
    19. 			//……
    20. 		}
    21. 	}"
    22.    >
    23. 	－
    24. 	div>

    2.4.2 展开

    当用户当前用户点 + （

    id="oc"，Open、Close）来展开菜单时，我们设置包含4个菜单项的
    （id="mn"，menu）的display值设置为'block'，将 +  改为 -（
    id="oc"），修改tilte值为“收缩”，修改导航菜单最外层的
    （其id为nav）的高度（height）。

    1.         <div id="oc" style="cursor: pointer;float:right;margin-right:10px;"
    2. 	onclick="
    3. 	var nav=document.getElementById('nav');
    4. 	var mn=document.getElementById('mn');
    5. 	var oc=document.getElementById('oc');
    6. 	with (mn.style) 
    7. 	{
    8. 		if (display != 'none') 
    9. 		{
    10. 			//收缩菜单
    11. 		    //……
    12. 		}
    13. 		else
    14. 		{
    15. 			//展开菜单
    16. 			display='block';
    17. 			oc.title='收缩'; 
    18. 			nav.style.height='155px';
    19. 			oc.innerText='－';
    20. 		}
    21. 	}"
    22.    >
    23. 	－
    24. 	div>

    3 菜单使用效果

     

    4 完整代码

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     
    7.     <meta name="renderer" content="webkit">
    8.     
    9.     <meta name="force-rendering" content="webkit">
    10.     
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    12.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
    13.     <title>河池市“圳品”信息title>
    14.     head>
    15. <body>
    16. <div id="nav" style="width:215px; height:155px; border:3px double green;top:400px; left:550px;position:fixed;z-index:2;">
    17.     <div style="width:210px; text-align:center;background: green; font-weight:bold; color: white;padding:3px">
    18.         内容导航
    19.         <div style="cursor: pointer; float:right; margin-right:10px;" onclick="document.getElementById('nav').style.display='none'" title="关闭">
    20.             x
    21.         div>
    22.         <div id="oc" style="cursor: pointer;float:right;margin-right:10px;"
    23. 	onclick="
    24. 	var nav=document.getElementById('nav');
    25. 	var mn=document.getElementById('mn');
    26. 	var oc=document.getElementById('oc');
    27. 	with (mn.style) 
    28. 	{
    29. 		if (display != 'none') 
    30. 		{
    31. 			//收缩菜单
    32. 		        display='none'; 
    33. 			 nav.style.height='26px'; 
    34. 			 oc.title='展开';
    35. 			 oc.innerText='＋';
    36. 		}
    37. 		else
    38. 		{
    39. 			//展开菜单
    40. 			display='block';
    41. 			oc.title='收缩'; 
    42. 			nav.style.height='155px';
    43. 			oc.innerText='－';
    44. 		}
    45. 	}"
    46.    >
    47. 	－
    48. 	div>
    49. div>
    50.     <div id="mn" style="padding:5px;background: #ccffff; opacity:.8; visibility:block;line-height:10px">
    51.         <p style="white-space: normal;">
    52.             <a href="#a1" style="text-decoration:none;color:black; text-shadow: 1px 1px 2px black;">一、按分布区域统计分析a>
    53.         p>
    54.         <p style="white-space: normal;">
    55.             <a href="#a2" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black;">二、按产品类别统计分析a>
    56.         p>
    57.         <p style="white-space: normal;">
    58.             <a href="#a3" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">三、按认定时间统计分析a>
    59.         p>
    60.         <p style="white-space: normal;">
    61.             <a href="#a4" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">四、河池市“圳品”清单a>
    62.         p>
    63.     div>
    64. div>
    65. <p style="font-size:32pt;text-align:center;">河池市“圳品”信息p>
    66. <p style="white-space: normal; text-indent: 2em;">
    67.     <anchor id="a1">
    68.         一、<strong>按分布区域统计分析strong>
    69.     anchor> 
    70. p>
    71. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    72. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    73. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    74. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    75. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    76. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    77. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    78. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    79. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    80. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    81. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    82. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    83. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    84. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    85. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    86. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    87. <p style="text-indent: 2em;">
    88.     <strong> 
    89.     <anchor id="a2">
    90.         二、按产品类别统计分析
    91.     anchor> strong>
    92. p>
    93. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    94. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    95. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    96. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    97. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    98. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    99. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    100. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    101. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    102. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    103. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    104. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    105. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    106. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    107. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    108. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    109. <p style="margin-top: 0px;white-space: normal;text-indent: 2em">
    110.     <strong> 
    111.     <anchor id="a3">
    112.         三、按认定时间统计分析
    113.     anchor> strong><br/>
    114. p>
    115. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    116. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    117. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    118. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    119. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    120. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    121. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    122. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    123. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    124. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    125. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    126. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    127. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    128. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    129. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    130. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    131. <p style="white-space: normal;text-indent: 2em">
    132.     <strong>
    133.     <anchor id="a4"> 
    134.         <span style="font-family: 宋体; font-size: 16px; text-indent: 32px;">四、河池市“圳品”清单span>strong>anchor>span>
    135. p>
    136. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    137. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    138. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    139. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    140. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    141. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    142. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    143. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    144. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    145. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    146. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    147. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    148. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    149. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    150. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    151. <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap>
    152. body>
    153.  
    154. html>

  • 相关阅读:
    【离散数学】第一章 测试
    给基于cmake的工程添加uninstall功能
    接口的知识补充
    核酸检测系统崩溃场景浅析
    Redis系列2：数据持久化提高可用性
    浮点数 C语言 IEEE754
    Python基础入门篇【40】--python中的第三方包
    【探索Linux】文件描述符 | 重定向 | 基础IO —— 强大的命令行工具 P.12
    3.2 Keepalived安装部署
    CH573-09-BLE蓝牙安卓应用二次开发——RISC-V内核BLE MCU快速开发教程
  • 原文地址：https://blog.csdn.net/Purpleendurer/article/details/134330715