今天搞点东西，就是那个“学好英语网”的首页。想着得弄个门面出来，不然光秃秃的也不像话。所以就动手实践一下，记录记录过程。

准备阶段

一开始也没想太复杂，就想着首页嘛得让人知道这是个学英语的地方。脑子里大概过下，需要些肯定得有个醒目的标题或者网站名字，然后简单介绍下我们这网站能干再放几个主要功能的入口，比如去哪儿看课程，去哪儿练听力啥的。

工具嘛就用我平时顺手的那个编辑器，写代码。然后浏览器肯定得开着，随时看效果怎么样。图片啥的暂时没弄太复杂的，先找张感觉还行的顶图凑合用。

动手搭建

先是新建个HTML文件，把基本的网页结构，就是那个``, ``, ``这些标签先打这算是搭个架子。

然后开始填内容：

• 头部区域： 我放网站的名字，用大一点的字号，让人一眼能看到。旁边打算放个导航条，就先用`
  `列表弄几个文字链接占位，比如“首页”、“课程”、“词汇”、“社区”这些。
  • 主要内容区： 这是重点。头部下面，我放那张找来的图片，搞得大一点，吸引眼球嘛图片下面加段欢迎语和网站的简单介绍，就说我们这儿提供各种英语学习资源，帮助大家提高之类的。再往下，我分几个小区域，用方框框起来那种感觉，每个框里放一个主要功能的简介和入口按钮（按钮也是先做的样子），比如“精品课程推荐”、“每日一句”、“在线测试”啥的。
  • 底部区域： 这个简单，就放版权信息，还有一些“关于我们”、“联系方式”之类的文字说明，也是先占个位置。

  调整样式

  光有骨架和文字不行，太丑。就得弄点样式（CSS）来美化下。

  我也没搞得很花哨，就想让它看起来干净、整洁点。

  • 整体布局： 用点简单的CSS让内容基本居中显示，别都挤在左边。
  • 颜色和字体： 选个看着比较舒服的蓝色作为主色调，用在标题和导航上。字体就用系统默认的，没特意加别的，先保证能看清楚。
  • 间距和边框： 调整各个板块之间的距离，让它们看起来不那么挤。给那几个功能介绍的小区域加点边框和背景色，区分开来。

  这个过程就是一边写样式，一边切到浏览器刷新看效果，不行就回来改，来来回回折腾好几次。特别是对齐和间距，有时候调起来还挺费劲的。

  初步完成

  搞完之后，整体看一下，还行，至少有个首页的样子。导航能点（虽然现在还哪儿也去不），主要内容也展示出来，底部信息也有。功能肯定是没有的，就是个静态页面。

  当然这只是个开始，后面还得继续完善。比如导航要链接到真实的页面，功能入口要能跳转，可能还得加点动态效果啥的。但今天这个实践，算是把首页的“骨架”和“皮肉”初步搭起来。

  感觉自己动手过一遍，比光看理论强多。今天就先到这，下次再接着弄里面的具体页面和功能。