# 综合实战——从设计到实现 ## 概述 经过前面 9 章的学习，我们已经掌握了 Tailwind CSS 的核心工具。现在是时候把它们**融会贯通**了。 这一章的目标：用纯 HTML + Tailwind 构建一个完整的产品展示页面，用到的技巧来自前九章： | 章节 | 知识点 | 页面中的体现 | |------|--------|-------------| | 01 | Tailwind 理念、安装 | Play CDN 引入 | | 02 | 色彩与间距 | 完整的配色和间距体系 | | 03 | 文字排印 | 标题层级、行高、字重 | | 04 | Flex 与 Grid | 页面骨架、卡片网格 | | 05 | 边框阴影 | 卡片圆角、阴影层次 | | 06 | 背景滤镜 | 渐变、毛玻璃导航栏 | | 07 | 动效 | 按钮悬停、卡片浮起 | | 08 | 响应式 | 三档断点适配 | | 09 | 深色模式 | 完整的 dark 变体 | ## 设计思路 ![](images/10-structure.svg) 这个页面是一个**智能台灯的产品页**。设计上我们希望传递的感觉是： - **科技感** —— 蓝色到紫色的渐变主色调 - **品质感** —— 卡片圆角、阴影层次、精致的间距 - **亲和力** —— 温暖的光线主题，用户评价增强信任 ## 最终代码 ```html 星光科技 · Lumina 智能台灯
新品首发

智能台灯 Lumina

光线随你而变。一盏懂你的台灯，用 AI 算法模拟自然光的变化， 让每一刻都有最适合的光线。

📸 产品渲染图

* 实物以最终产品为准

10万+

活跃用户

98%

用户满意度

500+

企业客户

12项

专利技术

核心功能

为什么选择 Lumina

每一个特性都经过精心打磨，只为给你更好的用光体验。

🧠

AI 智能调光

内置高精度环境光传感器，AI 算法实时分析并自动调整亮度与色温，始终保持最舒适的照明。

  • ✦ 自动亮度调节
  • ✦ 色温自适应
  • ✦ 日落模式
👁️

科学护眼

无频闪驱动技术，低蓝光模式，通过德国莱茵 TÜV 权威护眼认证，长时间用眼也不易疲劳。

  • ✦ 无频闪
  • ✦ 低蓝光模式
  • ✦ TÜV 认证
🎤

多平台语音控制

全面接入主流智能语音生态，一句话就能开关灯、调亮度、切换模式，解放双手。

  • ✦ 支持 Siri / 小爱
  • ✦ Google Assistant
  • ✦ 离线语音可用
🔋

超长续航

内置 5000mAh 大容量电池，无线使用长达 12 小时，Type-C 快充，随处移动不受限。

  • ✦ 12 小时续航
  • ✦ Type-C 快充
  • ✦ 无线便携
🎨

1600 万色氛围灯

背部氛围灯支持全彩调节，配合音乐律动、电影模式等多种灯效，营造沉浸氛围。

  • ✦ 全彩 RGB
  • ✦ 音乐律动
  • ✦ 多种灯效模式
📱

App 远程控制

专属手机 App，远程开关、定时开关、场景预设，回家前就能调好最舒适的光线。

  • ✦ 远程操控
  • ✦ 定时任务
  • ✦ 场景预设
用户反馈

他们都在用 Lumina

★★★★★

"用了两周，眼睛舒服多了。AI 调光真的很智能，从白天到晚上完全不用手动调节。"

头像

设计师小王

UI 设计师 · 2 周使用

★★★★★

"晚上写代码的时候，灯光会自动变暖，不刺眼。还能用小爱同学开关灯，太方便了。"

头像

程序员大刘

后端开发 · 1 个月使用

★★★★★

"氛围灯模式太棒了，晚上看电影的时候灯光会跟着画面变化，沉浸感拉满。"

头像

学生小林

电影爱好者 · 3 周使用

价格方案

选择适合你的方案

基础版

满足日常照明需求

¥299

  • ✦ AI 智能调光
  • ✦ 科学护眼模式
  • ✦ 3 种亮度场景
  • — 氛围灯
  • — 语音控制
