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

迷南。 2024-02-19 11:32 35阅读 0赞

## 1需求分析 ##

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

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

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

![e803952e4d8748a1958d60a206f5686a.png][]

## 2 制作菜单 ##

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

### 2.1 css的三种使用方式 ###

#### 2.1.1内部样式表 ####

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

#### 2.1.2 行内式（内联样式） ####

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

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

####    2.1.3 外部样式表（外链式） ####

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

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

###    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 关闭菜单图标 ###

用<div>显示x，即：

###    2.6 收缩/展开菜单的图标 ###

用<div>显示+或-，即：

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

如下：

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

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

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

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

#### 2.3.1 嵌入式（或称内嵌式） ####

将使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签或<body>标签中。

####    2.3.2 行内式 ####

将JavaScript代码作为HTML标签的属性值使用。

<标签名 onclick="javaScript语句1;javaScript语句2;……javaScript语句n;">内容</标签名>

需要注意的是说明的是，因为行内式有如下缺点。

1.  行内式代码可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。
2.  行内式代码在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

所以，行内式通常只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式

#### 2.3.3 外链式(或称外部式) ####

将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。

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

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

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

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

#### 2.4.1 display的用法 ####

这里我们用了display来实现。

### CSS 语法 ###

display: value;

#### 属性值 ####

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

#### 2.4.2 实现关闭功能 ####

当用户点击关闭导航菜单的按钮x时，我们将导航菜单最外层的<div>（其id为nav）的display值设置为none。

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

#### 2.4.1 收缩 ####

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

#### 2.4.2 展开 ####

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

## 3 菜单使用效果 ##

![c993abf5317d4a8b9b870dde5c59a7a6.gif][]

## 4 完整代码 ##

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        
        <meta name="renderer" content="webkit">
        
        <meta name="force-rendering" content="webkit">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
        <title>河池市“圳品”信息</title>
        </head>
    <body>
    <div id="nav" style="width:215px; height:155px; border:3px double green;top:400px; left:550px;position:fixed;z-index:2;">
        <div style="width:210px; text-align:center;background: green; font-weight:bold; color: white;padding:3px">
            内容导航
            <div style="cursor: pointer; float:right; margin-right:10px;" onclick="document.getElementById('nav').style.display='none'" title="关闭">
                x
            </div>
            <div id="oc" style="cursor: pointer;float:right;margin-right:10px;"
    	onclick="
    	var nav=document.getElementById('nav');
    	var mn=document.getElementById('mn');
    	var oc=document.getElementById('oc');
    	with (mn.style) 
    	{
    		if (display != 'none') 
    		{
    			//收缩菜单
    		        display='none'; 
    			 nav.style.height='26px'; 
    			 oc.title='展开';
    			 oc.innerText='＋';
    		}
    		else
    		{
    			//展开菜单
    			display='block';
    			oc.title='收缩'; 
    			nav.style.height='155px';
    			oc.innerText='－';
    		}
    	}"
       >
    	－
    	</div>
    </div>
        <div id="mn" style="padding:5px;background: #ccffff; opacity:.8; visibility:block;line-height:10px">
            <p style="white-space: normal;">
                <a href="#a1" style="text-decoration:none;color:black; text-shadow: 1px 1px 2px black;">一、按分布区域统计分析</a>
            </p>
            <p style="white-space: normal;">
                <a href="#a2" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black;">二、按产品类别统计分析</a>
            </p>
            <p style="white-space: normal;">
                <a href="#a3" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">三、按认定时间统计分析</a>
            </p>
            <p style="white-space: normal;">
                <a href="#a4" style="text-decoration:none;color:black;text-shadow: 1px 1px 2px black">四、河池市“圳品”清单</a>
            </p>
        </div>
    </div>
    <p style="font-size:32pt;text-align:center;">河池市“圳品”信息</p>
    <p style="white-space: normal; text-indent: 2em;">
        <anchor id="a1">
            一、<strong>按分布区域统计分析</strong>
        </anchor> 
    </p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p style="text-indent: 2em;">
        <strong> 
        <anchor id="a2">
            二、按产品类别统计分析
        </anchor> </strong>
    </p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p style="margin-top: 0px;white-space: normal;text-indent: 2em">
        <strong> 
        <anchor id="a3">
            三、按认定时间统计分析
        </anchor> </strong><br/>
    </p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p style="white-space: normal;text-indent: 2em">
        <strong>
        <anchor id="a4"> 
            <span style="font-family: 宋体; font-size: 16px; text-indent: 32px;">四、河池市“圳品”清单</span></strong></anchor></span>
    </p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </body>
    
    </html>

[e803952e4d8748a1958d60a206f5686a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/aa8e926c981e44d2aaaea7857bbf1bae.png
[c993abf5317d4a8b9b870dde5c59a7a6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/97d03609fe194f9a8b7e08b8ef876efe.png