开头就直奔主题吧如果你想从零开始做一个属于自己的网页HTML和CSS就是最直接的那把钥匙。这两个东西学起来不像编程语言那么吓人HTML负责把内容摆出来CSS负责让内容好看两者搭配起来两三个晚上就能让你看到一个能公开访问的个人页面。这篇东西不会跟你念教科书我会把一个个人网页从新建文件夹到部署上线前能完成的全部工作按我平时做项目的习惯一步步拆给你看。你不需要有任何代码基础只要愿意动手敲照着做一定能出成果。很多人在“零基础自学前端”这条路上卡住原因不是不够努力而是上手就被一堆术语砸懵了——什么语义化、盒子模型、响应式布局听起来个个都像要背下来的概念。实际上你跳进去就会发现HTML和CSS只是两套规则简单的标记语言它们没有复杂的逻辑和算法只要你能搞懂“标签负责结构样式负责外观”剩下的大多数问题都能靠“做一个小项目”来解决。个人网页正好是这个阶段最合适的项目载体它结构清晰、需求明确你能在很短的时间里看到自己的进步也能一遍遍打磨细节学到的技术点还很完整。1. 内容整体设计与思路拆解1.1 个人网页到底需要哪些内容模块做网页的第一步永远是先想清楚“我要往上面放什么”而不是急着写代码。个人网页说到底是你的线上名片围绕这个目标来规划内容页面才不会变得空洞或者跑偏。一个典型的个人网页我建议至少包含这些模块顶部导航栏用来放“首页、关于我、作品集、联系方式”这几个常规入口正中央一块个人介绍区写上你的名字和一句让人记住你的话然后是作品展示区把你做过的东西以卡片形式排列出来接着是“关于我”的详细段落补充你的经历、技能和兴趣最后是页脚放社交链接和版权信息。如果你觉得这些模块太多也可以先砍到三个核心块导航、个人展示、页脚。我的经验是第一次做个人页面内容宁少勿多结构清晰比内容丰富更重要。你完全可以在做完第一版之后再来加内容但在最初版本里把所有模块的布局框架打好后面添内容只是往里面“填空”这才是最高效的做法。1.2 页面结构与文件组织方式决定了要放哪些内容之后就要考虑文件怎么组织。这个环节很多零基础的人会忽略直接新建一个HTML文件就开始写结果写到一半发现图片路径乱了、CSS文件找不到被迫回过头来整理。我建议你从一开始就建好这样的目录结构my-website/ ├── index.html ├── css/ │ └── style.css └── images/ └── (放你的照片、作品截图等)index.html是网站的主页文件css文件夹放所有的样式表images文件夹放网页用到的图片资源。这种分类方式也是目前绝大多数网站的通用做法按照这个习惯来以后你的项目文件变多了也不会乱。关于“个人网页是不是必须一个文件搞定”这个疑问很多人问过我。答案是不一定。单文件页面适合做演示和练手把所有CSS都写在一个HTML文件里确实方便但一旦样式内容多了你会在一个几千行的文件里翻来翻去找一个颜色值非常痛苦。拆成独立的CSS文件还有一个好处你在做不同页面时可以完全复用同一个样式表改一处全局都生效这是性价比最高的选择。1.3 为什么从静态页面开始而不是直接学框架网上有一种论调说“现在都是Vue、React的天下你直接学框架不就行了”。我对这个看法持保留意见。对零基础的人来说直接上框架就像没学过加减法就去解方程框架里到处都是所谓“组件化”和“数据绑定”的概念这些概念全都建立在原生HTML和CSS的机制之上。你一样都不懂出了问题连报错都看不懂更别提调试了。另外个人网页这种项目形态本身就是静态页面最擅长的事情信息以展示为主、内容相对固定、不需要复杂的交互逻辑。这种场景下原生HTMLCSS不仅够用而且是效率最高、加载最快的方案。先把这层基本功打扎实等你真正需要做后台管理界面、企业级应用的时候再去碰框架也完全来得及。底子打得越稳后面学框架就越轻松那些所谓的“魔法”在你眼里会变成一个个可拆解的实现细节。2. 开发环境准备与基本工具2.1 编辑器选型和安装配置工欲善其事必先利其器。写HTML和CSS一个顺手的编辑器能让你少掉一半头发。我日常主力用的是VS CodeVisual Studio Code免费、开源、插件生态强大几乎成了前端开发的默认选择。装好VS Code之后记得装上这几个必装插件它们能让你的编码效率提升好几倍Live Server保存代码后浏览器自动刷新省掉手动切页面按F5的麻烦Prettier一键格式化代码让代码排版整整齐齐HTML CSS Support写CSS类名时自动补全还能提示HTML文件里已经用过的类名。这三个装完你的开发体验基本就能追平专业选手剩下的插件等你以后遇到具体需求再慢慢加。提示如果你是苹果电脑完全可以用系统自带的“文本编辑”开始Windows也可以用“记事本”。但我不建议这样长期用——这两者都缺少语法高亮写代码到处都是黑底白字代码一多眼睛很难受而且在排查括号匹配这类问题时会非常痛苦。哪怕临时用也先把行号显示打开。2.2 浏览器开发者工具的初步掌握学习前端绕不开的一关是浏览器开发者工具我的建议是从第一天学HTML和CSS就开始用它而不是等到出了Bug再打开。按一下F12或者右键页面选“检查”你就能看到元素面板里面展示着当前页面完整的HTML结构和所有应用的CSS样式。对于初学者来说这个工具最大的价值有两个第一你可以实时修改CSS样式看效果——比如觉得标题颜色不好看直接在开发者工具里改不用刷新页面就能即时看到预览第二你可以通过它排查布局问题——选中一个元素能看到它的宽高、外边距、内边距还能看到它是被哪些样式影响才变成现在这副模样的。我见过太多人遇到页面样式不对就瞎试代码改一行刷新一次浏览器跟拆盲盒一样。其实只要打开开发者工具鼠标悬停到不对的那个元素上所有问题基本都能一目了然。开发的时候同时开着“编辑器”和“开发者工具”这两块屏幕是我一直推荐的姿势左边写代码右边看效果效率至少翻倍。2.3 第一行HTML代码创建你的页面骨架环境和工具都准备好了现在是时候创建第一个文件了。在项目文件夹my-website里新建一个文件命名为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 /body /html别急着跳过这串代码里面每一行都有它的作用。!doctype html是告诉浏览器“请用现代标准模式来渲染页面”简写就是DOCTYPEhtml langzh-CN声明页面使用语言是中文方便浏览器和搜索引擎理解meta charsetutf-8指定字符集编码为UTF-8保证中文不乱码meta nameviewport ...是关键中的关键它让页面在手机上有正确的显示比例没有这行手机打开你的页面会跟缩小了无数倍的桌面版一样。你注意到没有HTML文件的内部以head和body两大部分区分。head里放的是页面的“元信息”包括标题、字符集、引入的外部文件这些内容用户看不到但浏览器要看body里放的是用户真正能看到的所有内容——标题、文字、图片、链接。这个结构理解清楚了HTML的大门你就已经迈进来了。3. HTML核心标签与页面骨架搭建3.1 HTML基础语法标签、属性与层级关系HTML的核心语法非常简单就三样东西标签、属性、内容。标签用尖括号包裹大多数标签都有开始和结束之分比如h1是开始标签/h1是结束标签它们中间的内容就是被标记的文本。属性则写在开始标签内部用来给标签补充额外信息比如a hrefhttps://...里的href就是属性它告诉浏览器链接要跳转到哪里。HTML还有一种非常重要的关系——嵌套层级。一个标签套在另一个标签里面就形成了“父子”和“兄弟”的关系。比如body是所有可见内容的父级p是body的子级两个相邻的p标签则是兄弟级。搞清楚这种树状结构非常重要因为CSS的很多选择器规则都基于层级关系后面你写样式时会频繁用到“子元素”“后代元素”这类说法。新手写HTML最容易犯的一个错误是标签交叉嵌套比如pstrong你好/p/strong。这种写法的开始和结束标签顺序不匹配浏览器虽然能自动纠错但会打乱你预期的结构导致样式错乱。我给你的建议是每嵌套一层就缩进两个空格这样谁是谁的子级一眼就能看清楚而且一定要养成写完开始标签立刻写结束标签的习惯不要拖到最后一起补。3.2 文本编辑的语义化标题段落与列表的正确使用写内容时很多人用h1、h2只是因为“标题字号大”这是个很常见的误区。HTML的标签不只是用来“显示效果”更重要的作用是表达含义。h1代表一级标题、h2代表二级标题它们定义的是文档的标题层级而不仅仅是字号大小。搜索引擎在抓取页面时会特别看重h1、h2的层级来判断页面结构是否合理。在实际个人页面里我建议的标题用法是这样的整个页面只使用一个h1放你的名字或页面主标题每个内容区块用h2作为分区标题比如“我的作品”“关于我”如果你需要在一个区块里再细分才考虑用h3。段落文字用p包裹列举信息用ul无序列表和li列表项组合比如技能列表、经历时间线用列表结构既清晰又有语义感。注意不要为了想让文字变大就用标题标签想让文字变大请用CSS设字体大小。标签表达内容语义CSS控制外观样式这两件事各司其职页面才会既好维护又好优化。3.3 链接、图片与多媒体标签的实战用法一个网页如果只有文字那是“文档”而不是“网页”。链接和图片是把页面真正“织”起来的关键。链接用a标签最简单的写法是这样a hrefhttps://github.com/你的用户名 target_blank我的GitHub/ahref属性填链接地址target_blank表示在新标签页打开。这里有个细节很多人在意要不要加target_blank如果链接跳转到外部网站我建议加不然用户点了你的链接就离开你的页面了如果是页面内部的锚点跳转就不需要加。图片用img标签它是少数几个没有结束标签的HTML标签之一img srcimages/avatar.jpg alt我的头像 width200src填图片路径alt写图片无法加载时的替代文字width可以手动指定显示宽度。关于alt属性我多说一句它不仅是给视力障碍用户读屏用的也是搜索引擎理解图片内容的唯一途径还对你自己的SEO有好处千万别偷懒省略。如果你在作品展示区要放代码片段、引用某段文字可以用pre配合code如果你想放视频可以用video controls srcxxx.mp4/videocontrols属性会显示播放控制条。这些标签的规律都很一致眼看一遍不如手敲一遍自己做一遍就记住了。3.4 容器布局的核心div和span的分工协作做网页布局时你会大量用到两个容器标签div和span。它们本身没有任何样式纯粹是用来“分组”的。区别在于div是块级元素会独占一行适合用来做大的布局块span是行内元素只占据内容本身的空间适合在文字内部包一小段来做特殊样式。打个比方div像是物流仓库里面可以放各种大箱子一个仓库跟另一个仓库可以上下摞起来span像是货架上的小标签只标在某个具体的商品旁边不影响货架的整体排列。个人网页中导航栏是一个div作品卡片是一个div每张卡片里的“作品名称”标签则可以用span来做更多控制。为了让CSS能找到并区分不同的div我们需要借助class和id属性。class可以重复使用适合给同一类元素命名比如classwork-cardid在整个页面中只能出现一次适合给唯一元素定位比如idmain-header。在命名上我的建议是用小写英文字母加中划线连接语义要明确比如project-card、about-section别用box1、div2这类毫无意义的命名等你项目大起来后自己都会忘掉它们到底是干什么的。3.5 表单与交互元素从接触按钮到更多界面让你迈入交互个人网页虽然以展示为主但如果要收集访客的留言、联系方式表单就是绕不开的元素。表单由form标签包裹内部用input、textarea、button等控件来接收用户输入form action methodpost label forname你的称呼/label input typetext idname namename placeholder请输入名字 label formessage留言内容/label textarea idmessage namemessage rows4/textarea button typesubmit发送/button /formlabel的for属性要与input的id保持一致这样点击“你的称呼”这几个字时输入框会自动聚焦对鼠标操作的体验更友好。placeholder属性是输入框内显示的灰色提示文字它不参与提交只做引导。单纯的静态页面提交表单数据是不会真的发送到服务器上的。不过这不影响你学它的价值——你把表单写出来以后可以先用JavaScript或第三方服务比如各种表单托管平台来处理提交事件但这属于后话。你现在要做的是把表单的结构和属性用顺手这是以后所有交互功能的地基。4. CSS样式系统的核心机制详解4.1 CSS的三种引入方式内联式、内部式、外部式说完HTML的结构我们终于可以来做“化妆”了。CSS有三种引入方式我建议直接按实际业务场景来选择。内联式直接写在标签的style属性里比如p stylecolor: red;。这种方式最直接但完全不具备复用性改一个样式得满页面去找。它适合做快速测试、临时调试但正式代码里能不用就不用。内部式写在HTML文件的head里的style标签中。它比内联式好维护适合单页面的简单项目。但如果网站有多个页面每个HTML文件都要复制一份这些样式改起来会令人崩溃。外部式写在一个独立的CSS文件里用HTML的link标签引入比如link relstylesheet hrefcss/style.css。这是最符合工程化思维的方式全站样式集中管理、多页面复用、还能利用浏览器缓存提升加载速度。我强烈建议你的个人网页用这种方式。4.2 选择器体系类选择器、ID选择器、标签选择器与优先级CSS的工作方式很简单选中元素然后给它设置样式。选中元素这一步靠的是“选择器”。最基础的三类选择器是标签选择器直接写p、h1选中所有对应标签、类选择器.class-name选中所有带这个类名的元素、ID选择器#id-name选中唯一一个带这个ID的元素。此外还有后代选择器.nav a选中.nav里面的所有a标签、直接子元素选择器.nav a选中.nav下直接子元素中的a标签。选择器之间存在优先级这是我们写CSS必须搞懂的核心规则。简单说ID选择器 类选择器 标签选择器。如果你同时用三种方式选中同一个元素并设置了相同的属性最终生效的是优先级更高的那一个。如果优先级相同后写的覆盖先写的。实际写个人网页时我最常推荐的是“多配合类选择器来做样式”这条路因为它的优先级适中、可复用。ID选择器的优先级太高用错地方容易让样式难以覆盖所以除非是给唯一元素定位或做页面锚点我基本很少用它来写样式。4.3 盒子模型理解外边距、内边距、边框是关键如果你只学一个CSS概念那一定是盒子模型。它解释了网页里的每个元素如何被看成一个个矩形盒子以及盒子之间如何排列。从内到外盒子的组成依次是内容content、内边距padding、边框border、外边距margin。这里的顺序记死内边距在元素内部边框包着内边距外边距在边框外面让跟其他盒子保持距离。一个元素的最终占位宽度不是只算内容的宽度而是内容加内边距加边框的完整和。比如你设置一个div的width: 200px、padding: 20px、border: 2px那它实际占的宽度是200 20*2 2*2 244px。新手最容易在这个地方踩坑“我明明设了width为什么还是超出了”多半就是没算内边距。解决这个问题有两个思路一是记住这个计算规则手动换算二是在CSS开头加上一句通配设置* { box-sizing: border-box; }设了border-box之后元素设置的width就是包含内边距和边框在内的最终宽度计算负担一下子小了很多。我自己的项目基本都加这一句省心。4.4 排版与布局的核心属性字体、颜色、背景与文本把盒子的概念装进脑袋后接下来就是把盒子打扮好看。CSS里最常用的排版属性可以按功能分成几类字体与文本font-family设置字体族建议同时写多个候选值比如font-family: Microsoft YaHei, PingFang SC, sans-serif;这样在Windows和Mac上都有合适的字体。font-size控制字号推荐用像素px或相对单位em、rem后者在响应式设计中更有优势。line-height控制行高合适的行高是提升阅读体验最便宜的方法正文建议1.5到1.8倍。text-align控制对齐方式text-decoration可以加下划线或删除线。颜色CSS里可以写颜色的英文单词red、十六进制#ff0000、RGBrgb(255,0,0)或HSLhsl(0,100%,50%)。实际开发中最常见的还是十六进制因为它精确又简洁。建议你从调色板网站比如Coolors、ColorHunt找一组色调协调的色值别自己随便拍脑袋从十几个不同色系里抓颜色主页看起来花哨又廉价的原因基本都是配色乱。背景background-color管背景色background-image管背景图background-size: cover可以让背景图片等比缩放覆盖整个元素区域而不变形拼凑background-position控制背景图在元素中的位置。背景图的路径如果是相对路径它是以CSS文件所在位置为基准来计算的这一点跟HTML文件里的img标签路径容易混淆我自己也不止一次被这个绕晕过特此给你提个醒。4.5 布局技术对比流式布局、浮动、Flexbox与Grid当元素多了起来怎么把它们按预期排成行列这是CSS学习里的分水岭。早期CSS用的是“浮动布局”float后来大家发现有更好的方案可用Flexbox和Grid已经成为现代布局的主流。流式布局是最自然的状态块级元素从上往下堆行内元素从左往右排。它符合人的阅读习惯页面不加任何布局代码时就是这个效果。**Flexbox弹性盒子**解决的是“一维排列”问题适合做导航栏、卡片横向排列、容器内容居中这类需求。你只需要在父级容器上写display: flex;它内部直接子元素就会从纵向堆叠变成横向排列。配合justify-content: center;实现水平居中配合align-items: center;实现垂直居中这两兄弟基本是页面居中的“完全体”好用得让人感动。**Grid网格布局**解决的是“二维网格”问题适合做整个页面的框架布局。写display: grid;后通过grid-template-columns: 1fr 1fr 1fr;可以把容器分成三个等宽列非常直观。给零基础读者的建议是先把flex彻底用好个人网页的场景百分之八九十都能靠它解决学有余力再上手grid。不要一上来就想着用高端技巧先用兵再练兵器步步为营基础会扎实得多。5. 实操完整实现一个个人网页全流程5.1 第一步规划页面布局并搭建HTML骨架好了所有核心概念都讲完了现在我们来实际做一个东西。我们的目标是一个简洁但完整的三段式个人网页顶部导航栏中间主内容区包含个人介绍和作品展示底部页脚。按照前面讲的思路我先把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 header classsite-header nav classmain-nav a href#home classlogo李小明/a ul classnav-links lia href#home首页/a/li lia href#about关于我/a/li lia href#works作品集/a/li lia href#contact联系我/a/li /ul /nav /header main section idhome classhero h1你好我是李小明/h1 p一名热爱前端开发的设计爱好者/p /section section idabout classabout h2关于我/h2 p我在业余时间喜欢捣鼓网页和设计喜欢把想法变成看得见摸得着的东西。/p /section section idworks classworks h2我的作品/h2 div classwork-grid article classwork-card h3作品一读书笔记站点/h3 p一个记录阅读摘录的静态站点。/p /article article classwork-card h3作品二旅行相册/h3 p用纯CSS做的一个照片展示画廊。/p /article article classwork-card h3作品三个人博客/h3 p基于HTML和CSS的极简博客模板。/p /article /div /section section idcontact classcontact h2联系我/h2 p你可以通过邮箱或者社交媒体找到我。/p a hrefmailto:lixiaomingexample.com classbtn发送邮件/a /section /main footer classsite-footer p© 2025 李小明 · 用HTML与CSS制作/p /footer /body /html这个结构我特意选了最常见的语义化标签header做页头、nav做导航、main放主体内容、section做分区块、article放独立内容、footer做页脚。这些标签跟div一样是容器但有了语义代码的可读性好很多对搜索引擎也更友好。新手完全可以先照着这个结构把代码敲一遍再改掉里面的文字。5.2 第二步创建CSS基础样式与变量定义接下来打开css/style.css我们逐步加点样式。先写基础重置和全局变量* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; background-color: #f9f9f9; }这两段的作用所有元素去默认边距避免不同浏览器内置样式差异设置正文的字体、行高、颜色和背景色。在真实开发中这就是所谓的“CSS Reset”和“全局样式”是所有页面修饰的基础。5.3 第三步实现导航栏、主内容区、作品卡片与页脚的样式导航栏我打算做成“横向排列左Logo右菜单”的形式这正好是Flexbox的经典场景.site-header { background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; } .main-nav { max-width: 1000px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; } .nav-links { display: flex; list-style: none; gap: 24px; } .nav-links a { text-decoration: none; color: #333; transition: color 0.3s; } .nav-links a:hover { color: #007acc; }这段代码有几个关键点。position: sticky; top: 0;让导航栏在滚动时“粘”在屏幕顶部这是很多网站的常见交互效果。.main-nav里的display: flex; justify-content: space-between; align-items: center;分别实现了左右分布和垂直居中。.nav-links里的gap是Flexbox的内边距属性用来控制子元素之间的间距比给每个li设margin方便得不是一星半点。transition让鼠标悬停时的颜色变化不是瞬间跳变而是有一个平滑过渡观感立刻高级不少。接着做主体区的样式。个人介绍区我打算让它视觉上突出一些用全屏宽加一个渐变背景.hero { background: linear-gradient(135deg, #e0f2fe, #ffffff); text-align: center; padding: 80px 20px; } .hero h1 { font-size: 48px; margin-bottom: 8px; } .hero p { font-size: 18px; color: #666; }关于我的区域和联系区域我用一个通用样式.about, .contact { max-width: 800px; margin: 0 auto; padding: 60px 24px; }作品展示区的卡片布局就是经典的多列布局.work-grid { max-width: 1000px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .work-card { background-color: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.2s, box-shadow 0.2s; } .work-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))是一个非常有用的写法它表示如果容器足够宽可以放多少列就放多少列每列宽度最少260px剩余空间由各列均分1fr代表等分剩余空间。这样在桌面端是3列在窄屏会自动变成2列、1列完全不用写任何额外的媒体查询代码就实现了基础的响应式效果。卡片悬停的微交互上浮和阴影变深是细节上提分的地方。不要小看这种几秒钟就能写完的效果个人网页的气质往往就体现在这些微小但到位的细节里。页脚样式相对简单居中即可.site-footer { text-align: center; padding: 24px; background-color: #222; color: #ccc; margin-top: 60px; }5.4 第四步调试响应式细节并优化移动端体验页面做完之后别忘了检查它在手机上的表现。虽然我们没有写繁琐的媒体查询但依然有几处地方需要手动确认导航栏在窄屏下是否会出现横向滚动文字是否过小间距是否过于拥挤针对导航栏一个简单有效的处理方式是在窄屏下让Logo和菜单的字体稍微缩小并且允许菜单项换行。可以在CSS文件末尾增加一个媒体查询media (max-width: 600px) { .main-nav { flex-direction: column; gap: 12px; } .hero h1 { font-size: 32px; } }media是响应式设计的核心语法(max-width: 600px)表示“当浏览器视口宽度不超过600px时应用花括号内的这些样式”。这段代码让矮窄屏下导航栏从横排变成纵排标题不至于大得占满整屏。零基础阶段掌握flex加media这两招做响应式已经可以覆盖绝大多数场景了。做完这些你的个人网页就有了一个拿得出去见人的样子打开浏览器看看效果吧。真实的成就感就是在这一刻冒出来的。6. 遇到问题时怎么排查常见报错与样式异常实录6.1 CSS样式完全不生效的排查思路“明明写了CSS页面却没有任何变化”——这是所有初学者碰到最多的一个问题。遇到这种情况别急着改样式按下面的顺序排查第一步确认CSS文件有没有被正确引入。打开开发者工具的“网络Network”面板刷新页面看style.css文件是否加载成功。如果状态码是404多半是href路径写错了检查一下css/style.css和当前HTML文件的相对位置。第二步看编译器或者浏览器控制台有没有报错。如果在CSS文件里少了花括号或者分号后续的规则会被浏览器直接忽略这段代码就不会生效。第三步确认选择器是否匹配到了目标元素。在开发者工具的元素面板里点选你的目标元素右侧“样式”区域会列出所有应用到这个元素上的规则。如果列表里没有你写的类名说明选择器没选中检查一下HTML里有没有包含那个class。第四步排查优先级冲突。如果列表里明明有你的样式但属性被划了一条删除线说明有另一个优先级更高的规则覆盖了你写的属性。“优先级”这个概念我第一次接触时也觉得抽象其实把它想成“谁说了算”ID权重最高其次是类然后是标签。你写的这个规则如果不生效大概率是优先级被别的选择器“压”住了。6.2 布局“乱掉了”元素位置不对怎么办有时候样式生效了但布局跟想象中不一样比如盒子偏了、元素重叠了、宽度不对。这时候打开开发者工具选中那个看起来不对的元素看它所属的盒子模型展示高亮显示的四个区块分别代表content、padding、border、margin一切的秘密都在这里。最常见的情况是你设了width: 200px但又加了左右padding: 20px和border元素实际占的宽度大于200px把旁边的元素挤下去了。碰到这种情况去看box-sizing这个属性我在4.3节提到的border-box方案就是专门用来治这个病的。元素对不齐还有一个高频原因是忘掉了display: flex对子元素的默认行为。比如display: flex后子元素默认会沿主轴排列但只要子元素里有个文字特别长的a标签宽度分配就会不平衡。你可以尝试对子元素设flex: 1让它均分剩余空间或white-space: nowrap来规避换行问题。多试两遍手感就来了。6.3 图片不显示、字体不对齐、颜色差了几个度这三个问题属于日常开发里最琐碎但实际上最影响观感的。图片不显示绝大多数情况是路径错误。相对路径的参照基准要时刻注意在CSS的background-image里路径相对于CSS文件所在的文件夹在HTML的img src里路径相对于当前HTML文件。这是新手最容易搞混的规则没有之一。如果路径确认没错那再检查文件名的后缀大小写image.JPG和image.jpg在本地可能能打开但部署到某些服务器上就会404。字体不对齐几乎都是line-height惹的祸。不同字体在同一字号下的默认行高不同看起来高低不一致。统一给标题和正文设置固定line-height问题一般就消失了。颜色偏色先看是不是显示器色温问题再看是不是你这边用了rgba但数值写错了比如把逗号写成小数点颜色就会跟预期差很多。这种问题找不到头绪时直接在开发者工具的颜色选择器里对比大多数情况一眼就能定位。6.4 常见问题速查表现象可能原因常见解决办法样式完全不生效CSS文件未正确引入或选择器写错检查link标签路径、类名是否一致样式被划删除线选择器优先级冲突提高选择器优先级或调整书写顺序盒子宽度溢出未设box-sizing: border-box全局设置border-box或手动计算宽度元素不能居中忘了设置父级display: flex在父容器加flex子元素加margin: auto图片加载不出来src路径错误检查相对路径基准是否为当前HTML文件中文字体显示难看未设置合适字体族指定系统字体栈比如微软雅黑/苹方手机端布局错乱缺少viewport或未做响应式加viewport meta标签写媒体查询导航栏跟着滚动消失忘了position: sticky或固定定位给导航栏添加position: sticky和top: 0这张表基本覆盖了我带新手时遇到过的高频问题你可以把它存下来遇到问题先来对着查一遍比自己瞎折腾快得多。7. 后续还可以怎么玩个人网页的二次升级路径页面能正常展示之后可学的空间还有很大。我每次做完一个小项目都会问自己一个问题下一步想让它变成什么样子第一个可以扩展的方向是“动效”。CSS动画的属性并不是很难核心是transition和keyframes。你已经学会了transition做悬停过渡keyframes则可以定义一套完整的动画过程让元素从淡入到位移再到缩放一气呵成。网上现在很火的“鼠标移入卡片发光边框”“波纹扩散”这些高级效果背后基础也不过是CSS动画加伪元素这些技巧组合。第二个方向是“交互”。HTML和CSS本身只是静态展示要想让页面跟你“说话”就需要JavaScript加入。你可以用几行JavaScript给导航栏加一个屏幕滚动到一定高度后的背景变化效果或者给作品卡片增加点击展开详情的功能。学完CSS再做JavaScript你会发现自己的理解速度快得惊人因为页面的结构和样式的“为什么”你已经吃透了。第三个方向是“部署上线”。本地写好的页面只能自己看但如果你希望把它分享给朋友甚至公开展示就需要把页面部署到服务器上。市面上有不少托管静态网站的免费平台把整个文件夹拖上去就能得到一个公开链接。这个过程操作不难却能让你的第一次“发布”体验沸点拉满。从零基础到能独立完成一个可以公开访问的个人网页其实就隔了一个“完整做一遍”的距离。HTML和CSS都是靠手熟的技术你写得多、踩过的坑多成长速度就快。希望这篇文章能帮你迈出第一步也欢迎你在动手过程中随时回来对照排查做出属于你自己的那一个页面。