index.html如何制作一个带图标的侧边功能栏？-html教程-PHP中文网

用 css grid + flex 实现响应式图标侧边栏：父容器设 display: grid; grid-template-columns: 64px 1fr;，侧边栏用 display: flex; flex-direction: column; align-items: center; gap: 16px;，图标内联 svg 并设 fill: currentcolor，移动端用 checkbox hack 控制显隐，active 状态手动添加 class 并用 border-left 和颜色统一高亮。

index.html如何制作一个带图标的侧边功能栏？

用 CSS Grid + Flex 实现响应式图标侧边栏

直接用 display: grid 定义整体布局，左侧固定宽度区域放图标栏，右侧主内容区自适应。别用浮动或绝对定位——容易和现代框架（如 Vue/React 的根容器）冲突，也难适配移动端。

关键点在于：侧边栏本身不设高度，靠父容器撑开；图标用 <svg></svg> 内联或 <img src="icon.svg">，避免字体图标在低分辨率屏发虚或加载失败时空白。

给 body 或最外层容器设 display: grid; grid-template-columns: 64px 1fr;（64px 是常见图标配宽）
侧边栏容器加 display: flex; flex-direction: column; align-items: center; gap: 16px;
每个图标项用 <a></a> 包裹，加 padding: 12px 0; 提高点击热区，别只靠图标本身
鼠标悬停状态必须加 background-color: #f0f0f0; 或 border-radius: 8px;，否则移动端点不中

图标点击后如何高亮当前项？

纯静态 index.html 没有路由系统，不能靠 JS 监听 URL 变化。最稳的方式是：每个页面单独写，手动给对应 <a></a> 加 class="active"，再用 CSS 控制样式。

别试图用 JS 解析 window.location.pathname 自动匹配——本地双击打开的 file:// 协议下会读不到路径，直接报错或误判。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

高亮样式推荐用 border-left: 4px solid #007bff;（比背景色更清晰）
.sidebar a.active { color: #007bff; } 配合 SVG 的 fill 属性同步变色
如果图标是 PNG，记得准备两套图：默认态 + active 态，用 class 切换 src

移动端怎么收起侧边栏？

用 CSS 媒体查询 + checkbox hack 最轻量，不依赖 JS 库。核心是把 <input type="checkbox" id="menu-toggle"> 放在侧边栏前，用 <label for="menu-toggle"></label> 当汉堡按钮，再用 :checked 控制显示隐藏。

注意：不要用 display: none 彻底移除 DOM，会导致焦点丢失、屏幕阅读器不可访问。改用 visibility: hidden; width: 0; overflow: hidden; 更稳妥。

桌面端默认展开：@media (min-width: 768px) { .sidebar { width: 64px; } }
移动端默认收起：.sidebar { transition: width 0.3s ease; } + #menu-toggle:checked ~ .sidebar { width: 240px; }
汉堡按钮用 <span></span> 三层横线，CSS 画，别引第三方 iconfont