简介一套为零基础学习者打造的前端开发入门资料对应尚硅谷HTML与CSS零基础教程并附带尚品汇项目完整源码适合刚迈入网页开发、想系统掌握页面结构与样式设计的新手。压缩包共359个文件含320张PNG图片、22个CSS样式文件、11个HTML页面以及少量GIF、JPG和ICO文件整体大小约15.15MB下载与解压都很方便。目前已有925人参与学习。内容覆盖HTML5语义化标签、表单与媒体元素以及CSS3选择器、弹性盒、网格布局和过渡动画等知识点尚品汇项目源码可直接打开对照观察电商首页导航栏、商品展示区与底部模块的结构和样式配合。读者既能按教程顺序边学边练也能在源码上修改参数查看效果适合积累第一个真实前端项目并夯实基础的学习者。从基础语法到项目实练路径完整。1. 零基础学 HTMLCSS为什么要从仿写尚品汇这个电商页开始零基础学前端最容易出现的状态是视频看完了、案例也跟着敲完了合上编辑器面对一个空文件夹写不出一个像样的页面。这套 HTMLCSS 零基础教程配套的尚品汇项目正好就是拿来打破这个状态的——它是一个完整的电商首页页面长、模块多但又不依赖 JavaScript纯 HTML5 CSS3 就能搭完特别适合零基础在学完标签和选择器之后做一次回归训练。下面按这个路线走一遍先配好本地环境再拆页面结构然后对标源码检查自己最后把新手下笔时最容易翻车的几个点提前排掉。想照着复现的人大约需要两个晚上。2. 跑通第一行代码本地环境的最小配置和页面渲染原理零基础阶段最怕的不是语法而是还没写两行代码就被工具劝退。很多新手一上来就折腾编辑器主题、装一堆高亮插件、配代码格式化规则两小时过去代码一行没写。HTML 和 CSS 的调试工具在浏览器里不在编辑器里工具够用就行。2.1 别在编辑器上纠结零基础阶段的选型原则常见做法是选 VS Code装一个 Live Server 插件就收工。编辑器只解决两件事写文件和实时预览。远程开发、代码片段管理、快捷键自定义这些都是后话第一周用不到。用途选择说明编辑器VS Code轻量、插件生态大零基础资源最好找实时预览Live Server 插件保存文件后浏览器自动刷新省去手动 F5浏览器Chrome 或 Edge开发者工具最顺手后面全靠它排查样式终端暂时不装纯 HTMLCSS 阶段用不到命令双击文件即可打开插件越少注意力越集中。Live Server 的作用是起一个本地服务让页面通过 http:// 地址打开而不是用 file:// 双击打开。两者的区别在于资源加载file:// 协议下CSS、图片在部分浏览器里会出现路径混乱的问题Live Server 会模拟真实服务器行为引入外部资源时表现和线上一致。2.2 在浏览器里跑通第一个 HTMLCSS 文件最小配置与路径规范新建一个项目文件夹里面先建两个子目录和两个文件这是后面所有前端项目的地基project/ ├── index.html ├── css/ │ └── style.css └── images/index.html 里先放一个最简页面冒烟测试用!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title我的第一个页面/title link relstylesheet hrefcss/style.css / /head body h1进入尚品汇之前先让页面跑起来/h1 p这一行加上样式就是一个最简的 HTMLCSS 页面。/p /body /htmlcss/style.css 里随便写一个能看出来的样式/* 页面底色用浅灰方便对比内容区 */ body { background-color: #f5f5f5; font-family: Microsoft YaHei, sans-serif; } h1 { color: #e1251b; /* 电商红后面做搜索按钮也用它 */ text-align: center; margin-top: 80px; }几个参数说明。meta charsetUTF-8 /必须放在 head 最前面否则中文会出现乱码viewport是给移动端适配打底零基础阶段可以先照抄后面学响应式时再展开理解link标签里的hrefcss/style.css是相对路径含义是“从 index.html 所在目录进入 css 目录找到 style.css”路径写错是样式不生效的第一大原因。双击 index.html 能在浏览器打开是基础右键用 Live Server 打开是推荐做法。改文字、改颜色后保存浏览器会自动刷新反馈速度直接影响学习节奏。打开开发者工具F12看 Elements 面板能看到 HTML 被浏览器解析成的结构树点任意元素右侧 Styles 面板会列出所有作用在它身上的 CSS 规则这个面板后面排坑时天天用。3. 拆解尚品汇首页HTML5 语义标签与 CSS3 布局属性的落点零基础看完整页面容易懵其实电商首页的结构非常有规律。尚品汇这类项目基本就是“顶部导航 搜索区 横向菜单 轮播图 商品列表 底部信息”的固定组合。把结构先立住再去填样式页面复杂度就降下来了。3.1 先看尚品汇的骨架header、main、footer 与语义标签的日常用法HTML5 引入的语义标签核心价值不是改变页面外观而是让代码结构自己会说话。比如下面这个骨架不写一行样式也能一眼看出哪里是页头、哪里是主体、哪里是页脚header classsite-header div classcontainer div classlogo尚品汇/div nav classmain-nav a href#首页/a a href#手机/a a href#电脑/a a href#家电/a /nav /div /header main section classsearch-bar container input typetext placeholder搜索商品 / button搜索/button /section section classbanner container !-- 轮播图先不做 JavaScript静态图片占位 -- img srcimages/banner.jpg alt促销横幅 / /section section classgoods-list container !-- 商品卡片由列表渲染第 4 章重点展开 -- /section /main footer classsite-footer p这是一个纯 HTMLCSS 的练习页面/p /footerheader表示页头区域nav表示导航链接集合main表示页面主体内容footer表示页脚信息。section表示页面里的独立区块可以带类名区分用途。这些标签对 SEO 和屏幕阅读器更友好但零基础阶段先把它当成“更好记的 div”来用即可。实际写电商页时真正的布局单位还是div。语义标签管骨架div 管内部结构。比如搜索区内部左侧是 logo中间是输入框右侧是按钮这些都是 div 套 div。所以骨架代码里container这个类名很重要它是所有内容区的公共容器负责统一页面宽度和水平居中。3.2 CSS3 里真正撑起电商页的四个属性flex、圆角、阴影与渐变CSS3 引入的属性很多但撑起电商首页的无非是四个flex 承担全部布局border-radius 负责卡片圆角box-shadow 做出卡片层次linear-gradient 解决按钮和背景的质感。把四个练熟整个页面已经能完成八成。先看导航和搜索区的 flex 布局.site-header .container { display: flex; justify-content: space-between; align-items: center; height: 60px; } .main-nav a { margin-left: 20px; color: #333; text-decoration: none; } .main-nav a:hover { color: #e1251b; }display: flex让子元素横向排列这是现代布局的起点。justify-content: space-between让 logo 贴着左边、导航贴着右边中间空白自动分配。align-items: center让所有子元素在垂直方向居中。这两个属性在一起是搞电商页头部最常用的组合视频里往往一笔带过实际写的时候缺一个效果就歪。再看搜索按钮的渐变和圆角.search-bar button { border: none; background: linear-gradient(90deg, #e1251b, #ff7a45); color: #fff; border-radius: 4px; width: 80px; height: 36px; cursor: pointer; }linear-gradient(90deg, #e1251b, #ff7a45)表示颜色从正红过渡到橙红方向是水平 90 度。用渐变代替纯色按钮视觉上立刻有层次且不需要切图。border-radius: 4px是电商按钮和卡片的通用圆角值太小没效果太大显得玩具。box-shadow在第 4 章的商品卡片里一起讲因为它是和卡片背景色配合使用的。本节值得刻意做一个练习把骨架代码粘贴到本地只写这一节涉及的三段 CSS页面立刻从纯文本变成一个能看的电商页骨架。写完你会发现 float 时代那些“清除浮动”的麻烦在 flex 底下基本都消失了。视频里讲 float 是为了看老项目的代码新建页面直接 flex。4. 照着源码复现尚品汇首页从量盒子到写完一个商品区这一步是仿写项目的正文。记住一个事实视频里看起来复杂的大页面拆开就是一堆数字的重复——1200px 的容器、40px 的导航高度、12px 的间距、16px 的字号。会量这些数字就等于会写页面。4.1 动手前先量盒子从设计稿里读出宽度、间距与色值拿到设计稿或参考站点的第一步不是写代码而是把页面拆成一行行的“盒子规范”。常见电商首页的通用参考值如下仿写时可以直接套区域参考值实现要点顶部导航高 30~40px通栏浅色背景内容容器 1200px 居中搜索区高约 100~120px输入框 按钮横向排列按钮固定宽度横向菜单高约 40~44px深色背景或品牌色背景轮播区宽 1200px高约 350~400px图片铺满容器禁止拉伸变形商品列表卡片宽 220~240pxflex 换行卡片间距统一内容容器固定 1200px 是过去十多年电商页的事实标准现在大屏变多很多站点升级到 1280 甚至 1400但 1200 依然是学习期最稳妥的选择。容器写起来非常固定.container { width: 1200px; margin: 0 auto; }margin: 0 auto的意思是上下外边距为 0左右自动分配剩余空间这是块级元素水平居中的核心写法。任何区域只要套上container这个类内容就会自动居中通栏背景色仍然铺满整个页面宽度这就是电商页“背景通栏、内容居中”的做法。量盒子阶段最容易犯的错是直接去数设计稿里的色值大小而忽略了变量的概念。比如 logo 的红色#e1251b在整个页面里会反复出现在按钮、价格、 hover 状态里零基础阶段不用学 CSS 变量但至少要有“品牌色统一”的意识写样式时统一复制同一个色值宁可多复制也不要今天#e1251b明天#e1251B。4.2 实现商品卡片与导航栏一组可直接套用的布局样式商品卡片是整个电商页里重复次数最多的单元。它的结构可以抽象成三个部分图片、名称、价格。先写 HTMLul classgoods-list container li classgoods-item a href# img srcimages/goods/phone-01.jpg alt手机商品图 / p classgoods-name某品牌手机 5G 双卡双待 高清大屏/p p classgoods-priceem¥/em1999em.00/em/p /a /li !-- 复制 li 即可生成更多卡片注意替换图片路径 -- /ul商品卡片用ul li而不是div div因为在语义上商品列表是一个列表而且列表默认样式在清空后具有天然的块级排列特征。a标签把整张卡片包起来保证用户点图片、点名字、点价格都能跳转这是电商页的固定交互习惯。CSS 是本节的重点每一行都有对应职责.goods-list { display: flex; flex-wrap: wrap; /* 一行放不下时自动换行 */ gap: 20px 20px; /* 行间距 20px列间距 20px */ list-style: none; padding: 0; } .goods-item { width: 232px; /* 5 列布局里的单卡宽度 */ background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease; } .goods-item:hover { transform: translateY(-4px); /* 悬停上浮电商页常用反馈 */ } .goods-item img { display: block; /* 去掉图片下方空隙第 5 章展开讲 */ width: 100%; } .goods-name { font-size: 14px; line-height: 20px; color: #333; margin: 8px 12px; white-space: nowrap; /* 三件套不换行 */ overflow: hidden; /* 三件套溢出隐藏 */ text-overflow: ellipsis; /* 三件套省略号结尾 */ } .goods-price { margin: 4px 12px 12px; color: #e1251b; font-size: 18px; font-weight: 700; }gap是 flex 布局里最省心的间距方案以前要算 margin 负值现在一行搞定。现代浏览器对gap在 flex 里的支持已经稳定零基础不需要再学负 margin 那套上古技巧。box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)中四个值分别是水平偏移 0、垂直偏移 2px、模糊半径 8px、颜色带透明度的黑色rgba最后一位 0.06 让阴影几乎看不见但卡片又有轻微悬浮感这种克制的阴影是电商卡片的常态不要用浓黑阴影。商品名的三件套是零基础最容易抄漏的一组属性。电商商品名不允许换行长度超出部分用省略号收尾需要white-space、overflow、text-overflow三个属性同时在场少任何一个都不生效。经常有人只写了text-overflow: ellipsis发现没反应就是因为另外两个属性缺了。导航栏固定是另一个高频需求。页面滚下去之后菜单栏吸在顶部.main-nav-wrap { position: sticky; top: 0; z-index: 100; background: #fff; }position: sticky是一个少写一行效果完全不同、写错又最难排查的属性。它要求父级不能有overflow: hidden否则不生效top: 0表示滚到顶部后固定住z-index保证悬浮时压住下面的轮播图。4.3 源码没被看懂时用浏览器开发者工具反推样式拿到源码之后最忌讳的是从头到尾读一遍当学习完成。反过来用倒是更高效把自己写的页面和源码页面同时用浏览器打开哪个区域长得不一样就在源码页面上右键检查看源码是怎么写的。操作顺序固定下来速度会快很多按 F12 打开开发者工具点左上角的箭头图标。在页面上点击左侧导航栏或任意卡片Elements 面板高亮对应 HTML。右侧 Styles 面板从上到下列出所有命中该元素的规则取消勾选某个属性页面实时变化。找到差异后把源码的样式复制回自己的文件里刷新对比。如果整体页面错乱但单条样式看着没问题注意看 Elements 里有没有多出源码里没有的空标签或多余类名。注意本地打开源码时样式丢了一半先检查目录结构css 和 images 是否和 index.html 保持了同样的相对层级很多人把 css 文件复制出来单独改导致路径全断。还有一个提高效率的小习惯不要只在争议属性上做对比。源码里看起来多余的那行display: block、那个你以为是多余的position: relative很可能就是整体布局成立的关键。聚焦到 Computed 面板看最终计算值比在 Styles 面板里推断更准确因为 Computed 展示的是所有层叠规则合并后的结果。5. 零基础仿写尚品汇的 4 个常见坑现象、原因与排查顺序仿写项目时真正消磨耐心的是那种“我明明照着写的怎么渲染出来不一样”的时刻。下面四条是我反复见到新手踩进去的坑按出现频率排序每一条都有明确排查路径。5.1 布局类坑宽度撑破、卡片被压扁、图片下方莫名多出白边坑一盒子宽度总是被撑破。现象容器设了width: 1200px再加padding: 0 30px后总宽度变成 1260px页面出现横向滚动条。原因CSS 默认的box-sizing: content-box下width只算内容宽度padding和border会额外把盒子撑大。所以 1200px 左右各 30px padding 1260px。解决在样式表第一行加全局重置。*, *::before, *::after { box-sizing: border-box; }这条规则让所有盒子的width成为最终渲染宽度padding 和 border 向内挤压而非向外扩张。零基础阶段在这个属性上栽过的人最多写出去以后几乎每个项目都要保留这一条。如果加了重置之后宽度仍然超检查有没有组件库样式在之后覆盖了box-sizing排查方法是搜索项目里有没有单独的box-sizing: content-box。坑二flex 布局里卡片被压扁。现象五个卡片放在一行容器宽度刚好但最后一个卡片明显比其他几个窄图片被左右挤压变形。原因flex 子项默认flex-shrink: 1空间不够时会被压缩。差值会均匀摊到每个子项上看起来就是“整体变瘦”。解决两种方案二选一。.goods-item { flex-shrink: 0; /* 禁止压缩宁肯溢出也不要变形 */ }或者更推荐的做法在父容器上允许换行.goods-list { flex-wrap: wrap; /* 空间不够就换行不硬挤 */ }电商页里优先用flex-wrap: wrap因为它在任何屏幕宽度下都不会出现内容挤压还可以配合gap控制间距。flex-shrink: 0只有在确定永远只有一行时才好用。坑三图片下方有一条 3px 左右的白边。现象图片和下方文字区块之间总是有一条缝隙调 margin 和 padding 都去不掉。原因img默认是inline元素会参与文字行高对齐行高产生的额外空间就在图片下方露出白边。这不是什么玄学是基线对齐的典型结果。解决把图片改成块级元素。.goods-item img { display: block; }给所有img加display: block是零基础阶段成本最低、回报最高的习惯。一张图区域写完后先补这一行后面整个布局的间距计算会省一堆事。5.2 样式类坑改了没反应、对比源码总觉得少几行坑四样式改了浏览器刷新后没变化。现象在 style.css 里把背景色从白色改成浅灰保存后刷新页面颜色完全没变。排查顺序按下面三步走基本能覆盖 90% 的情况检查引用路径页面里link的 href 到底指向哪个文件。很多人同时存在 css/style.css 和 css/index.css改了前一个页面引的是后一个。查看 Network 面板刷新页面看 CSS 文件的请求状态。如果状态码是 200 且文件大小没变化是浏览器缓存强制刷新CtrlShiftR即可。检查选择器优先级如果文件对、缓存也清了还是没变化在 Elements 面板选中目标元素看 Styles 列表里你的规则是不是被更高优先级的规则划掉了。最常见的是body { color: #333 }把一个更具体的.goods-name { color: #666 }覆盖了。原因总结一句话改了没反应九成是没改对文件剩下的一成在缓存和优先级。坑五跟源码一比自己总是“少写几行”。现象按记忆复现的页面外观和源码差不多但某些细节——比如 hover 效果、间距、圆角——就是不对。打开源码一比对发现自己省了三四行“看起来没用”的属性。原因CSS 是层叠的。你省略的那几行可能正是某个继承链的前置条件。比如少写了.goods-item的overflow: hidden图片圆角就和卡片圆角对不上少写了.goods-list的padding: 0列表默认缩进就把整个布局往右推了十几像素。解决不要凭记忆从上往下补从最终效果反推。在开发者工具里选中出错元素看 Computed 面板逐个对比源码渲染结果和自己的渲染结果先修正差异最大的属性比如盒子的宽高、外边距、显示类型。养成保留源码里所有类名的习惯哪怕 class 看起来没用到 CSS也可能有 JavaScript 或兄弟选择器依赖它。6. 把源码当参考答案三遍读法检验你学到的是不是真本事仿写项目的最后一步不是“跑通”而是“能丢掉源码再写一遍”。源码本身就是最好的参考答案怎么用它决定了这个项目是变成你的能力还是只变成硬盘里多出来的一个文件夹。我建议用三遍读法来处理源码。第一遍不看源码自己写。从头到尾实现一遍尚品汇首页卡住的地方做标记比如某一块布局想了十分钟还是没思路就画个 ★。这一遍的目标不是写多快而是把“已经会”和“还没会”分成两个清单。第二遍带着 ★ 去看源码。不要从头到尾逐行读只对比你做标记的位置。重点不是抄人家的代码而是问自己它比我多写了哪个属性这个属性在这块布局里起什么作用如果视频里没讲过就去开发者工具里把它删掉看效果看完就再也不会忘。第三遍合上源码把页面再实现一遍用来验证。这一遍只允许在最卡住的地方偷看参考答案而且每次偷看都要在对应代码旁做个注释写明自己当初卡在哪个点。三遍全部走完这个项目才算真正属于你。如果还想多走一步把页面做一次“换肤”练习保留全部布局只换品牌色、价格颜色、按钮渐变色把商品图换成任意图片。你会发现导航栏颜色一变很多地方需要联动修改这比照着源码抄十遍更能加深对 CSS 层叠规则的理解。我带过的零基础新人里凡是愿意把第三遍做完整的后面学 JavaScript 时明显顺很多凡是照着视频敲一遍就算完的过两周连自己写的类名都解释不清楚。这个习惯我也一直留给自己希望帮到你。本文还有配套的精品资源点击获取