综合实战——从设计到实现

2026-07-24 2026-07-29 约 8000 字预计阅读 16 分钟 - 次阅读 - 条评论

第 1 节概述

经过前面 9 章的学习，我们已经掌握了 Tailwind CSS 的核心工具。现在是时候把它们融会贯通了。

这一章的目标：用纯 HTML + Tailwind 构建一个完整的产品展示页面，用到的技巧来自前九章：

章节	知识点	页面中的体现
01	Tailwind 理念、安装	Play CDN 引入
02	色彩与间距	完整的配色和间距体系
03	文字排印	标题层级、行高、字重
04	Flex 与 Grid	页面骨架、卡片网格
05	边框阴影	卡片圆角、阴影层次
06	背景滤镜	渐变、毛玻璃导航栏
07	动效	按钮悬停、卡片浮起
08	响应式	三档断点适配
09	深色模式	完整的 dark 变体

第 2 节设计思路

images/10-structure.svg

这个页面是一个智能台灯的产品页。设计上我们希望传递的感觉是：

科技感 —— 蓝色到紫色的渐变主色调
品质感 —— 卡片圆角、阴影层次、精致的间距
亲和力 —— 温暖的光线主题，用户评价增强信任

第 3 节最终代码

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星光科技 · Lumina 智能台灯</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-white transition-colors duration-300">

  <!-- ==================== 导航栏 ==================== -->
  <nav class="fixed top-0 inset-x-0 bg-white/70 dark:bg-gray-950/70 backdrop-blur-md border-b border-gray-100/50 dark:border-gray-800/50 z-50">
    <div class="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-16">
      <!-- Logo -->
      <span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
        星光科技
      </span>

      <!-- 桌面导航链接 -->
      <div class="hidden md:flex items-center gap-8 text-sm font-medium">
        <a href="#hero" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">首页</a>
        <a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">特性</a>
        <a href="#reviews" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">评价</a>
        <a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">价格</a>
        <a href="#cta" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">立即购买</a>
      </div>

      <!-- 手机汉堡按钮 -->
      <button class="md:hidden p-2 text-gray-600 dark:text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </nav>

  <main class="max-w-6xl mx-auto px-4 sm:px-6">

    <!-- ==================== Hero 区域 ==================== -->
    <section id="hero" class="pt-28 sm:pt-36 pb-16 sm:pb-20">
      <div class="bg-gradient-to-br from-blue-50 dark:from-blue-950 via-white dark:via-gray-950 to-purple-50 dark:to-purple-950 rounded-3xl p-8 sm:p-12 lg:p-20 text-center
                  border border-gray-100/50 dark:border-gray-800/50">
        <!-- 产品标签 -->
        <span class="inline-block px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs font-semibold rounded-full">
          新品首发
        </span>

        <h1 class="mt-6 text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight">
          智能台灯
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Lumina</span>
        </h1>

        <p class="mt-4 sm:mt-6 text-base sm:text-lg lg:text-xl text-gray-500 dark:text-gray-400 leading-relaxed max-w-2xl mx-auto">
          光线随你而变。一盏懂你的台灯，用 AI 算法模拟自然光的变化，
          让每一刻都有最适合的光线。
        </p>

        <!-- CTA 按钮组 -->
        <div class="mt-8 sm:mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <button class="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-base sm:text-lg font-semibold rounded-xl
                         shadow-lg shadow-blue-600/30
                         transform transition-all duration-200 ease-out
                         hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-600/40
                         active:scale-95">
            立即购买 — ¥499
          </button>
          <button class="px-8 py-4 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-base sm:text-lg font-semibold rounded-xl
                         transform transition-all duration-200 ease-out
                         hover:bg-gray-50 dark:hover:bg-gray-800 hover:-translate-y-1
                         active:scale-95">
            了解更多
          </button>
        </div>

        <!-- 产品预览图区域 -->
        <div class="mt-12 sm:mt-16 bg-gradient-to-b from-gray-100 dark:from-gray-800 to-transparent rounded-2xl p-8 sm:p-12">
          <div class="max-w-md mx-auto aspect-video bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl shadow-2xl
                      flex items-center justify-center text-white/80 text-lg font-medium">
            📸 产品渲染图
          </div>
          <p class="mt-4 text-sm text-gray-400 dark:text-gray-500 text-center">* 实物以最终产品为准</p>
        </div>
      </div>
    </section>

    <!-- ==================== 数据统计 ==================== -->
    <section class="py-12 sm:py-16">
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
        <div class="text-center p-6 rounded-2xl bg-gray-50 dark:bg-gray-900">
          <p class="text-3xl sm:text-4xl font-bold text-blue-600">10万+</p>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">活跃用户</p>
        </div>
        <div class="text-center p-6 rounded-2xl bg-gray-50 dark:bg-gray-900">
          <p class="text-3xl sm:text-4xl font-bold text-purple-600">98%</p>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">用户满意度</p>
        </div>
        <div class="text-center p-6 rounded-2xl bg-gray-50 dark:bg-gray-900">
          <p class="text-3xl sm:text-4xl font-bold text-blue-600">500+</p>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">企业客户</p>
        </div>
        <div class="text-center p-6 rounded-2xl bg-gray-50 dark:bg-gray-900">
          <p class="text-3xl sm:text-4xl font-bold text-purple-600">12项</p>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">专利技术</p>
        </div>
      </div>
    </section>

    <!-- ==================== 特性 ==================== -->
    <section id="features" class="py-16 sm:py-24">
      <div class="text-center">
        <span class="inline-block px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 text-xs font-semibold rounded-full">
          核心功能
        </span>
        <h2 class="mt-4 text-3xl sm:text-4xl font-bold">为什么选择 Lumina</h2>
        <p class="mt-4 text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
          每一个特性都经过精心打磨，只为给你更好的用光体验。
        </p>
      </div>

      <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

        <!-- 特性 1 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-blue-100 dark:from-blue-900 to-blue-50 dark:to-blue-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">🧠</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">AI 智能调光</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            内置高精度环境光传感器，AI 算法实时分析并自动调整亮度与色温，始终保持最舒适的照明。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 自动亮度调节</li>
            <li class="flex items-center gap-2">✦ 色温自适应</li>
            <li class="flex items-center gap-2">✦ 日落模式</li>
          </ul>
        </div>

        <!-- 特性 2 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-green-100 dark:from-green-900 to-green-50 dark:to-green-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">👁️</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">科学护眼</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            无频闪驱动技术，低蓝光模式，通过德国莱茵 TÜV 权威护眼认证，长时间用眼也不易疲劳。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 无频闪</li>
            <li class="flex items-center gap-2">✦ 低蓝光模式</li>
            <li class="flex items-center gap-2">✦ TÜV 认证</li>
          </ul>
        </div>

        <!-- 特性 3 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-purple-100 dark:from-purple-900 to-purple-50 dark:to-purple-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">🎤</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">多平台语音控制</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            全面接入主流智能语音生态，一句话就能开关灯、调亮度、切换模式，解放双手。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 支持 Siri / 小爱</li>
            <li class="flex items-center gap-2">✦ Google Assistant</li>
            <li class="flex items-center gap-2">✦ 离线语音可用</li>
          </ul>
        </div>

        <!-- 特性 4 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-amber-100 dark:from-amber-900 to-amber-50 dark:to-amber-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">🔋</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">超长续航</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            内置 5000mAh 大容量电池，无线使用长达 12 小时，Type-C 快充，随处移动不受限。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 12 小时续航</li>
            <li class="flex items-center gap-2">✦ Type-C 快充</li>
            <li class="flex items-center gap-2">✦ 无线便携</li>
          </ul>
        </div>

        <!-- 特性 5 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-rose-100 dark:from-rose-900 to-rose-50 dark:to-rose-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">1600 万色氛围灯</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            背部氛围灯支持全彩调节，配合音乐律动、电影模式等多种灯效，营造沉浸氛围。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 全彩 RGB</li>
            <li class="flex items-center gap-2">✦ 音乐律动</li>
            <li class="flex items-center gap-2">✦ 多种灯效模式</li>
          </ul>
        </div>

        <!-- 特性 6 -->
        <div class="group p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md
                    transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
          <div class="w-12 h-12 bg-gradient-to-br from-sky-100 dark:from-sky-900 to-sky-50 dark:to-sky-950 rounded-xl
                      flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
            <span class="text-2xl">📱</span>
          </div>
          <h3 class="mt-5 text-xl font-semibold">App 远程控制</h3>
          <p class="mt-3 text-gray-500 dark:text-gray-400 leading-relaxed">
            专属手机 App，远程开关、定时开关、场景预设，回家前就能调好最舒适的光线。
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li class="flex items-center gap-2">✦ 远程操控</li>
            <li class="flex items-center gap-2">✦ 定时任务</li>
            <li class="flex items-center gap-2">✦ 场景预设</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- ==================== 用户评价 ==================== -->
    <section id="reviews" class="py-16 sm:py-24">
      <div class="text-center">
        <span class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs font-semibold rounded-full">
          用户反馈
        </span>
        <h2 class="mt-4 text-3xl sm:text-4xl font-bold">他们都在用 Lumina</h2>
      </div>

      <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 评价 1 -->
        <div class="p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm">
          <div class="flex items-center gap-1 text-amber-400">
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <p class="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            "用了两周，眼睛舒服多了。AI 调光真的很智能，从白天到晚上完全不用手动调节。"
          </p>
          <div class="mt-4 flex items-center gap-3">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/40?img=1" alt="头像" />
            <div>
              <p class="text-sm font-semibold">设计师小王</p>
              <p class="text-xs text-gray-400">UI 设计师 · 2 周使用</p>
            </div>
          </div>
        </div>

        <!-- 评价 2 -->
        <div class="p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm">
          <div class="flex items-center gap-1 text-amber-400">
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <p class="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            "晚上写代码的时候，灯光会自动变暖，不刺眼。还能用小爱同学开关灯，太方便了。"
          </p>
          <div class="mt-4 flex items-center gap-3">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/40?img=2" alt="头像" />
            <div>
              <p class="text-sm font-semibold">程序员大刘</p>
              <p class="text-xs text-gray-400">后端开发 · 1 个月使用</p>
            </div>
          </div>
        </div>

        <!-- 评价 3 -->
        <div class="p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm">
          <div class="flex items-center gap-1 text-amber-400">
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <p class="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            "氛围灯模式太棒了，晚上看电影的时候灯光会跟着画面变化，沉浸感拉满。"
          </p>
          <div class="mt-4 flex items-center gap-3">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/40?img=3" alt="头像" />
            <div>
              <p class="text-sm font-semibold">学生小林</p>
              <p class="text-xs text-gray-400">电影爱好者 · 3 周使用</p>
            </div>
          </div>
        </div>

        <!-- 评价 4（手机上可能隐藏，用 lg:block） -->
        <div class="hidden lg:block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm">
          <div class="flex items-center gap-1 text-amber-400">
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <p class="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            "买给孩子的护眼灯，无频闪确实不一样，孩子说看书眼睛不累了。强烈推荐。"
          </p>
          <div class="mt-4 flex items-center gap-3">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/40?img=4" alt="头像" />
            <div>
              <p class="text-sm font-semibold">张女士</p>
              <p class="text-xs text-gray-400">孩子家长 · 2 个月使用</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ==================== 价格方案 ==================== -->
    <section id="pricing" class="py-16 sm:py-24">
      <div class="text-center">
        <span class="inline-block px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs font-semibold rounded-full">
          价格方案
        </span>
        <h2 class="mt-4 text-3xl sm:text-4xl font-bold">选择适合你的方案</h2>
      </div>

      <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
        <!-- 基础版 -->
        <div class="p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md text-center
                    transition-all duration-200 hover:shadow-lg hover:-translate-y-1">
          <h3 class="text-lg font-semibold">基础版</h3>
          <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">满足日常照明需求</p>
          <p class="mt-6">
            <span class="text-4xl font-bold">¥299</span>
          </p>
          <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400">
            <li>✦ AI 智能调光</li>
            <li>✦ 科学护眼模式</li>
            <li>✦ 3 种亮度场景</li>
            <li class="text-gray-300 dark:text-gray-600">— 氛围灯</li>
            <li class="text-gray-300 dark:text-gray-600">— 语音控制</li>
          </ul>
          <button class="mt-8 w-full py-3 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-semibold rounded-xl
                         transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 active:scale-95">
            选购基础版
          </button>
        </div>

        <!-- 推荐版（高亮） -->
        <div class="p-6 sm:p-8 bg-gradient-to-b from-blue-50 dark:from-blue-950 to-white dark:to-gray-900 rounded-2xl border-2 border-blue-500 shadow-xl text-center relative
                    transition-all duration-200 hover:shadow-2xl hover:-translate-y-1">
          <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-xs font-bold rounded-full">
            最受欢迎
          </span>
          <h3 class="text-lg font-semibold">标准版</h3>
          <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">功能全面，性价比之选</p>
          <p class="mt-6">
            <span class="text-4xl font-bold">¥499</span>
          </p>
          <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400">
            <li>✦ AI 智能调光</li>
            <li>✦ 科学护眼模式</li>
            <li>✦ 8 种亮度场景</li>
            <li>✦ 1600 万色氛围灯</li>
            <li>✦ 语音控制</li>
          </ul>
          <button class="mt-8 w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl shadow-lg shadow-blue-600/30
                         transform transition-all duration-200 active:scale-95">
            立即购买
          </button>
        </div>

        <!-- 旗舰版 -->
        <div class="p-6 sm:p-8 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-md text-center
                    transition-all duration-200 hover:shadow-lg hover:-translate-y-1">
          <h3 class="text-lg font-semibold">旗舰版</h3>
          <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">全部功能，一步到位</p>
          <p class="mt-6">
            <span class="text-4xl font-bold">¥799</span>
          </p>
          <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400">
            <li>✦ 全部标准版功能</li>
            <li>✦ 超长 12 小时续航</li>
            <li>✦ APP 远程控制</li>
            <li>✦ 无线充电底座</li>
            <li>✦ 2 年质保</li>
          </ul>
          <button class="mt-8 w-full py-3 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-semibold rounded-xl
                         transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 active:scale-95">
            选购旗舰版
          </button>
        </div>
      </div>
    </section>

    <!-- ==================== 行动号召 ==================== -->
    <section id="cta" class="py-16 sm:py-24">
      <div class="bg-gradient-to-r from-blue-600 to-purple-700 rounded-3xl p-8 sm:p-16 text-center text-white">
        <h2 class="text-3xl sm:text-4xl font-bold">开启智能用光之旅</h2>
        <p class="mt-4 text-blue-100 max-w-xl mx-auto">
          前 1000 名下单用户享 3 年质保 + 30 天无理由退换
        </p>
        <button class="mt-8 px-10 py-4 bg-white text-blue-700 text-lg font-semibold rounded-xl
                       shadow-xl
                       transform transition-all duration-200 ease-out
                       hover:-translate-y-1 hover:shadow-2xl
                       active:scale-95">
          立即购买 — 限时优惠
        </button>
        <p class="mt-4 text-sm text-blue-200/80">7 天内发货 | 全国包邮 | 顺丰速运</p>
      </div>
    </section>

    <!-- ==================== 页脚 ==================== -->
    <footer class="py-12 border-t border-gray-100 dark:border-gray-800">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div>
          <h4 class="font-semibold text-sm text-gray-900 dark:text-white">产品</h4>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">Lumina 台灯</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">配件</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">App 下载</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-sm text-gray-900 dark:text-white">支持</h4>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">使用指南</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">售后政策</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-sm text-gray-900 dark:text-white">公司</h4>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">加入我们</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-sm text-gray-900 dark:text-white">法律</h4>
          <ul class="mt-4 space-y-2 text-sm text-gray-500 dark:text-gray-400">
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors">服务条款</a></li>
          </ul>
        </div>
      </div>
      <div class="mt-12 pt-8 border-t border-gray-100 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-gray-400 dark:text-gray-500">
        <span>&copy; 2026 星光科技。保留所有权利。</span>
        <div class="flex gap-4">
          <span class="hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors">微信</span>
          <span class="hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors">微博</span>
          <span class="hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors">小红书</span>
        </div>
      </div>
    </footer>

  </main>
