去除无用代码，修改注释

css/body.css

@@ -1,27 +1,25 @@
 /* 基本样式重置 */
 body, html {
-    margin: 0;
+    font-family: Arial, sans-serif; /* 默认字体 */
-    padding: 0;
-    font-family: Arial, sans-serif; /* 设置页面的默认字体 */
     background-color:#f4f4f4;
 } 
 
 /* 禁用页面滚动样式 */
 body.no-scroll {
-    overflow: hidden;  /* 禁止页面滚动 */
+    overflow: hidden;  
 }
 
 /* 主内容区 */
 .main-content {
     margin-left: 270px;
     margin-right: 20px;
-    margin-top: 14px; /* 增加主内容区的上边距 */
+    margin-top: 14px; /* 主内容区的上边距 */
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     z-index: 1;  /* 确保内容在侧边栏下方 */
-    position: relative;  /* 确保相对定位 */
+    position: relative;
 }
 
 .content {

css/font.css

@@ -1,7 +1,7 @@
-/* 使用 @font-face 引用本地字体 */
+/* 引用本地字体 */
 @font-face {
-    font-family: 'Pacifico'; /* 字体名称 */
+    font-family: 'Pacifico'; 
-    src: url('../font/Pacifico.ttf') format('truetype'); /* 设置 .ttf 字体 */
+    src: url('../font/Pacifico.ttf') format('truetype'); /* 自定义 .ttf 字体 */
     font-weight: normal;
     font-style: normal;
 }

css/footer.css

@@ -2,15 +2,11 @@
 footer {
     background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
     color: white;
-    display: flex;  /* 使用 flex 布局 */
+    display: flex;
-    justify-content: center;  /* 水平居中 */
+    justify-content: center;
-    align-items: center;  /* 垂直居中 */
+    align-items: center;
-    padding: 0px;
     position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
     font-size: 14px;
     max-height: 30px;
-    z-index: 2000;  /* 提升侧边栏的层级 */
+    z-index: 2000;
 }

css/header.css

@@ -11,7 +11,7 @@ header {
     justify-content: space-between;
     align-items: center;
     z-index: 3000;
-    transition: all 1s ease; /* 为头部的尺寸变化和样式变化添加过渡效果 */
+    transition: all 1s ease; /* 过渡效果 */
 }
 
 /* 按钮的基础样式 */
@@ -23,19 +23,18 @@ header .toggle-menu {
     color: rgb(235, 10, 10);
     cursor: pointer;
     margin-right: 20px;  /* 设置右边距 */
-    transition: transform 0.3s ease-in-out;  /* 添加平滑过渡效果 */
+    transition: transform 0.3s ease-in-out;  /* 平滑过渡效果 */
 }
 
 /* 悬停效果，按钮背景颜色变化 */
 header .toggle-menu:hover {
-    background-color: rgba(235, 10, 10, 0.1);  /* 增加轻微的背景色变化 */
+    background-color: rgba(235, 10, 10, 0.1);
 }
 
 /* 头部全屏按钮样式（仅大屏幕显示） */
 #fullscreen-button {
     position: absolute;
     right: 16px;
-    top: 0px;
     background: none;
     border: none;
     cursor: pointer;
@@ -47,7 +46,7 @@ header .toggle-menu:hover {
 }
 
 #fullscreen-button:hover {
-    transform: scale(1.20); /* 悬停时上下左右均匀放大 5% */
+    transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */
 }
 
 #search-input {
@@ -63,23 +62,22 @@ header .toggle-menu:hover {
     text-align: center;
     margin-bottom: 20px;
     position: fixed; /* 固定定位 */
-    top: 10px; /* 初始位置距离顶部20px */
+    top: 10px; /* 初始位置距离顶部10px */
     left: 50%;
     transform: translateX(-50%); /* 居中显示 */
-    z-index: 3000; /* 确保在顶部 */
+    z-index: 3000;
 }
 
 /* 鼠标悬停时搜索框展开 */
 #search-input:hover,
 #search-input:focus {
-    width: 600px; /* 展开宽度 */
+    width: 600px;
-    padding: 5px 20px; /* 调整内边距 */
+    padding: 5px 20px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
 }
 
 #logo_head {
     font-family: 'Pacifico', cursive; /* 使用本地字体 Pacifico */
-    margin: 0;
     padding-left: 10px;
     text-align: left;
     font-size: 32px;

css/max_width.css

