今天就来聊聊我捣鼓网站首页代码那点事儿。也没啥高深的技术，就是自己瞎琢磨，记录一下过程，省得以后忘。

起因是前段时间想给自己弄个简单的个人展示页，不用太花哨，就放点基本信息和作品啥的。一开始我寻思着用现成的模板或者框架，省事儿嘛可找一圈，发现要么太复杂，功能一大堆我根本用不上，要么就是样式太死板，改起来费劲。

我决定自己动手，从头写个基础的。

我想着首页嘛结构最重要。以前学过点基础，知道用`div`来划分区域挺方便。我就盘算着，页面大致得分成几个部分：

• 顶部：放个标题或者Logo啥的。
• 导航栏：放几个链接，虽然暂时可能没内容，但样子得有。
• 主体内容区：这块儿得大点儿，以后放主要东西。
• 侧边栏：放点次要信息或者链接。
• 底部：版权信息或者联系方式。

思路有，就开始动手。我先建个`*`文件，然后用`div`把上面想好的几个区域给框出来。给每个`div`都起个名字，就是加个`id`或者`class`，方便后面用CSS控制它们的样子。

布局是关键

光有`div`不行，它们默认都是从上往下排的。我想要的是那种左边主体、右边侧边栏的布局。这时候就得靠CSS。我想起以前用过的`float`属性，让主体内容区靠左浮动，侧边栏也靠左浮动（或者靠右，看具体怎么设计）。

然后就是调边距`margin`和内边距`padding`，让各个块儿之间有点空隙，别挤在一起，看着难受。我还给整个页面设置个宽度，并且让它在浏览器里居中显示，这样在大屏幕上看着舒服点，用`margin: 0 auto;`这个老办法。

写CSS的时候，我习惯是先写结构布局，再调细节。比如先把宽度、高度（有时候不用定死高度）、浮动、清除浮动这些搞定，保证架子是对的。然后再慢慢加背景色、边框、文字样式啥的。

中间也遇到点小麻烦。 比如那个浮动，搞不好下面的`div`就会跑到上面来，布局就乱。试几次，加个空的`div`设置`clear: both;`才算解决，虽然感觉这方法有点笨，但确实管用。

填充点内容看看效果

架子搭得差不多，我就往里面随便填点文字，比如标题写个“我的主页”，导航栏写上“首页”、“关于我”、“作品集”之类的。主体内容区和侧边栏也随便放几段“这里是主体内容”、“这里是侧边栏信息”的文字。

在浏览器里一打开，还真像那么回事儿！虽然简陋，但基本的结构都有。顶部是顶部，导航是导航，左边是左边，右边是右边，底部也老老实实待在最下面。

这只是个最最基础的静态页面骨架，离一个真正能用的网站首页还差得远。没有交互，没有动态内容，样式也很朴素。但作为一次实践记录，我觉得挺把思路和过程捋一遍。

后续要美化、要加功能，那都是在这个基础上添砖加瓦的事儿。今天主要是分享这个从零开始搭架子的过程，感觉自己动手，印象确实更深。