上一篇
风景网站html源代码怎么编写？，怎么下载
“`
关键样式与布局
| 组件 | CSS 要点 |
|---|---|
| 导航栏 | position: fixed; 配合 z-index 保持置顶 |
| 大图区 | height: 100vh; background-size: cover; 全屏显示 |
| 图片网格 | 使用 display: grid; 或 flexbox 自适应排列 |
| 响应式 | 通过 @media 调整列数，如 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
示例样式（部分）：
{ margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; background: rgba(0,0,0,0.7); color: white; position: fixed; width: 100%; top: 0; } section#hero { height: 100vh; background: url('hero.jpg') center/cover no-repeat; }
图片展示与交互
- 使用 <figure> + <figcaption> 为图片添加说明
- 鼠标悬停可添加 transform: scale(1.05) 放大效果
- 点击图片可弹出灯箱（Lightbox），用 JavaScript 实现模态框
灯箱简化代码：
<div id="lightbox" class="hidden"> <img id="lightbox-img" src="" alt=""> <span class="close">×</span> </div> document.querySelectorAll('.gallery img').forEach(img => { img.addEventListener('click', () => { document.getElementById('lightbox-img').src = img.src; document.getElementById('lightbox').classList.remove('hidden'); }); });
性能优化建议
- 图片使用 WebP 格式，兼顾质量与体积
- 利用 srcset 和 sizes 提供适配不同屏幕的图片
- 懒加载：loading="lazy" 属性或 Intersection Observer API
相关问题与解答
问题1：如何让风景网站适应手机屏幕？
使用 响应式布局，核心方法是：
- 在 <head> 中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 用 CSS 弹性盒（Flexbox）或网格（Grid）搭配 @media 断点，@media (max-width: 768px) { ... } 调整导航为折叠菜单、图片列数从3列变为1列。
问题2：如何加快风景图片的加载速度？
- 压缩图片体积,使用工具如 TinyPNG。
- 采用渐进式加载：先显示低分辨率模糊版，再替换为高清原图。
- 使用 CDN 分发图片，并开启浏览器缓存（设置 Cache-Control 头）。
- 关键图片使用 <link rel="preload"> 提前加载。
