★ FEATURED ARTICLE 1. 从零搭建一个在线教育平台首页为什么我选择死磕这套布局很多人第一次拿到“学成在线”这类在线教育平台的首页设计稿时第一反应是打开编辑器直接开写。HTML 结构还没理清楚CSS 已经敲了三百行结果做到一半发现导航栏和轮播图打架课程卡片在不同屏幕宽度下像喝醉了酒一样东倒西歪。我见过太多这样的案例包括我自己早期也这么干过。后来我才明白一个看起来“只是展示”的首页背后涉及的布局逻辑、命名规范、响应式断点设计远比想象中复杂。“学成在线”这个项目本质上是一个典型的在线教育平台前端页面。它要解决的核心问题是如何把课程分类、推荐课程、讲师介绍、学习路径、用户评价这些模块用一套清晰、可维护、可扩展的代码结构呈现出来。适合谁来参考如果你是刚学完 HTML 和 CSS 基础、想找一个完整项目练手的前端新手或者你正在准备一个类似教育类平台的页面搭建这套思路可以直接拿去用。我下面要讲的不是那种“第一步写 div第二步写样式”的流水账而是我在实际搭建过程中反复调整后沉淀下来的结构决策和避坑经验。先说一个反直觉的结论首页最难的不是视觉还原而是模块之间的解耦。设计稿上每个区块看起来独立但一旦你开始写代码就会发现导航栏的高度会影响轮播图的定位课程卡片的间距会跟底部版权信息产生莫名其妙的空白。所以我在动手之前会先做一件事——把整个页面拆成若干个互不干扰的“区块容器”每个容器有自己的宽度约束和内边距规则区块之间只通过外边距发生关系。这个习惯让我在后面调整任何一个模块时都不会牵一发而动全身。2. 页面骨架的搭建逻辑从版心容器到模块划分2.1 为什么先定版心宽度再写任何样式版心也就是页面内容区域的最大宽度。很多教程会告诉你“设个 1200px 就行了”但没解释为什么。我选择 1200px 作为版心宽度原因有三个第一主流笔记本屏幕分辨率在 1366px 到 1920px 之间1200px 的内容区在两侧留出足够呼吸空间不会显得拥挤第二1200px 能被 2、3、4、5、6 整除做栅格布局时列宽计算方便第三这个宽度下一行放四张课程卡片每张卡片约 280px加上间距刚好填满视觉上不松不紧。具体做法是定义一个.container类.container { width: 1200px; margin: 0 auto; }margin: 0 auto让容器在父级中水平居中这是最稳妥的居中方案比 flex 或 grid 居中更少副作用。注意不要给容器设padding否则实际内容宽度会变成 1200px 减去左右 padding导致卡片对不齐。如果确实需要内边距用box-sizing: border-box并接受内容区变窄或者把 padding 放到子元素上。2.2 模块划分的颗粒度怎么把握我把首页拆成了七个一级模块顶部导航栏、轮播图区域、课程分类导航、推荐课程列表、名师介绍、学习路径、底部版权。每个模块对应一个独立的section或header、footer标签并且给每个模块一个语义化的类名比如.header、.banner、.course-category、.course-list、.teacher、.learning-path、.footer。这里有个经验模块的颗粒度不要太细也不要太粗。太细的话比如把导航栏里的 logo、菜单、搜索框、登录按钮各拆成一个 section代码会变得碎片化维护时找起来费劲太粗的话把轮播图和课程分类合并成一个 section后面想单独调整轮播图高度就会影响课程分类的定位。我的判断标准是如果一个区块在视觉上有明显的背景色变化或间距分隔就单独成一个模块。2.3 导航栏的固定定位与占位处理导航栏我用了position: fixed固定在顶部这样用户滚动页面时导航始终可见。但固定定位会带来一个问题导航栏脱离了文档流下面的轮播图会往上跑被导航栏遮住一部分。解决办法是给轮播图或者一个占位元素设置padding-top值等于导航栏的高度。导航栏高度我设为 80px所以.banner { padding-top: 80px; }或者更干净的做法在导航栏后面加一个空的占位 divdiv classheader-placeholder/div.header-placeholder { height: 80px; }我倾向于后者因为占位 div 的职责更单一不会跟轮播图自身的 padding 混淆。如果后面导航栏高度改了只需要改占位 div 的高度不用去动轮播图的样式。3. 轮播图区域的实现细节不只是放几张图那么简单3.1 轮播图的结构设计轮播图区域我用了最基础的结构一个外层容器里面放一个图片列表和一个指示器列表。div classbanner ul classbanner-list liimg srcbanner1.jpg alt课程推荐/li liimg srcbanner2.jpg alt名师课堂/li liimg srcbanner3.jpg alt学习路径/li /ul ol classbanner-indicator li classactive/li li/li li/li /ol /div外层.banner设position: relative图片列表绝对定位铺满指示器绝对定位在底部居中。图片列表的li默认隐藏只显示当前激活的那一张。切换逻辑可以用 CSS 的:target或者简单的 JavaScript 来控制这里不展开 JS 部分重点说 CSS 布局。3.2 图片自适应与不变形处理轮播图最容易出的问题是图片变形。如果直接给img设width: 100%和固定高度图片会被拉伸或压缩。我的做法是给图片容器设固定高度图片用object-fit: cover.banner-list li img { width: 100%; height: 100%; object-fit: cover; }object-fit: cover会保持图片宽高比同时填满容器超出部分裁剪。这样无论原图尺寸如何展示效果都不会变形。注意object-fit在 IE 上不支持如果项目需要兼容 IE可以用背景图加background-size: cover替代。3.3 指示器的交互状态设计指示器的小圆点默认是半透明白色激活状态是实心白色。我用.active类来控制.banner-indicator li { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin: 0 5px; cursor: pointer; } .banner-indicator li.active { background-color: #fff; }这里有个细节指示器的z-index要高于图片列表否则会被图片盖住点不到。通常设z-index: 10就够了但要注意如果图片列表里也有定位元素层级关系要理清楚。我的习惯是给轮播图区域内的所有绝对定位元素都显式设置z-index避免出现“明明写了样式却点不到”的情况。4. 课程卡片列表的布局方案Flex 还是 Grid4.1 两种布局方式的对比与选择课程卡片列表是首页的核心内容区通常一行展示四张卡片卡片之间有固定间距。实现方式有两种Flex 布局和 Grid 布局。Flex 方案.course-list { display: flex; flex-wrap: wrap; gap: 20px; } .course-list .course-card { width: calc((100% - 60px) / 4); }Grid 方案.course-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }我最终选了 Grid。原因很简单Grid 的repeat(4, 1fr)直接声明了“四列等宽”语义清晰不需要手动计算calc。而且 Grid 的gap在行列方向都生效如果后面要改成两行八张卡片不需要额外调整。Flex 方案虽然也能用但calc((100% - 60px) / 4)这个表达式里的 60px 是三个间距的总和一旦间距改了公式也要跟着改容易漏。4.2 卡片内部的信息层级与间距一张课程卡片包含课程封面图、课程标题、讲师名称、价格、学习人数。信息层级从上到下依次减弱。封面图占卡片顶部宽度 100%高度固定 160px同样用object-fit: cover。标题用 16px 加粗最多显示两行超出用省略号.course-card .title { font-size: 16px; font-weight: bold; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }讲师名称和价格放在同一行用 Flex 的justify-content: space-between分开。价格用橙色突出讲师名称用灰色弱化。学习人数放在最底部字号最小颜色最浅。这里有个踩过的坑卡片高度不一致。如果某张卡片的标题只有一行另一张有两行卡片高度就会不同导致下一行的卡片顶部对不齐。解决办法是给标题设固定高度或者给卡片设min-height。我选择给标题设height: 44px两行的高度这样无论标题一行还是两行卡片总高度都一致。4.3 响应式断点的设置策略虽然版心是 1200px但用户可能用平板或手机访问。我设了两个断点768px 和 1200px。大于 1200px版心 1200px 居中一行四张卡片。768px 到 1200px版心宽度改为 100%左右各留 20px 内边距一行三张卡片。小于 768px一行两张卡片导航栏折叠成汉堡菜单。断点的选择不是拍脑袋定的而是根据内容的最小可读宽度反推。一张课程卡片最小需要 220px 才能保证标题不换行太频繁1200px 减去间距后每张约 280px768px 减去间距后每张约 230px都还在可接受范围内。低于 768px 后三张卡片每张不到 200px标题会频繁折行体验变差所以降到两张。5. 课程分类导航的交互设计悬浮展开的细节处理5.1 二级菜单的定位与显示逻辑课程分类导航通常是一个垂直列表鼠标悬浮在某一项时右侧展开对应的二级菜单。结构如下ul classcategory-list li classcategory-item span前端开发/span div classsub-menu a href#HTML/CSS/a a href#JavaScript/a a href#Vue/a /div /li !-- 更多分类 -- /ul.category-item设position: relative.sub-menu设position: absolute; left: 100%; top: 0;默认display: none悬浮时display: block。5.2 悬浮区域的连续性处理这里有个经典问题鼠标从一级菜单移到二级菜单时中间如果有间隙悬浮状态会丢失二级菜单瞬间消失。解决办法是让二级菜单的left等于一级菜单的宽度并且一级菜单和二级菜单之间不要有 margin 或 padding 造成的空隙。如果设计上必须有间隙可以用一个透明的伪元素填充.category-item::after { content: ; position: absolute; left: 100%; top: 0; width: 10px; height: 100%; }这个伪元素不可见但能“接住”鼠标保持悬浮状态。5.3 二级菜单的宽度与内容溢出二级菜单的宽度我设为 600px内部用 Grid 分三列展示链接。如果某个分类下的子项特别多超过三列就自动换行。这里要注意二级菜单的高度不要超过视口高度否则底部内容会被截断。我的做法是给二级菜单设max-height: 400px; overflow-y: auto;超出部分滚动查看。6. 名师介绍与学习路径模块的排版技巧6.1 名师卡片的圆形头像与文字环绕名师介绍模块通常是四个圆形头像加姓名和头衔横向排列。圆形头像用border-radius: 50%实现但要注意图片本身最好是正方形否则会变成椭圆。如果不是正方形先用object-fit: cover裁剪成正方形再设圆角。.teacher-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }姓名和头衔居中显示用text-align: center。四个卡片之间用 Flex 的justify-content: space-around均匀分布。6.2 学习路径的时间线布局学习路径模块我用了一个垂直时间线布局左侧是时间节点右侧是课程内容。时间线的竖线用伪元素实现.learning-path { position: relative; padding-left: 40px; } .learning-path::before { content: ; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background-color: #e0e0e0; }每个节点的小圆点用::after或者单独的span定位在竖线上。这种布局的关键是竖线的top和bottom要跟内容区对齐不能超出或不足。我通常给.learning-path设padding-top和padding-bottom然后竖线的top和bottom设为 0这样竖线会跟随内容区的高度自动伸缩。7. 实际搭建中容易忽略的细节与排查清单7.1 清除默认样式带来的连锁反应浏览器对ul、ol、h1到h6、p都有默认的 margin 和 padding。如果不清除页面会出现莫名其妙的空白。我通常在 CSS 开头写一段重置* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; }注意img设display: block可以消除图片底部的默认间隙这个间隙是因为img默认是行内元素基线对齐导致的。max-width: 100%防止图片撑破容器。7.2 浮动与清除浮动的现代替代方案早期布局常用float但浮动元素会脱离文档流父元素高度塌陷。现在有了 Flex 和 Grid基本不需要用浮动了。如果确实要用浮动记得给父元素加overflow: hidden或者用clearfix伪元素清除浮动。我的建议是新项目一律用 Flex 或 Grid不要再用 float 做布局除非你需要文字环绕图片这种特殊效果。7.3 层级与定位的调试方法当元素定位不对时我常用的排查步骤是第一给元素加一个临时背景色看它的实际占位区域第二用浏览器开发者工具检查position、top、left、z-index的计算值第三检查父元素是否有position: relative因为绝对定位是相对于最近的定位祖先元素计算的。如果父元素没有定位绝对定位会相对于body计算导致位置完全不对。7.4 字体与行高的统一设置字体我通常设font-family: Microsoft YaHei, PingFang SC, sans-serif;优先使用系统自带的中文字体避免加载外部字体带来的闪烁。行高设1.5到1.6之间正文用1.6标题用1.4。行高不要用固定像素值用无单位数值这样字号变化时行高会自动缩放。8. 从静态页面到可维护代码的进阶思路8.1 CSS 变量的使用如果页面中有重复使用的颜色、间距、字号建议用 CSS 变量统一管理:root { --primary-color: #ff6b00; --text-color: #333; --text-light: #999; --gap: 20px; --container-width: 1200px; }后面修改主题色时只需要改--primary-color一处所有引用这个变量的地方都会更新。这个习惯在项目变大后尤其重要。8.2 类名命名规范我用的是一种简化的 BEM 风格模块名用中划线连接子元素用模块名加双下划线加子元素名。比如.course-card__title、.course-card__price。这样从类名就能看出元素属于哪个模块不会出现.title这种过于泛化的命名导致样式冲突。8.3 代码注释的取舍注释不是越多越好。我通常只在三个地方写注释一是模块的开始和结束标明这个区块是什么二是复杂的定位计算解释为什么用这个值三是兼容性处理说明为什么需要这段 hack。其他一眼能看懂的样式不需要注释否则代码会变得臃肿。8.4 后续扩展的方向这套页面搭好之后可以往几个方向扩展一是接入真实数据把静态的课程卡片改成从接口获取二是增加课程详情页复用首页的卡片组件三是加入搜索功能在导航栏的搜索框里实现关键词过滤。每个扩展方向都建立在当前模块化结构的基础上不会推翻重来。我在实际搭建这个页面的过程中最大的体会是前期花时间理清结构后期省下的调试时间远超预期。尤其是版心宽度、模块划分、命名规范这三件事一旦定好后面写样式就是填空而不是反复推翻重来。如果你也在做类似的教育平台首页不妨先把这七个模块在纸上画一遍标好每个模块的宽度和间距再打开编辑器。这个习惯我坚持了三年每次都能帮我省下至少半天的返工时间。
阅读完成 · 觉得有帮助？
