From d4d5f21984f4cce4f4adeb0692305fc2ff49032f Mon Sep 17 00:00:00 2001 From: Cx330 <1487537121@qq.com> Date: Wed, 26 Mar 2025 13:52:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E6=97=A0=E7=94=A8=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/body.css | 10 ++++------ css/font.css | 6 +++--- css/footer.css | 12 ++++-------- css/header.css | 18 ++++++++---------- css/max_width.css | 30 ++++++++++++++---------------- css/min_width.css | 8 ++++---- css/sidebar.css | 43 ++++++++++++++++++------------------------- css/toolcard.css | 37 ++++++++++++++++++------------------- 8 files changed, 73 insertions(+), 91 deletions(-) diff --git a/css/body.css b/css/body.css index 77e76a6..e4f7715 100644 --- a/css/body.css +++ b/css/body.css @@ -1,27 +1,25 @@ /* 基本样式重置 */ body, html { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; /* 设置页面的默认字体 */ + 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 { diff --git a/css/font.css b/css/font.css index 941562f..8d26c7d 100644 --- a/css/font.css +++ b/css/font.css @@ -1,7 +1,7 @@ -/* 使用 @font-face 引用本地字体 */ +/* 引用本地字体 */ @font-face { - font-family: 'Pacifico'; /* 字体名称 */ - src: url('../font/Pacifico.ttf') format('truetype'); /* 设置 .ttf 字体 */ + font-family: 'Pacifico'; + src: url('../font/Pacifico.ttf') format('truetype'); /* 自定义 .ttf 字体 */ font-weight: normal; font-style: normal; } \ No newline at end of file diff --git a/css/footer.css b/css/footer.css index 1ac4ef2..80a5959 100644 --- a/css/footer.css +++ b/css/footer.css @@ -2,15 +2,11 @@ footer { background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */ color: white; - display: flex; /* 使用 flex 布局 */ - justify-content: center; /* 水平居中 */ - align-items: center; /* 垂直居中 */ - padding: 0px; + display: flex; + justify-content: center; + align-items: center; position: fixed; - left: 0; - right: 0; - bottom: 0; font-size: 14px; max-height: 30px; - z-index: 2000; /* 提升侧边栏的层级 */ + z-index: 2000; } diff --git a/css/header.css b/css/header.css index d7120fe..65a1972 100644 --- a/css/header.css +++ b/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; /* 展开宽度 */ - padding: 5px 20px; /* 调整内边距 */ + width: 600px; + 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; diff --git a/css/max_width.css b/css/max_width.css index 6b13153..f25801e 100644 --- a/css/max_width.css +++ b/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%; /* 展开宽度 */ - padding: 5px 20px; /* 调整内边距 */ - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ + width: 60%; + padding: 5px 20px; + 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 */ - justify-content: space-between; /* 保持头部内容在两端 */ - align-items: center; /* 垂直居中内容 */ - z-index: 3000; /* 确保在顶部 */ + height: 40px; + justify-content: space-between; + align-items: center; + z-index: 3000; } /* 小屏幕时菜单按钮 */ header .toggle-menu { @@ -65,14 +63,14 @@ color: rgb(235, 10, 10); cursor: pointer; position: absolute; - top: 10px; /* 距离顶部20px */ - right: 14px; /* 距离右侧20px */ + top: 10px; + 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 { diff --git a/css/min_width.css b/css/min_width.css index 0f1726a..fe41d68 100644 --- a/css/min_width.css +++ b/css/min_width.css @@ -1,9 +1,9 @@ @media (min-width: 768px) { header { - background: none; /* 去掉头部背景色 */ - box-shadow: none; /* 去掉头部阴影 */ - height: auto; /* 自动高度适应搜索框 */ - padding: 0; /* 去掉多余的内边距 */ + background: none; + box-shadow: none; + height: auto; + padding: 0; top: 10px; } diff --git a/css/sidebar.css b/css/sidebar.css index 598362e..1db1639 100644 --- a/css/sidebar.css +++ b/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; /* 确保文字和图标垂直居中 */ - transition: transform 0.3s ease; /* 添加平滑过渡 */ + align-items: center; + 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; /* 垂直排列按钮 */ - align-items: center; /* 确保按钮水平居中 */ + flex-direction: column; + align-items: center; padding-top: 30px; } /* 按钮样式：药丸形 */ .tag-btn { - display: block; /* 让按钮变成 block 级元素 */ - width: 100px; /* 设置按钮的宽度 */ - height: 34px; /* 设置按钮的高度 */ - padding: 8px 10px; /* 调整内边距，让内容更舒适 */ + display: block; + width: 100px; + height: 34px; + padding: 8px 10px; border-radius: 20px; color: #fff; margin: 5px; border: none; cursor: pointer; - font-weight: bold; /* 加粗字体 */ - text-align: center; /* 让文字居中 */ - line-height: 17px; /* 调整文本垂直居中 */ + font-weight: bold; + text-align: center; + line-height: 17px; transition: transform 0.5s ease, box-shadow 0.5s ease; } diff --git a/css/toolcard.css b/css/toolcard.css index e797d40..4a0a84f 100644 --- a/css/toolcard.css +++ b/css/toolcard.css @@ -13,15 +13,15 @@ /* 保证工具卡片的顺序 */ .tool-card { display: flex; - flex-direction: column; /* 使 logo 在上，名称在下 */ - align-items: flex-start; /* 左对齐 */ + flex-direction: column; + 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和名称之间留出间距 */ - border-radius: 8px; /* 设置圆角矩形 */ - object-fit: cover; /* 保证图片不会被拉伸或变形 */ + margin-bottom: 10px; + border-radius: 8px; + object-fit: cover; display:block; } @@ -56,9 +56,9 @@ font-weight: bold; color: #333; text-decoration: none; - position: relative; /* 使下划线定位相对 */ - display: inline-block; /* 确保工具名称独占一行 */ - text-align: left; /* 左对齐 */ + position: relative; + display: inline-block; + text-align: left; } /* 工具名称的下划线效果 */ @@ -79,15 +79,14 @@ /* 分类标签样式 */ .tool-category { - display: inline-block; /* 使标签处于同一行 */ - padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */ - /*background-color: #fc8f8f; /* 背景颜色 */ - color: #ffffff; /* 文字颜色 */ - font-size: 10px; /* 字体大小 */ - font-weight: bold; /* 加粗字体 */ - border-radius: 50px; /* 设置圆角，形成胶囊形状 */ + display: inline-block; + padding: 4px 16px; + color: #ffffff; + font-size: 10px; + font-weight: bold; + border-radius: 50px; margin-left: 30px; - margin-top: 10px; /* 给标签和描述之间留出间距 */ + margin-top: 10px; } /* 工具描述样式 */