案例6-3 旅游官网（综合项目）
需求定位：打造集视觉体验与交互设计于一体的完整网站，涵盖视差滚动、复杂交互与多端适配，体现前端工程化思维。
开发流程规范（需求分析→结构设计→样式实现→优化调整）：
- 需求分析：明确核心功能（景点展示、线路预订、用户评价）与技术指标（加载速度<3s、适配移动端/平板/桌面端）。
- 结构设计：绘制页面原型图，规划语义化结构（
<main>包含英雄区/景点区/线路区，<aside>放置热门推荐）。 - 样式实现：采用CSS变量定义主题色（
--primary: #2a9d8f），分层实现基础样式、组件样式与页面样式。 - 优化调整：通过Lighthouse检测性能瓶颈，针对性优化（减少重排、压缩资源、懒加载图片）。
核心技术亮点：
- 视差滚动效果：通过
background-attachment: fixed结合background-size: cover实现背景图固定，前景内容滚动的视差效果：
css
复制代码
.hero-parallax {
background-image: url('mountain.jpg');
background-attachment: fixed; /* 视差滚动核心属性，背景图固定 */
background-position: center;
background-size: cover;
height: 100vh; /* 占满视口高度 */
}- 悬浮交互系统：导航项添加下划线动态生成效果（通过
::after伪元素+transform实现），景点卡片实现3D翻转效果（transform-style: preserve-3d）：
css
复制代码
.nav-item::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary);
transition: width 0.3s ease; /* 下划线宽度从0到100%过渡 */
}
.nav-item:hover::after {
width: 100%; /* hover时下划线展开 */
}- 性能优化策略：代码注释需标注优化点，如：
html
复制代码
<img src="scenery.jpg" loading="lazy" alt="山水风景"> <!-- 图片懒加载：延迟加载视口外图片，对应第五章性能优化 -->css
复制代码
.box {
margin: 10px 20px; /* CSS简写属性：合并margin-top/margin-right/margin-bottom/margin-left */
padding: 15px;
border: 1px solid #ddd;
}多端适配方案：采用"移动优先"策略，基础样式针对移动端设计，通过媒体查询逐步增强桌面端体验：
css
复制代码
/* 基础样式（移动端） */
.destination-card { width: 100%; margin-bottom: 20px; }
/* 平板端增强（768px+） */
@media (min-width: 768px) {
.destination-card { width: calc(50% - 20px); float: left; margin-right: 20px; }
}
/* 桌面端增强（1200px+） */
@media (min-width: 1200px) {
.destination-card { width: calc(33.333% - 20px); }
.hero-text { font-size: 3rem; } /* 增大标题字体 */
}