网站框架搭建

打开一个空文件夹，网站里面什么都没有。框架你要做的搭建第一件事不是写代码，而是网站画图——用笔在纸上画，或者用工具画。框架我见过太多人跳过这一步，搭建直接打开编辑器开始敲<div>，网站结果三天后自己都忘了哪个容器套哪个容器。框架网站框架，搭建说白了就是网站骨架。骨架没搭正，框架后面贴再多皮肉都是搭建歪的。

先定页面分区。网站一个典型的框架企业展示站，首页通常切成五块：顶部导航、搭建主视觉区、核心内容区、辅助信息区、底部。拿张A4纸横过来，画五个矩形，标注高度比例。导航栏一般80px上下，主视觉区占屏幕高度的60%到80%，剩下的按内容重要性分配。这个比例不是死的，但要有理由。比如你做的是摄影站，主视觉区就该更大，导航甚至可以透明浮在上面。

分区画完，开始写HTML结构。别急着上CSS。我习惯先用语义化标签把骨架搭出来：<header>放导航，<main>包住主体内容，里面再分<section>和<article>，<aside>搁侧边栏，<footer>收尾。这样写出来的代码，哪怕把样式表全删了，浏览器里看也是一份有层次的文档。搜索引擎爬虫读起来也顺。有人图省事全用<div>，加一堆class名，短期看不出问题，等你要改版或者做SEO的时候就头疼了。

接下来是CSS布局。2024年了，别再用float和table布局。Flexbox和Grid是标配。导航栏用Flexbox，一行排列，两端对齐，简单干净。主内容区如果是一主一侧的布局，Grid更合适，直接写grid-template-columns: 1fr 300px; 完事。响应式也好处理，媒体查询里把列改成单列就行。我自己的习惯是移动端优先，先写小屏样式，再用min-width往上叠。这样代码量少，逻辑也清楚。

框架搭建里有个容易被忽略的环节：容器宽度。很多新手直接给body设个宽度，或者每个section单独写max-width。更好的做法是定义一个全局容器类，比如.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }。所有内容区都套这个容器。这样整站的对齐线是统一的，视觉上整齐。1200px是个经验值，适合大多数桌面屏幕，再宽阅读就累了。当然，如果你的站是数据密集型后台，可以放宽到1400px甚至1600px。

还有个细节：盒模型。全局设box-sizing: border-box。这行代码能省掉你以后算宽度时的一半烦恼。padding和border不再撑大元素，布局计算直观得多。我见过一个项目，没设这行，结果一个宽度100%的输入框加了padding后溢出容器，排查了半小时。教训。

框架搭到最后，留个扩展口。比如预留一个<div id="modal-root">放在body末尾，以后弹窗组件直接往这里挂。再比如CSS变量定义好主色、辅色、圆角半径、阴影层级。这些基础设定在项目初期花十分钟写好，后期改主题的时候能省你两天。我现在的习惯是，任何新项目，先花半小时把reset、变量、容器、栅格这几样写好，再开始做具体页面。这半小时，值。

框架不是一次成型的。第一版能跑起来就行，别追求完美。写着写着你会发现某个区域需要调整，回头改结构很正常。关键是保持代码整洁，该注释注释，该分文件分文件。一个清晰的框架，是你三个月后还能看懂自己代码的前提。