今天就来唠唠我最近捣鼓那个“首页制作公开课”的事儿。

也没啥特别的原因，就是前段时间手上活儿不多，有点闲。天津市私家侦探公司上网瞎逛的时候，看到有个公开课的介绍，说是从头教怎么搭一个网站首页出来。我想着这玩意儿虽然基础，但长时间不碰也容易手生，不如跟着走一遍，就当是复习加练手。

说干就干。我先把人家课上提供的那个练习资料给弄下来。打开压缩包一看，嚯，东西还挺全乎，有视频教程，还有一些图片素材和代码示例啥的。挺省得我自己到处找。

然后，我就打开我的电脑，准备好家伙事儿。我平时写代码用的那个编辑器一直都在，就没再特意去装新的软件。主要是心态得摆正，就当自己是个啥也不会的新手，一步步跟着来。

开始动手捣鼓

我点开第一个视频，老师讲得还挺细致，从最基本的HTML结构开始。我就跟着视频，先把页面的大框架给搭起来。比如，哪里是导航，哪里是放主要内容的地方，哪里是页脚，用那个`

`标签先把各个区域的标题给标示出来，再用`

`随便填点文字占个位置，这样看起来就有个大概的轮廓。

接着就是上样式，也就是弄那个CSS。这块儿稍微费点劲。视频里老师是刷刷刷几下就搞定，但我自己动手的时候，一会儿是颜色不对，一会儿是对齐方式总出问题。特别是想让几个块儿并排显示，或者固定在某个位置，总要来回调试好几次。有时候明明是照着敲的，效果就是出不来，那叫一个折腾。

公开课里好像重点讲那个首页大图轮播的效果，就是好多网站顶部那个能自己切换图片的地方。这个功能看着挺炫酷，实现起来代码还真不少。我基本是暂停视频，敲几行代码，再播放，再暂停，再敲……就这么反反复复，对着视频里的代码一行行看，总算是把那个轮播图给弄出来，能自动切换，鼠标放上去也能停住。

遇到问题和解决

中间肯定不是一帆风顺的。比如有一次，图片死活显示不出来，检查半天，发现是路径写错，少个斜杠。还有一次，某个元素的边距怎么调都不对，后来才发现是被另一个全局样式给覆盖。咋办？也没啥好办法，就是硬着头皮查。把代码翻来覆去地看，用最笨的方法，一段一段地注释掉再取消注释，看看是哪块儿出问题。有时候还真是这种土办法管用。

没去找什么大神问，也没去搜什么现成的答案，就自己琢磨。我觉得，学东西，尤其是学这种实践性强的东西，自己踩坑、自己爬起来的过程，比直接看答案印象深刻多。

最终的成果

前前后后大概花大半天时间，总算是把那个首页给做出来。虽然挺简单的，就是一个静态页面，没啥后台交互，但是看起来还像那么回事。导航栏、大图轮播、下面的内容分区、页脚信息啥的，基本都有。自己从头到尾敲出来的，看着还是挺有成就感的。

这回跟着公开课实践下来，感觉收获还是有的。陕西侦探公司把一些基础的HTML标签和CSS属性又过一遍，特别是布局和定位这块儿，比之前更清晰点。虽然这些技术不算新，也不算难，但做网页，这些基础玩意儿要是整不明白，后面更复杂的东西也玩不转。

行，今天就先分享到这儿。算是一次简单的实践记录，希望能给同样在学这个的朋友一点小小的参考。关键还是得多动手，光看不练假把式嘛