简介：资源取自尚硅谷零基础前端入门课程，聚焦HTML与CSS技术，并附带尚品汇项目的完整源码，适合完全没有网页开发经验的学习者快速上手网页结构搭建与样式美化。该压缩包共收录三百五十九个文件，总体积为十五点一三兆字节，其中包含三百二十个PNG图片、二十二个CSS样式文件、十一个HTML页面，以及少量动态图片和图标文件，图片文件主要用于页面视觉素材，CSS和HTML文件则直接展示了实际的前端代码写法。目前已有九百二十五人学习下载这套源码，其中文件组织清晰，图片素材与代码文件分离，方便对照查阅。可以重点阅读HTML页面与CSS样式，跟踪首页、列表页等模块的实现思路，并尝试修改颜色、间距和动效参数，从而把零散知识点串联成真正可运行的静态电商站点。
1. 零基础学HTML+CSS，为什么一定要照着电商首页敲一遍
把HTML和CSS视频从头到尾看完，标签认识、属性也眼熟，但一关掉课程自己打开编辑器，大部分人都会卡在同一个地方：不知道第一行该写什么，不知道一个完整页面按什么顺序搭。这个问题靠看视频解决不了，必须靠一个完整项目把它串起来。零基础前端开发入门的经典路线之一，就是用某商城首页这类电商页面当练习：顶部导航、搜索框、轮播图、商品列表、楼层区域，全都是日常开发里真正出现的东西。顺便说一句，HTML5+CSS3 真正的难点不是记住某个标签，而是把布局思路落到一个能看的页面上；把商城首页源码自己动手还原一遍，比单独刷十遍属性清单都管用。这篇文章就按这条路线拆开讲，哪些步骤必须自己敲，参数怎么调，坑在哪里，照着走完会心里有底。
2. HTML5语义化骨架：先把页面拆成五个区域，再写标签
2.1 动手前先画信息架构，电商首页都有哪些固定模块
电商首页看起来内容多，拆完其实就几个大区域：顶部导航栏、搜索区、首屏内容区、商品楼层、底部信息。动手写代码前先花十分钟在纸上标出这些块，比直接开写重要得多。顶部导航放登录入口、购物车、客服入口；搜索区放logo、搜索框和热搜词；首屏内容区通常左面是分类导航，中间是轮播图，右边再放公告或快捷入口；往下是几层商品楼层，每层结构相似；最底部是帮助链接和版权信息。
模块划分清楚之后，标签选型也就顺了：顶部导航用<header>和<nav>，主体内容放<main>，左侧分类用<aside>，楼层商品用<section>，底部用<footer>。HTML5 的语义化标签不影响页面外观，但它让代码结构一看就懂，也方便后续CSS选择器按模块去写。零基础阶段刻意练习语义化还有一个额外好处：比谁都用<div>堆页面的人，写出来的代码在可读性上直接高一个档次。
常见的做法是先定一个页面总宽度，比如 1200px 左右，内容区居中，两侧留白。这样首屏结构就是「上中下三行、中间左边窄右边宽」的经典布局。建议新手不要一上来就做响应式，先按固定宽度把一个版本做出来，再考虑不同屏幕怎么变，否则思路会被打断。下面这个骨架就是整个项目的起点。
2.2 用语义化标签搭出页面骨架，注释和区块都写清楚
打开编辑器新建index.html，先把结构和内容放进去，不要着急写样式。这一段是零基础项目第一节课反复在练的东西：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>某商城首页练习</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 顶部导航：登录注册、购物车入口 --> <header class="top-bar"> <nav class="top-nav"> 这里放左侧导航链接和右侧登录注册 </nav> </header> <!-- 搜索区：logo + 搜索框 + 热搜词 --> <div class="search-bar"> <h1 class="logo">商城Logo</h1> <input type="text" class="search-input" placeholder="搜索商品"> <button class="search-btn">搜索</button> </div> <!-- 首屏主要内容区 --> <main class="main-content"> <aside class="category-nav"> 这里是商品分类列表 </aside> <section class="banner"> 这里是轮播图 </section> <aside class="side-panel"> 这里是公告或快捷入口 </aside> </main> <!-- 商品楼层，每个楼层结构类似 --> <section class="floor"> <h2>楼层标题</h2> <div class="floor-goods"> 商品卡片们 </div> </section> <!-- 底部信息 --> <footer class="footer"> 帮助链接与版权信息 </footer> </body> </html>这段代码把「结构」和「表现」分开了。.top-bar、.search-bar、.main-content、.category-nav、.floor这些类名后面写CSS时按模块直接定位，不会出现改一个标题颜色结果整个页面都变的情况。<h1>里放Logo文本是为了保证页面只有一个主标题，搜索引擎和读屏工具都会拿它当页面主题；<h2>给楼层做标题同理，不要为了样式好看把标题标签全部换成<div>再手动加大字号。
lang="zh-CN"是告诉浏览器和翻译插件这个页面用简体中文；viewport 标签是移动端适配的地基，没有它手机浏览器会按桌面宽度渲染，后面做适配会处处被动。link引用外部CSS时注意路径，css/index.css表示和index.html同级的 css 目录下的文件，这是项目里最常见的做法，不建议把样式全部塞在<style>里，页面一长就没法维护了。
2.3 宽度单位怎么选：先把设计稿宽度固定成一条基准线
写商城首页遇到的第一批问题之一就是单位：px、em、rem、%、vw 混在一起，页面忽宽忽窄。最稳妥的做法是先定一条基准线：整页最大内容宽度固定为 1200px，水平和垂直结构都以它为基准。
.container { width: 1200px; margin: 0 auto; }margin: 0 auto是让块级元素水平居中的老写法，auto表示左右外边距自动平分剩余空间。电商首页在宽屏显示器下如果内容铺满全屏，一行商品会很容易显得零散，所以通常采取「控宽」策略而不是「满屏」策略。1200px 这个数字不是玄学，它是多年电商沉淀下来的折中值：主流笔记本和桌面显示器都能完整显示，同时不会因为太宽导致用户视线来回扫得太累。搜过零基础教程的同学可能会注意到，许多项目教学都用这个宽度。
在这个基准线之上，局部区域再用百分比或弹性盒去分列。初学者最容易犯的错是整页用width: 100%加大量内边距，结果不同分辨率下内容区忽宽忽窄，图片文字全在漂移。先把总宽度锁死，把页面做完整，之后再学媒体查询去适配手机，思路会清晰很多。接下来进入最关键的部分，也就是布局本身。
3. CSS3布局三件套：浮动、弹性盒、定位如何分工
3.1 横向导航列表：为什么零基础还要先学浮动
很多新项目已经全面转向 flex 和 grid，但电商首页这个练习里仍能看到浮动的身影。原因很实际：大量教程和存量代码都是浮动写的，而且某些简单的「一行多个小块」布局用浮动反而更直白。顶部导航的横向列表就是最典型的场景。
.top-nav ul { margin: 0; padding: 0; list-style: none; } .top-nav li { float: left; margin-right: 16px; } .top-nav ul::after { content: ""; display: block; clear: both; }float: left让每个li从左往右排成一行；list-style: none去掉默认圆点。关键是最后三行，:after伪元素加clear: both，这是最经典的清浮动写法。浮动元素会脱离文档流，父级ul的高度会塌成0，下面元素会顶上来；用伪元素在父级末尾清浮动，父级才能重新包住所有子元素，这就是「高度塌陷」的标准解法。新手阶段先背下这组搭配，后面避坑章节再展开讲为什么不能只靠给父级写死高度。
那为什么新项目推荐 flex？因为 flex 天然不产生塌陷问题，对齐控制也更精细。但零基础项目里两种都出现，理解浮动能帮你读懂老代码，也更容易明白 flex 解决了什么问题。注意这里margin-right: 16px是给每个 li 右侧留间距，最后一个 li 多了16px也无所谓，只想追求像素级还原就去掉，或者用 flex 的 gap 属性。
3.2 flex布局：搜索框和Logo怎么自动分配宽度
搜索区是一个练习 flex 的完美场景：Logo 固定宽度，搜索输入框要占满剩余空间，按钮固定宽度。这正好用上 flex 的伸缩能力，代码非常短：
.search-bar { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 20px 0; } .search-bar .logo { flex: 0 0 auto; } .search-bar .search-input { flex: 1 1 auto; height: 36px; } .search-bar .search-btn { flex: 0 0 auto; height: 36px; padding: 0 24px; }display: flex声明弹性盒，主轴默认从左到右。align-items: center让子项在交叉轴（垂直方向）居中，Logo、输入框、按钮能自然对齐。gap: 12px是子项间距的现代写法，比给每个子项写margin省事，也不用担心最后一个多了边距。这段代码里最值得研究的是flex简写：它依次对应flex-grow、flex-shrink、flex-basis三个值，flex: 0 0 auto表示不放大、不缩小、宽度按内容走；flex: 1 1 auto表示允许放大占据剩余空间，这就是搜索框「自动撑满」的原因。
初学这里容易踩一个典型误区：给输入框写width: 100%，结果把按钮挤下去了。width: 100%是相对父级的，父级还要容纳其他子项，加在一起就超出总宽；flex 的思路反过来，先申明每个子项如何伸缩，而不是用百分比硬凑。用 flex 写完搜索区，再回去看顶部导航的浮动写法，能明显感觉到两种布局思路的差别。
3.3 绝对定位和层级：下拉菜单与红色角标的通用做法
电商页面里那些「悬停弹出下拉菜单」「图片右上角红色角标」，都是定位的功劳。代码套路高度统一：父级相对定位，子级绝对定位，再用 hover 控制显隐。
.nav-item { position: relative; } .nav-item .dropdown { position: absolute; top: 100%; left: 0; display: none; width: 160px; padding: 8px 0; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .nav-item:hover .dropdown { display: block; } .nav-item .badge { position: absolute; top: -6px; right: -10px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #ff4d4f; color: #fff; font-size: 12px; }position: relative给子级绝对定位一个参照物：top: 100%表示下拉菜单紧贴在导航项下边缘，left: 0对齐左边缘；如果不给父级 relative，绝对定位会一路向上找最近的已定位祖先，找不到就相对页面定位，这是下拉菜单「跑丢」的最常见原因。display: none配合:hover切换显示，零基础阶段先这么写，不用追求动画过渡。
角标位置是另一个重点：top: -6px、right: -10px让小红点刚好压住父级右上角，负值在这里是故意的，不是写错了。line-height: 18px与height: 18px相等，使文字垂直居中；border-radius: 50%把方块变成圆形。这套「子绝父相」是页面里最常用的定位组合，把角标和下拉各做一次，后面遇到弹层、悬浮菜单都能照这个套路来。
4. 从静态到能交互：用纯CSS给页面加上轮播和悬停效果
4.1 用radio做手动轮播：没有JavaScript也先把状态切换弄懂
零基础阶段有个常见的坎：页面做出来了，但轮播图要靠JavaScript，课程还没讲到JS，只好先复制一段看不懂的代码。其实纯CSS也能做基础版轮播，而且能让新手直观理解「点击切换状态」这件事。做法不复杂，把每一张图对应一个单选框，再用:checked配合位移切换显示。
<div class="slider"> <input type="radio" name="slider" id="slide1" checked> <input type="radio" name="slider" id="slide2"> <input type="radio" name="slider" id="slide3"> <div class="slides"> <div class="slide">第一张</div> <div class="slide">第二张</div> <div class="slide">第三张</div> </div> <div class="dots"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> </div>.slider { width: 100%; overflow: hidden; } .slides { display: flex; transition: transform 0.4s ease; } .slide { flex: 0 0 100%; height: 320px; } #slide1:checked ~ .slides { transform: translateX(0); } #slide2:checked ~ .slides { transform: translateX(-100%); } #slide3:checked ~ .slides { transform: translateX(-200%); } .dots label { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; }核心逻辑是：radio 被选中时，:checked生效，通过兄弟选择器~找到后面的.slides容器并施加位移。translateX(-100%)表示容器整体向左移动「一个视口宽度」，因为每张幻灯片都是flex: 0 0 100%，正好移一张出去。transition: transform 0.4s ease让位移不是瞬跳而是平滑滑动，0.4s ease是先快后慢的过渡曲线，视觉上比匀速更自然。
小圆点用label而不是按钮，是因为label的for属性可以指向对应 radio 的 id，点小圆点就等于点 radio。这套做法不生产代码进生产环境，但它把选择器、状态、过渡三个知识点串起来了。学完再去看 JavaScript 版轮播，你会发现主体思路完全一样，只是状态不再藏在 radio 里，而是交给 JS 变量控制。
4.2 用transition给商品卡片加悬停反馈
商品卡片是商城首页数量最多的组件，悬停时的微交互直接影响页面质感。常见的效果是卡片轻微上浮加阴影加深，几行CSS就能实现：
.goods-card { background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .goods-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }translateY(-4px)让卡片在悬停时向上移动 4 像素，这是模拟「被拿起来」的感觉；box-shadow从无到有加深，配合位移一起出现就形成了层次感。transition里同时写了两个属性变化，逗号分隔，分别给位移和阴影设相同的时长，运动才够统一。0.25s是一个手感比较适中的值：太快显得生硬，太慢显得拖沓，新手不要盲目改成 1s 又嫌卡。
这里要注意一个性能习惯：hover 位移优先用transform而不是margin-top或top。transform不会触发页面重排，浏览器可以把元素放到独立图层上处理，滚动和动画都更流畅。零基础阶段不要求深挖渲染原理，但养成这个写法习惯，后面写的交互会少踩很多性能坑。
4.3 桌面版收尾后，移动端适配的最小方案
桌面版做完，下一步是让页面在手机上不崩。最小可用方案就是 viewport 加媒体查询加 rem 或百分比，先把三个关键点做到位。
@media (max-width: 768px) { .main-content { flex-direction: column; } .category-nav, .side-panel { display: none; } .search-input { flex: 1 1 auto; font-size: 14px; } .goods-list { grid-template-columns: repeat(2, 1fr); gap: 8px; } }@media (max-width: 768px)的意思是：当视口宽度小于等于 768px 时，花括号里的样式覆盖默认样式。手机端布局不是把桌面版原样缩小，而是做取舍：侧边分类导航在手机上占地方，直接隐藏；原来并排的内容改为纵向排列；商品列表从一行多列改成两列。这里用了grid-template-columns: repeat(2, 1fr)快速让卡片两列等宽，是CSS3里最直观的网格写法。
移动端另一个经常漏掉的是字体大小和点击区域，手机上看默认 16px 的字还行，但 12px 就会偏小，点击目标太窄也容易误触。零基础阶段先把布局重排做通，字体和间距问题等看到真机效果后逐步调。做完这一步，页面在桌面和手机上都有能看的样子，接下来可以回头梳理练习过程中踩过的坑了。
5. 电商首页练手最该避开的5个坑：现象、原因、修复
5.1 布局类：父级高度塌陷与外边距合并
现象：写顶部导航时给每个li加了float: left，结果下面的搜索区整体往上顶，导航背景色也变矮了，像是凭空消失了。
原因：浮动元素脱离了文档流，父级ul不再把它们算进高度，这种情况被称为高度塌陷。同样的，相邻两个块级元素的上下 margin 不会相加而是取较大值，这被称为外边距合并；比如给楼层标题设了margin-top: 40px，但外层容器没有 padding 或 border，这个距离开不出来或突然变得不正常。
解决：浮动父级加清浮动伪元素，也就是 3.1 里那三行::after+clear: both。外边距合并最简单的处理是给父级加overflow: hidden或display: flow-root，或者直接用 padding 代替 margin。判断思路也很简单：子元素设置 margin 不生效时，先检查父级有没有形成新的块级格式上下文。
5.2 图片类：图片被拉伸变形与底部多余空隙
现象：商品卡片里的图片明明设置了width: 100%，但图被横向压扁了；还有一种情况是图片下方总是有几像素白边，怎么都贴不齐。
原因：width: 100%只约束宽度，高度如果被上层容器固定，或者图片本身比例和容器不一致，浏览器会拉伸填满。图片底部的空隙则是另一个知识盲点：img默认是行内元素，它的垂直对齐方式按文字基线走，基线下方会留出给字母下降部的空间。
解决：需要保持图片比例时使用width: 100%; height: auto，或者用aspect-ratio加object-fit: cover。底部空隙最省事的就是img { display: block }，把图片变成块级元素，基线对齐不再生效。这里建议统一做法：页面里所有装饰性图片都先声明display: block，可以省掉大量无头绪的间距问题。
5.3 样式类：选中了元素但样式覆盖不掉
现象：页面里给.goods-card .title写了红色，但预览时标题还是蓝色，检查了半天没发现语法错误。
原因：选择器权重问题。.goods-card .title是类加类，权重记作(0, 2, 0)；如果另一个地方写了.title，权重只有(0, 1, 0)，前者应该生效。但如果有更早的代码用#title这种 ID 选择器，ID 优先级是(1, 0, 0)，类选择器数量再多也压不过。还有一种隐蔽情况是同一个类在两个 CSS 文件里重复出现，后加载的文件在权重相同时会覆盖前面的。
解决：学习阶段不要去数权重，直接遵守两条规则：类名继承层级控制在两到三层以内；不要用 ID 选择器写样式。需要覆盖时，优先检查是不是有重名类或后加载的样式表把值覆盖了。零基础阶段用!important能解决眼前问题，但会把后续维护变成灾难，尽量避免。
5.4 层级类：z-index写了9999还是被盖住
现象：下拉菜单设了position: absolute和z-index: 9999，页面里其他商品图片还是压在它上面，下拉内容像是透明了。
原因：z-index不是设置得越大就一定越靠前。它只在同层级的定位元素之间比较；如果某个父级容器自己也形成了层叠上下文，比如它本身有position加z-index、有opacity小于1、或有transform，那么你给下拉菜单设多大都没用，它会跟着父级整体排到后面。
解决：先检查下拉菜单的所有祖先节点，有没有谁带了transform或opacity属性；有的话去掉，或者在更高的祖先层级上做层级分配。弹出层最稳妥的位置是直接放在body下而不是嵌套在商品卡片内，可以避开大多数层叠上下文干扰。新手排查层级问题时，不要看见 z-index 就往上加，先在开发者工具里检查祖先链条。
5.5 路径类：CSS里的图片路径为什么总是加载不出来
现象：背景图片在CSS文件里写了background: url(./images/banner.png)，预览时图片404，但图片文件确实存在。
原因：CSS 文件里的相对路径是相对于 CSS 文件所在位置，而不是 HTML 页面位置。如果 CSS 在css目录、图片在images目录，从css/index.css里引用./images/banner.png就会去找css/images这个不存在的目录。
解决：从CSS目录出发推算路径，常见结构是根目录下css和images平级，CSS里要写成../images/banner.png。如果图片在HTML里用<img>标签引用，那路径又是相对HTML文件的，两套规则不要混。零基础项目里路径问题占了图片异常的大头，先确认相对基准，再排除文件名大小写差异，绝大多数都能解决。
6. 让练习从「能跑」变成「作品」：组件化思维和一下改全站的技巧
项目做完一遍后，先别急着开新课，花半天做一次「重构」收获会很大。所谓重构不是推翻重写，而是把页面里重复出现的模块抽成可复用的组件，并给全站颜色、间距建立统一变量。商城首页里商品卡片、楼层标题、按钮这些就是天然组件，好的类名能让它们从「这里复制过来的样式」变成「随时能复用的零件」。
把商品卡片的类名按模块、元素、修饰状态三层去命名，常被称为 BEM 风格的思路，不要求背概念，先养成习惯：
.goods-card__title { font-size: 16px; color: #333; } .goods-card__price--promo { color: #ff4d4f; font-weight: 600; }goods-card是块，__title是这个块里的元素，--promo表示这个价格是促销状态的修饰。这样命名之后，样式作用范围一目了然，不会出现两个模块都叫.title互相打架。再进一步，用CSS变量管理全站主题色和间距：
:root { --primary-color: #ff4d4f; --gap-base: 16px; } .btn { background: var(--primary-color); padding: var(--gap-base); }:root里定义的是全局变量，页面任何地方都能用var()读取。想换主题色，只改--primary-color一处，整个商城所有按钮、价格、角标全部跟着变，不用再全局搜索替换。很多老手说的「换肤」，底层就是这个能力。这一步做完，你的练习就不再是照着视频敲一遍的作业，而是带着设计取舍的完整小作品。
去做这一步的时候，可以给自己定三个验收标准：删掉一个CSS文件里的重复代码，能不能保证页面不变；把一个组件从首页复制到另一个页面，会不会引入样式冲突；全局改一次主色，是不是只需要动一处变量。都能做到，HTML+CSS就不只是「会了」，而是「能用了」。我自己的习惯是每完成一个版本先复制一份干净的存档，再继续改动，样式的后悔药从来不是撤回键，而是可回退的版本；这套练习方法能帮你省下很多返工的时间，希望帮到你。
本文还有配套的精品资源，点击获取