@@ -14,28 +14,28 @@
         padding: 5px 15px;
         top: 72px;
         left: 50%; /* 使搜索框居中 */
-        z-index: 1000; /* 确保在顶部 */
+        z-index: 1000;
     }
 
     #search-input:hover,
     #search-input:focus {
-        width: 60%; /* 展开宽度 */
+        width: 60%;
-        padding: 5px 20px; /* 调整内边距 */
+        padding: 5px 20px;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     }
 
     /* 小屏幕时侧边栏 */
     .sidebar {
-        width: 80%;  /* 设置侧边栏宽度为60% */
+        width: 80%;
         bottom: 0;
         transform: translateX(-100%);  /* 默认隐藏侧边栏 */
-        z-index: 2000; /* 确保在顶部 */
+        z-index: 2000;
     }
 
     .sidebar.open {
         transform: translateX(0);
         bottom: 0;
-        width: 80%;  /* 确保侧边栏在打开时宽度为60% */
+        width: 80%;  /* 侧边栏在打开时宽度为80% */
     }
 
     .logo {
@@ -44,17 +44,15 @@
 
     /* 小屏幕时主内容区 */
     .main-content {
-        margin-left:  0px;  /* 小屏幕时移除左边距 */
-        margin-right: 0px;  /* 小屏幕时右边距减小 */
         margin-top: 80px;  /* 小屏幕时稍微减小上边距 */
     }
 
     /* 小屏幕时头部 */
     header {
-        height: 40px;  /* 设置头部高度为50px */
+        height: 40px;
-        justify-content: space-between; /* 保持头部内容在两端 */
+        justify-content: space-between;
-        align-items: center; /* 垂直居中内容 */
+        align-items: center;
-        z-index: 3000; /* 确保在顶部 */
+        z-index: 3000;
     }
     /* 小屏幕时菜单按钮 */
     header .toggle-menu {
@@ -65,14 +63,14 @@
         color: rgb(235, 10, 10);
         cursor: pointer;
         position: absolute;
-        top: 10px; /* 距离顶部20px */
+        top: 10px;
-        right: 14px; /* 距离右侧20px */
+        right: 14px;
         transition: transform 0.3s ease-in-out;  /* 添加平滑过渡效果 */
     }
 
     /* 悬停效果，按钮背景颜色变化 */
     header .toggle-menu:hover {
-        background-color: rgba(235, 10, 10, 0.1);  /* 增加轻微的背景色变化 */
+        background-color: rgba(235, 10, 10, 0.1);
     }
 
     #logo_head {

css/min_width.css

@@ -1,9 +1,9 @@
 @media (min-width: 768px) {
     header {
-        background: none; /* 去掉头部背景色 */
+        background: none;
-        box-shadow: none; /* 去掉头部阴影 */
+        box-shadow: none;
-        height: auto; /* 自动高度适应搜索框 */
+        height: auto;
-        padding: 0; /* 去掉多余的内边距 */
+        padding: 0;
         top: 10px;
     }
 

css/sidebar.css

@@ -2,14 +2,13 @@
 .sidebar {
     position: fixed;
     top: -30px;
-    left: 0;
     width: 250px;
     bottom: 24px;
     background-color: #f4f4f4;
     color: rgb(100, 99, 99); /* logo颜色 */
     display: flex;
     flex-direction: column;
-    align-items: center;  /* 水平居中 */
+    align-items: center;
     padding: 20px;
     transition: transform 0.3s ease-in-out;
     z-index: 2000;
@@ -17,12 +16,11 @@
 
 .logo {
     font-family: 'Pacifico', cursive; /* 使用本地字体 Pacifico */
-    margin: 0;
     padding-top: 48px;
-    text-align: center; /* 确保整个 logo 居中 */
+    text-align: center;
     display: flex;
     flex-direction: column; /* 将 part1 和 part2 垂直排列 */
-    align-items: center; /* 确保每个部分居中 */
+    align-items: center;
 }
 
 .logo .part1 {
@@ -44,20 +42,20 @@
     display: inline-block;
     padding: 10px 20px;
     background-color: #f4f4f4;
-    transition: all 0.3s ease;  /* 添加平滑过渡效果 */
+    transition: all 0.3s ease;
 }
 
 /* 侧边栏链接内容的容器 */
 .sidebar-link .link-content {
     display: flex;
     background-color: #f4f4f4;
-    align-items: center;  /* 确保文字和图标垂直居中 */
+    align-items: center;
-    transition: transform 0.3s ease;  /* 添加平滑过渡 */
+    transition: transform 0.3s ease;
 }
 
 /* 悬停时图标和文字一起上浮 */
 .sidebar-link:hover .link-content {
-    transform: translateY(-3px);  /* 向上浮起5px */
+    transform: translateY(-3px);  /* 向上浮起3px */
 }
 
 /* 图标样式 */
@@ -70,42 +68,37 @@
     color: #000;
 }
 
-/* 按钮文本和图标的状态样式 */
-.sidebar-link.fullscreen .icon {
-    transform: rotate(90deg);  /* 图标旋转 */
-}
-
 /* 退出全屏时的样式 */
 .sidebar-link.fullscreen span {
-    content: "退出全屏";  /* 修改文本为"退出全屏" */
+    content: "退出全屏";
 }
 
 .sidebar {
-    flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */
+    flex: 1 1 250px;
 }
 
 /* 侧边栏按钮容器 */
 #sidebar {
     display: flex;
-    flex-direction: column; /* 垂直排列按钮 */
+    flex-direction: column;
-    align-items: center; /* 确保按钮水平居中 */
+    align-items: center;
     padding-top: 30px;
 }
 
 /* 按钮样式：药丸形 */
 .tag-btn {
-    display: block; /* 让按钮变成 block 级元素 */
+    display: block;
-    width: 100px; /* 设置按钮的宽度 */
+    width: 100px;
-    height: 34px; /* 设置按钮的高度 */
+    height: 34px;
-    padding: 8px 10px; /* 调整内边距，让内容更舒适 */
+    padding: 8px 10px;
     border-radius: 20px;
     color: #fff;
     margin: 5px;
     border: none;
     cursor: pointer;
-    font-weight: bold; /* 加粗字体 */
+    font-weight: bold;
-    text-align: center; /* 让文字居中 */
+    text-align: center;
-    line-height: 17px; /* 调整文本垂直居中 */
+    line-height: 17px;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
 }
 

css/toolcard.css

@@ -13,15 +13,15 @@
 /* 保证工具卡片的顺序 */
 .tool-card {
     display: flex;
-    flex-direction: column; /* 使 logo 在上，名称在下 */
+    flex-direction: column;
-    align-items: flex-start; /* 左对齐 */
+    align-items: flex-start;
     background: white;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    text-align: left; /* 左对齐 */
+    text-align: left;
     min-height: 180px;
-    transition: transform 0.5s ease, box-shadow 0.5s ease; /* 工具卡片动画时间设置为 0.5s */
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
 }
 
 /* 工具卡片动画完成状态 */
@@ -40,11 +40,11 @@
 .tool-logo {
     margin-left: 30px;
     margin-top: 10px;
-    width: 50px;  /* 设置logo的宽度 */
+    width: 50px;
     height: 50px;
-    margin-bottom: 10px;  /* 给logo和名称之间留出间距 */
+    margin-bottom: 10px;
-    border-radius: 8px;  /* 设置圆角矩形 */
+    border-radius: 8px;
-    object-fit: cover; /* 保证图片不会被拉伸或变形 */
+    object-fit: cover;
     display:block;
 }
 
@@ -56,9 +56,9 @@
     font-weight: bold;
     color: #333;
     text-decoration: none;
-    position: relative; /* 使下划线定位相对 */
+    position: relative;
-    display: inline-block; /* 确保工具名称独占一行 */
+    display: inline-block;
-    text-align: left; /* 左对齐 */
+    text-align: left;
 }
 
 /* 工具名称的下划线效果 */
@@ -79,15 +79,14 @@
 
 /* 分类标签样式 */
 .tool-category {
-    display: inline-block; /* 使标签处于同一行 */
+    display: inline-block;
-    padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */
+    padding: 4px 16px;
-    /*background-color: #fc8f8f; /* 背景颜色 */
+    color: #ffffff;
-    color: #ffffff; /* 文字颜色 */
+    font-size: 10px;
-    font-size: 10px; /* 字体大小 */
+    font-weight: bold;
-    font-weight: bold; /* 加粗字体 */
+    border-radius: 50px;
-    border-radius: 50px; /* 设置圆角，形成胶囊形状 */
     margin-left: 30px;
-    margin-top: 10px; /* 给标签和描述之间留出间距 */
+    margin-top: 10px;
 }
 
 /* 工具描述样式 */