牛刀小试：Html+CSS综合实践企业网站

缺什么补什么：别把企业站布局想得太简单

这门课解决的是“学完基础标签和样式，却拼不出一个完整页面”的脱节问题。很多自学者能背下选择器和盒模型，但面对一张设计图仍无从下手：不知道先切图还是先写结构，不知道怎么用标尺量间距，不知道列表、卡片、底部信息区怎么连成一条线。课程以一个典型企业网站为载体，把这些散点串成真实工作流，适合已经过完 HTML 基本标签和 CSS 常规属性、却没独立做过整页的人；如果你连浮动或定位都没摸过，先回去补基础，这课不是扫盲班。它也不碰响应式和框架，就是老老实实把一张静态企业站切出来、摆正。

建议先看哪几块，以及资料怎么配合练习

别按顺序从头刷，按能力缺口挑着看。第一块是框架搭建与切图：重点看用图形软件做图片切片和标尺量取布局尺寸的思路，这是很多只敲代码的人最弱的一环，直接决定你写出的结构能不能还原设计图。第二块是列表与三角形应用：CSS 画三角形看似小技巧，实则是导航指示、标签修饰的常考点，跟着手敲一遍。第三块是公司简介、产品列表、联系与新闻模块：这是企业站的骨架，重点看各模块如何用统一的容器和类名管理，而不是每块各写一套。资料包里的设计素材和源码不要只看不动，正确用法是：先看视频理解思路，关掉视频自己照着设计图还原，卡住了再翻源码比对，最后把成品和源码做差异对比，找出命名和结构上的偏差。

学完能独立做什么，以及自检问题

看完并练完，你应能独立接手一张企业宣传站的设计图，完成从切图、量距、搭框架到填模块的整条线，不再卡在“第一行从哪写起”。具体说，你能把一张静态图拆成头部、导航、列表、简介、产品、新闻、底部信息区，用常规 HTML 与 CSS 还原成可双击打开的页面，并懂得用切片处理控制图片体积。这套能力是后续学动态页面和响应式的前置条件，跳过它直接上框架，往往会连基本的页面结构都理不顺。检验是否真学会，试着回答几个问题：拿到设计图第一步量什么、切什么？CSS 三角形怎么用边框实现，用在哪些场景？产品列表的图文混排怎么控制对齐？新闻模块的日期和标题怎样用同一容器约束？底部联系信息为何不能各写各的样式？答得上来，说明布局这关过了；答不上来，回去把对应模块再敲一遍，别假装都会。