项目简介link

Atroly 是一套面向律师/法律服务行业的静态 HTML 网站模板，基于 Bootstrap 框架构建。包含 4 个首页变体及博客、案例研究、常见问题、联系方式等多个业务页面，适合快速搭建法律咨询机构的展示型网站。

技术栈link

• Bootstrap 5 — 响应式 CSS 框架
• jQuery — DOM 交互与动画逻辑
• Slick Slider — 轮播组件
• Font Awesome / Line Awesome — 图标库
• 静态 HTML — 无需后端，纯前端部署

项目结构link

Atroly/
├── index.html          # 首页 1
├── index2.html         # 首页 2
├── index3.html         # 首页 3
├── index4.html         # 首页 4
├── about.html          # 关于我们
├── practice-area.html  # 业务领域
├── blog.html           # 博客列表
├── contact.html        # 联系页面
├── faq.html            # 常见问题
├── gallery.html        # 图集
├── testimonial.html    # 客户评价
├── 404.html            # 错误页面
└── assets/
    ├── css/
    │   └── main.css    # 主题主样式（包含变量、布局、组件）
    └── js/
        └── main.js     # 交互逻辑（计数器、侧边栏、轮播、滚动效果）

核心文件说明link

• assets/css/main.css — 主题主样式表，定义颜色变量、字体、排版及所有页面布局
• assets/js/main.js — 核心交互脚本，实现数字滚动动画、移动端侧边栏、滚动置顶等交互
• index.html — 首页模板，含导航、页脚和完整内容区块；另提供 index2/3/4 三个变体

快速开始link

纯静态项目，无需 npm install。在本地直接用浏览器打开 index.html 即可预览全部页面；部署时将整个文件夹上传至任意静态服务器或 GitHub Pages。

使用建议link

模板提供了 4 种不同风格的首页，建议根据法律机构的品牌定位选择其中一种作为基础，再通过修改 main.css 中的 CSS 变量（如 --base、--heading-font）快速调整配色和字体。页面内容可直接替换 HTML 中的占位文字和图片路径。