设计公司官网模板 | 品牌设计作品集网站，纯静态 HTML 开箱即用

基于 jQuery + Swiper 打造的品牌设计公司官网模板。纯静态 HTML，无需构建工具，替换品牌素材即可上线。

设计公司的官网，就是自己最好的作品集。这套模板围绕设计服务行业把业务展示、案例体系、新闻动态等页面全部做完，克制的版式让作品图成为主角，10 个页面即拆即用，设计工作室、广告公司、品牌咨询替换案例图与文案，半天即可上线一个”作品即门面”的官网。

模板亮点

1. 10 页设计服务页面体系

• 首页（index）：品牌主张 + 精选案例 + 业务概览
• 服务项目（services）：画册设计、包装设计、企业 CI、官网搭建、电商装修设计、导示系统六大业务线展示，并含合作模式说明
• 案例展示（case / case_show）：案例列表与详情，作品集核心承载
• 新闻动态（news / news_show）：公司动态与观点输出
• 关于我们（aboutus）、联系我们（contact）

2. 业务展示即销售话术

services.html 按”业务线 + 合作模式”组织内容，六大服务与报价沟通逻辑已编排成型，设计公司最常见的”服务说不清”问题在页面上直接解决。

3. 大图版式，作品当主角

模板版式克制、留白充分，突出案例大图，符合设计行业审美，替换作品图即能撑起专业感。

4. 完整响应式适配

PC 端与移动端双套样式（style_pc.css / style_mobile.css），手机端作品浏览体验完整。

技术栈

技术	用途
HTML5 / CSS3	页面结构与样式
jQuery	DOM 操作与交互
Swiper	轮播
normalize.css	样式重置

项目结构

hp/
├── index.html                 # 首页
├── aboutus.html               # 关于我们
├── services.html              # 服务项目（六大业务 + 合作模式）
├── case.html / case_show.html # 案例列表 / 详情
├── news.html / news_show.html # 新闻列表 / 详情
├── contact.html               # 联系我们
├── header.html / footer.html  # 公共头部 / 页脚
├── css/                       # normalize + PC/移动双端样式
├── js/                        # jQuery / Swiper
└── img/                       # 作品与品牌素材

快速开始

纯静态模板，无需安装依赖：

# 方式一：直接双击 index.html 即可浏览

# 方式二：使用本地静态服务器（推荐）
npx serve .

二次开发指南

需求	操作
更换品牌	替换 img/ 中的 logo 与图片，同名覆盖即可
修改文案 / 链接	各 HTML 内文案与 href 直接修改
更新作品集	case.html / case_show.html 换图换文案
调整业务线	services.html 六大业务区块按需增删
增删页面	复制任一页面改名改造，互不影响

适用场景

品牌设计公司、平面设计工作室、广告公司、包装设计公司、企业形象咨询、电商代运营、印刷服务商，也可作为任何”以作品集为核心”的创意机构官网。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2 周起	半天上线
案例体系	需自行设计	列表 + 详情结构已成型
移动端适配	需额外开发	双端样式已完成
维护成本	自行承担	纯静态结构，换图即可迭代

在线预览

纯静态文件，上传至任意静态托管（Vercel / Netlify / 阿里云 OSS / 宝塔）即可直接访问。

http://8.166.93.126:8989/hp