</body>
</html>

第 4 节页面结构回顾

1
2
3
4
5
6
7
8
导航栏（fixed + backdrop-blur）
├── Hero 区域（渐变背景 + CTA 按钮组）
├── 数据统计（2×2 网格）
├── 核心特性（3 列卡片网格）
├── 用户评价（3 列评价卡片）
├── 价格方案（3 档对比卡片）
├── 行动号召（品牌渐变横幅）
└── 页脚（4 列链接 + 版权信息）

第 5 节运用了哪些技巧

5.1 布局

全局容器：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 高亮

5.2 色彩与排印

主色调：蓝色到紫色的渐变贯穿全页
文字层级：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 统一风格

5.3 质感与效果

卡片阴影：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

5.4 深色模式

页面中每个 bg-*、text-*、border-* 都配了对应的 dark: 变体
卡片底色从 bg-white 变为 bg-gray-900
渐变背景从 from-blue-50 变为 from-blue-950

5.5 响应式

手机（< 640px）：单列布局，导航折叠
平板（640~1024px）：两列网格，导航展开
桌面（> 1024px）：三列或四列网格，完整布局

第 6 节在 Vue 项目中使用

这是在 Vue 3 项目中集成 Tailwind 的等价写法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div class="max-w-6xl mx-auto px-4 sm:px-6">
    <nav class="fixed top-0 inset-x-0 bg-white/70 dark:bg-gray-950/70 backdrop-blur-md z-50">
      <div class="flex items-center justify-between h-16">
        <span class="text-xl font-bold">星光科技</span>
        <div class="hidden md:flex gap-8">
          <a v-for="link in navLinks" :key="link.label"
             :href="link.href"
             class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
            {{ link.label }}
          </a>
        </div>
      </div>
    </nav>

    <FeatureCard v-for="feature in features" :key="feature.title"
      :icon="feature.icon"
      :title="feature.title"
      :description="feature.description"
    />
  </div>
