简介面向前端初学者的仿苹果官网HTML基础教程资源包以HTML为骨架、CSS为样式、JavaScript与jQuery为交互手段讲解如何搭建类似苹果官网的页面结构与导航、轮播等特效。资源共449个文件、8.54MB包含12个HTML页面、14个CSS样式表、18个JS脚本以及250个PNG、147个JPG和8个GIF图片素材覆盖导航栏、下拉菜单、轮播图、淡入淡出等效果的具体实现。已有1871人学习下载。教程从header、nav、section、article、footer等标签的语义化组织到jQuery动画事件、AJAX动态加载均有示例多个CSS文件如base.css、main.css、nav.css、slideshow.css按模块拆分便于对照源码理清目录结构与开发流程。这套资源能帮助读者建立前端开发的整体认知既适合课堂搭配练习也适合自学时参考模仿为深入掌握网页交互和响应式布局打下基础。1. 用“防苹果官网”练HTML基础为什么复刻Apple.com是最硬的练级副本“防苹果官网”翻译成大白话就是“仿Apple官网”——把 Apple.com 当靶子用 HTML 基础一步步复刻它。这个练手项目在中文前端圈流传了得有十年真正做完的人不多原因很直白Apple 官网看起来只有一张大图、几行文字、几个链接极简到不行可你真动手之后会发现自己连一个导航栏的“毛玻璃”都调不明白。光是头部导航的滚动收窄、首屏字号随视口缩放、模块间距的节奏感每一个细节都在逼你把手里的 HTMLCSSJS 基础语法规整到能用为止。这篇笔记适合两类人一类是刚学完 HTML 标签、CSS 选择器和一点 JavaScript兜里没有正经项目练手的新手另一类是写过一阵子后台管理系统、想摸摸“有设计感的前端”是什么味的开发者。整个项目不碰任何前端框架不依赖 Node 环境一个文本编辑器加一个浏览器就能开工。它能教给你的也不只是“苹果的视觉”而是“一页看起来简单的东西我做的时候到底会在哪里塌”的预判力。2. 页面骨架先行Apple官网的HTML基础与语义化标签打开苹果官网很多人的第一反应是“图真大”。但图片是美术的事前端要复刻的是信息架构。Apple.com 的页面结构其实特别稳定顶栏导航、首屏主推、多组产品区、底部链接。把这个骨架用标准 HTML 写清楚页面就算成功了一半剩下的一半才是 CSS 和 JavaScript 的活。我见过不少初学者一上来就翻官网源码然后被密密麻麻的 class 名和嵌套 div 劝退。其实你不需要抄它的 class你需要抄的是它的语义结构。2.1 头部导航的HTML基础用语义化替代div堆叠Apple 官网的导航在桌面端是 6 个左右的产品入口加一个搜索按钮、一个购物袋图标。最常见、也最可靠的写法是列表加链接而不是一排 div 套 div!-- 仿 Apple.com 的导航骨架 -- body nav classsite-nav aria-label主导航 ul classsite-nav__list lia href#macMac/a/li lia href#ipadiPad/a/li lia href#iphoneiPhone/a/li lia href#watchWatch/a/li lia href#musicMusic/a/li lia href#support技术支持/a/li /ul button classsite-nav__icon aria-label搜索搜/button /nav !-- 首屏主宣区 -- main section classhero h1 classhero__titleMacBook Pro/h1 p classhero__subtitle强得出圈。/p ul classhero__links lia href#detail进一步了解 /a/li lia href#buy购买 /a/li /ul /section /main /body这段标记看上去简单但藏着两个关键选择。第一导航里直接用ul li a不给每个入口单独套 div。理由很实际浏览器和读屏器都靠这个结构识别导航层级后续做键盘焦点管理时也只需要操作一个 list。你用一排div也能显示成一样的横排可语义就废了盲人用户听到的是一堆“未知元素”。第二主宣区我刻意保持h1 p ul的顺序。h1是页面主标题p是副文案ul放动作按钮组。搜索引擎和辅助技术会按这个顺序读取内容标题权重、阅读顺序全靠它撑起来。很多仿站项目看着像苹果却经不起 DevTools 的 accessibility 面板检查问题就出在这里。参数说明aria-label给纯图标按钮提供文字名称避免读屏器只报出“按钮”而没有含义。ul的默认圆点和内边距需要在 CSS 里重置常见做法是list-style: none; padding: 0;。hero区一般设置min-height: calc(100vh - 48px)让首屏刚好填满视口减去导航的高度这在移动端比纯100vh稳后面避坑章节细说。2.2 产品卡片的HTML标记四宫格与响应式图片的写法苹果官网中段是一个个产品板块。这里挑最常见的“四宫格”结构说。每个格子独立成article不依赖外层容器的语义!-- 四宫格结构每个格子独立成 article -- section classtile-grid aria-label产品展示区 article classtile h2 classtile__titleiPhone 15 Pro/h2 p classtile__subtitle钛金属强出圈。/p a classtile__link href#phone-detail进一步了解/a /article article classtile tile--dark h2 classtile__titleApple Watch/h2 p classtile__subtitle健康的未来戴上就现在。/p a classtile__link href#watch-detail购买/a /article /section为什么用article而不是div因为每个产品卡片即使单独拿出来读者也能看懂它是“一个独立产品的内容块”这就是article的语义定义。标题用h2是因为h1已经在首屏出现过标题层级不允许跳级这是 HTML 基础里的硬规矩。我习惯在article里用picture source去做背景图响应式而不是给div直接设置background-image。后者的写法最大问题是移动端加载的还是桌面大图白白浪费流量picture classtile__bg source media(min-width: 720px) srcsetimages/tile-1440.jpg img srcimages/tile-720.jpg altiPhone 15 Pro 在暗光环境下的侧面特写 /picture逻辑说明source的media写断点浏览器会按视口宽度选第一个命中的source都不命中则用最底下的img兜底。alt别写“图片”两个字要写图片里实际承载的信息这是 SEO 和可访问性的共同要求。背景图按 2 倍尺寸给比如显示宽度 720px 就给 1440px为了适配 Retina 屏肉眼看起来才不发虚。超过 720px 的屏幕上浏览器加载 1440px 那张小屏手机上则只加载 720px。这就是 HTML 基础里最容易被人忽略的媒体查询的应用场景。2.3 reset与CSS变量跨设备一致的起点HTML 的默认样式在不同浏览器里是有差异的ul有默认缩进h1的字号在 Chrome 和 Safari 里不一样。所以第二步是写一个最小的 reset别用那种“通杀 reset”的大包你只需要清理自己会用到的标签/* resets.css */ *, *::before, *::after { box-sizing: border-box; } body, ul, figure, h1, h2, p { margin: 0; } ul { list-style: none; padding: 0; } img { max-width: 100%; display: block; }说明一下这样做的逻辑。box-sizing: border-box把宽度计算改成“宽就是总宽”这样写响应式布局时不会出现“宽度 50% 加 16px 内边距就换行”的翻车现场。margin: 0只针对列出的标签保留h3等可能用不上的默认值。img的max-width: 100%是防大图溢出容器的常规兜底。再做全局 CSS 变量把苹果官网的色板和字体栈先定下来。这一步不做后面所有颜色都会写成魔法数字改一个链接色要搜遍全文件:root { --color-bg: #fff; --color-text: #1d1d1f; --color-secondary: #86868b; --color-link: #06c; --nav-height: 48px; }参数说明苹果官网的正文黑色其实是#1d1d1f不是纯黑纯黑在大屏上会显得死板。链接蓝是#06c它在白底上的可读性比纯蓝更好也是 iOS 系统控件的默认蓝。--nav-height统一给导航高度后面写scroll-padding-top、吸顶偏移都要用它避免各处写死数字。提示仿站练手时注意素材版权。Apple 官网的图片和文案属于苹果公司你自己的练习页面不要拿去商用更不要发布到线上。学习 HTML 基础结构和布局才是该复刻的东西素材自己随便找占位图代替就行。3. 把质感做出来HTMLCSSJS基础语法里的样式层实现这里要进入正题了。苹果官网“高级感”的来源不是某个特效是字体、字号、字间距、行高这些看起来不起眼的基本参数。HTMLCSSJS 基础语法三件套里CSS 负责的就是这部分“看得见的质感”。3.1 复刻苹果排版字号、行高、字重的参数记忆苹果官网的标题有个明显特征大字号、负字间距、行高紧凑。复刻它用三行 CSS 就能做到 80% 的观感/* 复刻 Apple.com 的排版风格 */ :root { --font-stack: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Microsoft YaHei, sans-serif; --title-size: clamp(40px, 8vw, 96px); --subtitle-size: clamp(18px, 3vw, 28px); --line-height-tight: 1.05; } body { font-family: var(--font-stack); color: var(--color-text); line-height: var(--line-height-tight); margin: 0; -webkit-font-smoothing: antialiased; } .hero__title { font-size: var(--title-size); font-weight: 700; letter-spacing: -0.015em; text-align: center; } .hero__subtitle { font-size: var(--subtitle-size); font-weight: 400; color: var(--color-secondary); text-align: center; }逻辑说明font-size用clamp()实现流式缩放视口越宽字号越大但下限 40px、上限 96px。这个函数是响应式排版的底线工具学 HTML 基础时就应该掌握而不是只知道媒体查询。letter-spacing: -0.015em是给大标题用的负字间距。苹果官网的大标题字间距是收紧的视觉上更像“一整块”而不是几个散字。中文环境下建议不要把负值压到超过-0.02em笔画会糊。line-height: 1.05只适合标题不适合正文。正文我给的是 1.5 左右这个差异是排版的基础常识。有个坑是必经之路Windows 上没有苹方字体-apple-system会直接跳过落到Segoe UI或Microsoft YaHei。雅黑渲染偏扁平同一个页面在 Mac 和 Windows 上观感差异巨大这不是你的代码问题是字体渲染的差异。做好心理预期别在排查上浪费时间。参数说明-webkit-font-smoothing: antialiased只对 macOS 的 Safari/Chrome 有效让字体边缘更平滑。Windows 上没有对应效果写了也不报错。clamp(40px, 8vw, 96px)里的8vw是“中间值”表示字号随视口宽度按 8% 比例增长但增长被上下限夹住。3.2 导航毛玻璃backdrop-filter与透明度参数苹果官网的导航栏是半透明的往下滚动时背景会变得更不透明产生一种“毛玻璃底下有内容在模糊穿过”的效果。实现它只需要三行关键 CSS/* 仿苹果导航半透明 毛玻璃 */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: 48px; background: rgba(22, 22, 23, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); z-index: 100; transition: background 0.3s ease; } .site-nav.scrolled { background: rgba(22, 22, 23, 0.92); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }代码说明position: fixed让导航在滚动时不跟随页面滚走。注意它脱离了文档流下面内容需要margin-top或者间距来补位否则首屏内容会被导航盖住。backdrop-filter: blur(20px)是对背景的“模糊渲染”省略-webkit-前缀的话部分旧版 Chrome 会静默失效。background的透明通道是这张毛玻璃能不能“看出来”的关键。rgba(22, 22, 23, 0.8)意思是背景色是深灰但只有 80% 不透明配合模糊才有效果。.scrolled类是滚动超过一定高度后由 JS 添加的下一章写 JS 时会用到。这个类把背景透明度从 0.8 提到 0.92同时加一条 1px 的阴影。苹果官网的导航在滚动后的观感变化就是这个“透明度加深 底部分界线出现”不需要复杂动画。提示transition写在初始状态里不要写在.scrolled里。CSS 原则是过渡要从“默认状态”到“变化状态”写在目标状态里会导致鼠标移出时没有过渡效果。3.3 宫格与卡片空隙用Grid一行解决响应式排布苹果官网中段的卡片区域会随着屏幕宽度自动调整列数大屏四列平板两列手机一列。用grid一行repeat(auto-fit, minmax(300px, 1fr))就能实现不用写三个媒体查询.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 16px; max-width: 2560px; margin: 0 auto; }参数说明minmax(300px, 1fr)最小 300px空间足够就按 1fr 分配剩余宽度。这行代码的魔力在于它不写死列数容器多宽就有几列。auto-fit与auto-fill的区别前者会把空列折叠掉后者会保留空列。做卡片场景几乎都选auto-fit。gap: 16px是 grid 的间距属性不要用给每个子元素加 margin 的旧方案——margin 会让最后一行多出 16px这也是排版翻车的频率最高的点之一。max-width: 2560px给超宽屏一个限制否则 4K 屏幕上每张卡片会被拉成一条长带子失去苹果官网那种“宽度到顶就收住”的姿态。这一个 grid 属性比三组媒体查询更简洁而且后期的增删卡片也不需要改 CSS。这种“少写代码”的满足感才是 HTMLCSSJS 基础语法入门后该追求的东西。4. 用js基础语法让静态页动起来到了这一步页面还是个静态长相。接下来要让导航在滚动时改变背景、锚点跳转别生硬、轮播图能自己转起来。这三件事都靠 js 基础语法里的几个 API 组合不需要引入 jQuery 或者任何框架。4.1 滚动切换导航样式scroll事件与节流入门滚动事件是高频事件直接监听会频繁触发 DOM 操作掉帧就是这么来的。常见的做法是配合requestAnimationFrame做节流让事件回调每帧最多执行一次// 导航滚动状态切换先选元素再监听滚动 const nav document.querySelector(.site-nav); function onScroll() { const shouldToggle window.scrollY 50; nav.classList.toggle(scrolled, shouldToggle); } // scroll 事件触发频率极高用 requestAnimationFrame 节流 let ticking false; window.addEventListener(scroll, () { if (!ticking) { window.requestAnimationFrame(() { onScroll(); ticking false; }); ticking true; } }); // 刷新页面后立即执行一次防止停留在页面中部时导航状态错乱 onScroll();逻辑说明querySelector(.site-nav)拿到导航元素。classList.toggle(scrolled, shouldToggle)第二个参数是布尔值为真时添加类为假时移除类。它比用if判断后分别调用add/remove更简洁。window.scrollY返回页面滚过的距离50是经验阈值。这个值要配合你的首屏高度来调Hero 区占比大就设大一点否则导航会在首屏还没走完时提前变深。requestAnimationFrame做节流的方法是目前手写滚动效果的主流方案它把回调推迟到浏览器下一次重绘之前执行一次避免同一帧内执行多次无用操作。参数说明阈值写在scrolley 50如果首屏是 100vh一般 50~80px 之间比较合适。ticking变量是锁同一帧内重复触发时第二次进入会直接跳过直到第一次的requestAnimationFrame回调执行后才解锁。4.2 锚点平滑滚动scroll-behavior省掉三十行JS苹果官网的按钮文案基本是“进一步了解”“购买”点击会平滑滚动到详情区域。很多新手会去写 JS 动画实现平滑滚动其实 CSS 一行属性就解决了html { scroll-behavior: smooth; scroll-padding-top: 56px; /* 导航 48px 8px 余量 */ }逻辑说明scroll-behavior: smooth让所有锚点跳转都自动带平滑动画包括地址栏 hash 变化触发的跳转。scroll-padding-top是给吸顶导航让位的关键。没有它锚点目标会被导航盖住内容标题被遮掉一半这是个非常常见的坑。再用 JavaScript 补一个“页面加载后跳到 hash 位置”的场景// 页面加载完成后把 hash 对应元素滚动到导航下方 window.addEventListener(load, () { if (location.hash) { const target document.querySelector(location.hash); if (target) { target.scrollIntoView({ behavior: smooth, block: start }); } } });参数说明location.hash是地址栏里#后面的部分。scrollIntoView把目标元素滚到视口起点配合上面的scroll-padding-top标题就不会被导航挡住。为什么要在load里执行因为页面的图片和字体要等load才算就绪此时浏览器才能真正算出目标位置。如果在DOMContentLoaded就执行图片还没撑开滚动位置会偏。这一段的重点是你能少写代码就少写代码。CSS 有能力解决的交互不要去 JS 里重新造一遍轮子这是 HTMLCSSJS 基础语法阶段最该建立的习惯。4.3 轮播图最小实现transform位移的正确姿势苹果官网的首页偶尔会有全屏轮播。手写轮播的要点是轨道横向排列所有卡片然后通过改变transform: translateX来位移而不是用margin-left或者left。二者的性能差距在移动端尤其明显// 轮播核心逻辑位移整条轨道 const track document.querySelector(.carousel__track); const items track.children; const prevBtn document.querySelector(.carousel__prev); const nextBtn document.querySelector(.carousel__next); let index 0; function goTo(i) { if (i 0) i items.length - 1; if (i items.length - 1) i 0; index i; // 核心一行通过 translateX 位移而不是改 left track.style.transform translateX(-${index * 100}%); } prevBtn.addEventListener(click, () goTo(index - 1)); nextBtn.addEventListener(click, () goTo(index 1));配合的 CSS 只有两段.carousel__track { display: flex; transition: transform 0.5s ease; } .carousel__track * { flex: 0 0 100%; }逻辑说明每个子元素宽度固定为容器的 100%轨道用 flex 横排。translateX(-100%)就是向右移动“一个卡片宽度”因为百分比只相对自身宽度。用translateX而不改margin-left的原因是transform只触发合成层不会引起重排margin-left会触发布局计算连续点击下一张会明显卡顿。参数说明flex: 0 0 100%里三个值是flex-grow flex-shrink flex-basis让每个卡片固定占满一行不伸缩。transition: transform 0.5s ease的时长 0.5 秒是苹果官网类页面的通用节奏太快显得生硬太慢用户会急。移动端如果要支持触摸滑动靠touchstart/touchmove手写会越写越长常见做法是引入一个小型手势库或者直接用 CSSscroll-snap代替轮播逻辑后者是更贴合“少写 JS”思路的方案。5. 仿苹果官网HTML基础复刻的避坑清单这章是我自己踩过的坑一条一条按“现象 → 原因 → 解决”写清楚。你照着做至少能少熬三个晚上的夜。5.1 移动端视口单位100vh在iPhone上塌了现象在 iPhone 上打开页面首屏比屏幕多一截底部内容被挤出视口地址栏收起后布局还会跳一下。原因100vh在移动端浏览器里等于“可视区域高度 地址栏高度”不同浏览器实现不一致。Safari 和 Chrome 的 URL 栏显示/收起状态不同这个值一直是动态的。解决改用动态视口单位min-height: 100svh同时保留100vh作为兼容回退.hero { min-height: 100vh; /* 老浏览器回退 */ min-height: 100svh; /* 现代移动端小视口高度 */ }svh是“小视口高度”它等于移动端地址栏展开时的高度稳定不跳。现代浏览器从 2022 年起支持良好写这一行就够了不需要 JS 去测量地址栏高度。5.2 毛玻璃看不到backdrop-filter 三连坑现象导航背景要么完全透明、要么一滩死黑模糊效果根本没出现。原因有三个叠加原因。第一个是忘写-webkit-前缀第二个是导航自带元素的背景色不透明把毛玻璃的底层挡住了第三个是背景后面的内容太少看不出模糊效果。解决前缀写齐确保导航本身的background带透明度而不是让子元素填充不透明背景验证时先确认导航底下有图片或大色块否则白底上做毛玻璃本来就很难看出来。还要注意backdrop-filter和filter不同它作用在“背后的像素”上说白了就是给底层画面戴了个滤镜。5.3 字体回退差异Mac好看Windows变形是常态现象页面的标题在 Mac 上宽松舒适拿到 Windows 上紧凑地挤成一团甚至文字换行。原因-apple-system只在苹果系设备有效Windows 会回退到Segoe UI或Microsoft YaHei。雅黑的中宫比苹方紧凑同样的letter-spacing: -0.015em在雅黑下会显得笔画更贴近。解决给中英文分别指定字体栈中文环境单独把苹方接受为最优Windows 上优先给到雅黑之外的观感近似字体或者直接接受差异。要是项目对跨平台观感有硬要求就得用font-face自己托管字体代价是首屏体积增加几十 KB这个很值得字体渲染差异属于平台差异不通过自托管字体根本没法修。5.4 锚点被吸顶导航遮住scroll-padding-top是关键现象点击页尾“返回首页”后页面滚到了目标区块但顶部的标题被固定在顶部的导航盖住一半文字看不见。原因CSSscroll-behavior: smooth只处理“平滑”问题不处理“偏移”问题。锚点定位的是元素顶部吸顶导航又占着顶部视觉空间两者叠在一起就把内容盖住了。解决给html加scroll-padding-top值为导航高度加一点余量html { scroll-padding-top: calc(var(--nav-height) 8px); }这条 CSS 能同时作用于scrollIntoView和 hash 锚点跳转一行解决不用 JS 算偏移。5.5 懒加载图片首屏抖动加载前后高度不一致现象刷新页面首屏大图塌成一条细缝加载完成瞬间“哐当”一下撑开整个页面往下跳。原因img默认在图片加载完成前高度为 0懒加载又延缓了图片请求导致布局不稳定。这在性能指标里叫 CLSCumulative Layout Shift苹果官网的页面上基本看不到这个现象因为它的每张图都给了明确的宽高占位。解决给图片容器设置宽高比。现代 CSS 用aspect-ratio不用再写 padding-top hack.tile__bg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }参数说明aspect-ratio指定宽高比浏览器在图片未加载前就按这个比例预留空间。object-fit: cover让图片裁切填满这个比例而不是把图片挤压变形。16 / 10是苹果官网产品卡的常用比例具体值看你素材的原始宽高比别硬套。注意懒加载不是所有图片都该上。首屏图片不加loadinglazy给上面的图片显式设置宽高比。性能优化的优先级永远是“布局稳定优先于加载细节”。6. 像素级体检验证“防苹果官网”的还原度与性能预算页面写完之后真正的活才刚刚开始。我用一套固定流程给仿站页面做体检你会发现光是这几个检查点就能筛掉一半以上的问题。第一项检查是对照截图。用 Chrome DevTools 的设备工具栏把 Mac 和 iPhone 两种视口分别截图再打开 Apple.com 原站同步截图放进 Figma 或者 PS 里叠着对比。重点看四个位置导航高度与间距、首屏标题字号、模块间距、页脚链接的排列。不要用眼睛看“差不多”用标尺量这个差距会打醒你。第二项是性能预算。仿写苹果官网最容易做崩的就是体积——页面塞了 20 张高清图直接超过 10MB打开速度惨不忍睹。常见做法是控制首屏体积预算大概是指标预算首屏总大小≤ 500 KB首屏图片大小≤ 300 KBKeep-Alive 请求数≤ 20 个LCP最大内容绘制≤ 2.5s超过预算的优先检查是不是有没裁剪的原图。桌面端一张 3000px 宽的大图可能就有 500KB压缩到 1440px 宽的 WebP能掉到 100KB 以内。这个差距等你用Network面板看到原图被下载的瞬间就懂了。第三项是可访问性。跑一遍 Lighthouse 的 Accessibility 板块重点看两点所有img有没有alt纯图标按钮有没有aria-label。这两项算是 HTML 基础阶段最容易忽略的东西。说到结尾留一个我自己的习惯每次改完页面关了浏览器重新打开直接按 F5 硬刷新一遍再测一遍滚动、锚点和轮播。因为开发时打开的旧页面经常带着旧 CSS 缓存你改的样式在“隐身窗口 禁用缓存”下可能完全另一个样。这个习惯替我挡掉过好几次“改了没生效”的翻车。这一套流程跑完你的“防苹果官网”就不只是一张挂着苹果外皮的 HTML 作业了它是你拿 HTMLCSSJS 基础语法亲手焊出来的完整页面。往后看到任何“看着简单”的网站你都会下意识知道该先拆结构、再对样式、最后抠交互——这个拆解习惯才是练这个项目最大的收益。希望这篇笔记帮到你。本文还有配套的精品资源点击获取