这是一个使用 HTML 和 Tailwind CSS 复刻的 WebStack.cc 设计师网址导航网站。

• 纯前端静态网页实现
• 响应式设计，适配移动端和桌面端
• 使用 Tailwind CSS 构建 UI
• 简洁美观的界面设计
• 包含常用设计资源网站的分类导航
• 左侧菜单与内容区域联动功能
• 卡片统一高度与悬停效果
• 支持外部链接跳转（如"关于本站"页面）

• HTML5
• Tailwind CSS
• JavaScript (原生)
• Font Awesome 图标

1. 克隆本仓库
2. 直接打开 index.html 即可在浏览器中查看

• Chrome
• Firefox
• Safari
• Edge

网站结构分为侧边栏导航和主内容区两部分。侧边栏包含分类菜单，主内容区域展示各类网站卡片。

├── index.html         // 主页
├── about.html         // 关于本站页面
├── css/
│   └── styles.css     // 自定义样式
├── js/
│   └── main.js        // 交互脚本
└── images/            // 网站图标和资源

• 菜单与内容联动：点击左侧菜单项，右侧内容自动滚动到对应位置
• 子菜单处理：有子菜单的菜单项点击展开子菜单，点击子菜单项跳转到对应内容
• 卡片样式：所有卡片维持统一高度，长文本自动省略，鼠标悬停有阴影效果
• 平滑滚动：使用CSS的scroll-behavior: smooth实现页面平滑滚动效果
• 外部链接：支持打开外部链接，如"关于本站"页面

• 2025-03-30:

  • 修改站点卡片链接打开方式
  • 添加站点卡片点击功能，点击打开对应的 URL
  • 优化卡片视觉效果，添加链接指示器和悬停效果
  • 所有链接在当前页面打开，而非新标签页

• 2025-03-29:

  • 实现导航菜单和网站内容数据配置化
  • 添加 config.js 文件，用于配置导航菜单结构
  • 添加 siteData.js 文件，用于配置网站内容数据
  • 优化 main.js，实现从配置文件动态生成导航菜单和网站内容
  • 简化 index.html，移除静态内容，通过 JS 动态生成

• 2025-03-28:

  • 添加菜单与内容区域联动功能
  • 优化菜单项与内容区域的对应关系
  • 改进"关于本站"功能，链接到独立页面

• 2025-03-27:

  • 统一卡片高度与样式
  • 优化长文本溢出处理

• 2025-03-26:

  • 初始版本上线
  • 实现基础界面布局与响应式设计

(页面截图位置)

欢迎 Fork 本项目并提交 Pull Request。

MIT