最受欢迎

标准版

功能全面，性价比之选

¥499

  • ✦ AI 智能调光
  • ✦ 科学护眼模式
  • ✦ 8 种亮度场景
  • ✦ 1600 万色氛围灯
  • ✦ 语音控制

旗舰版

全部功能，一步到位

¥799

  • ✦ 全部标准版功能
  • ✦ 超长 12 小时续航
  • ✦ APP 远程控制
  • ✦ 无线充电底座
  • ✦ 2 年质保

开启智能用光之旅

前 1000 名下单用户享 3 年质保 + 30 天无理由退换

7 天内发货 | 全国包邮 | 顺丰速运

``` ## 页面结构回顾 ``` 导航栏（fixed + backdrop-blur） ├── Hero 区域（渐变背景 + CTA 按钮组） ├── 数据统计（2×2 网格） ├── 核心特性（3 列卡片网格） ├── 用户评价（3 列评价卡片） ├── 价格方案（3 档对比卡片） ├── 行动号召（品牌渐变横幅） └── 页脚（4 列链接 + 版权信息） ``` ## 运用了哪些技巧 ### 布局 - **全局容器**：`max-w-6xl mx-auto px-4 sm:px-6` 统一包裹所有内容 - **导航栏**：`fixed top-0 inset-x-0` 固定顶部，`hidden md:flex` 响应式切换 - **卡片网格**：`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` 三段式响应 - **价格卡片**：`flex flex-col` 垂直排列，标准版 `border-2 border-blue-500` 高亮 ### 色彩与排印 - **主色调**：蓝色到紫色的渐变贯穿全页 - **文字层级**：Hero 标题 `text-4xl sm:text-5xl lg:text-6xl` → 章节标题 `text-3xl sm:text-4xl` → 卡片标题 `text-xl` → 正文 `text-gray-500` - **标签圆角胶囊**：`px-3 py-1 rounded-full text-xs` 统一风格 ### 质感与效果 - **卡片阴影**：`shadow-md hover:shadow-xl hover:-translate-y-1` 营造层次 - **毛玻璃导航**：`bg-white/70 dark:bg-gray-950/70 backdrop-blur-md` - **渐变文字**：Logo 用 `bg-clip-text text-transparent` - **主按钮**：渐变背景 + `hover:-translate-y-1` + `active:scale-95` ### 深色模式 - 页面中每个 `bg-*`、`text-*`、`border-*` 都配了对应的 `dark:` 变体 - 卡片底色从 `bg-white` 变为 `bg-gray-900` - 渐变背景从 `from-blue-50` 变为 `from-blue-950` ### 响应式 - **手机（< 640px）**：单列布局，导航折叠 - **平板（640~1024px）**：两列网格，导航展开 - **桌面（> 1024px）**：三列或四列网格，完整布局 ## 在 Vue 项目中使用 这是在 Vue 3 项目中集成 Tailwind 的等价写法： ```vue ``` ## Utility-First 的核心心法 写完这个页面，可以总结出几条心法： **一、先布局，后装饰** 从页面骨架开始，用 `flex` 和 `grid` 搭结构，再慢慢添加颜色、边框、阴影。一步到位很难，逐步迭代很自然。 **二、选好主色调，其他都跟着走** 页面定一个主色（比如 blue-600），所有按钮、链接、强调色都出自这个色系。页面看起来就有一致性。 **三、间距大于装饰** 大多数页面不好看不是因为颜色不够多，而是间距没留够。`mt-8`、`gap-6`、`p-8` 这类间距类让页面"透气"。 **四、响应式从手机开始** 先写 `grid-cols-1`，再加 `sm:grid-cols-2` 和 `lg:grid-cols-3`。这样手机版一定没问题，大屏幕自然更好看。 **五、动效不用多，关键处点睛** 按钮悬停、卡片浮起、导航栏毛玻璃——这些动效不影响功能，但让页面感觉"精致"。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/10.%E7%BB%BC%E5%90%88%E5%AE%9E%E6%88%98%E4%BB%8E%E8%AE%BE%E8%AE%A1%E5%88%B0%E5%AE%9E%E7%8E%B0/