</template>

<script setup lang="ts">
const navLinks = [
  { label: '首页', href: '#hero' },
  { label: '特性', href: '#features' },
  { label: '价格', href: '#pricing' },
]
const features = [
  { icon: '🧠', title: 'AI 智能调光', description: '...' },
  // ...
]
</script>

第 7 节 Utility-First 的核心心法

写完这个页面，可以总结出几条心法：

一、先布局，后装饰

从页面骨架开始，用 flex 和 grid 搭结构，再慢慢添加颜色、边框、阴影。一步到位很难，逐步迭代很自然。

二、选好主色调，其他都跟着走

页面定一个主色（比如 blue-600），所有按钮、链接、强调色都出自这个色系。页面看起来就有一致性。

三、间距大于装饰

大多数页面不好看不是因为颜色不够多，而是间距没留够。mt-8、gap-6、p-8 这类间距类让页面"透气"。

四、响应式从手机开始

先写 grid-cols-1，再加 sm:grid-cols-2 和 lg:grid-cols-3。这样手机版一定没问题，大屏幕自然更好看。

五、动效不用多，关键处点睛

按钮悬停、卡片浮起、导航栏毛玻璃——这些动效不影响功能，但让页面感觉"精致"。

综合实战——从设计到实现

第 1 节 概述

第 2 节 设计思路

第 3 节 最终代码

第 4 节 页面结构回顾

第 5 节 运用了哪些技巧