介绍家乡的html_第二弹：制作家乡网页设计的全过程（图文教程）

  前话  

已经有段时候没有更新了，也有小伙伴给我留言，问我啥时候更新，由于忙于所忙(到底忙什么？小编也要为生计而奔走)，鲜少去回复大家的留言，还请大家见谅，今天准备了第二更，emmmmm，终究是更新周期还是定不下来...  规划  好了废话不多说，开始今天的主题，今天书接上文，设计第二页家乡介绍，好了，开始盘ta...观阅此篇之前强烈建议先阅读 《第一弹：制作家乡网页设计的全过程(图文教程)》，因为此篇是以其为基础的。

  制作  

1、打开上期制作文件夹，复制一份index.html，如下图

2、继续

重命名【index - 副本.html】 为 【introduce.html】，这里有小伙伴可能会问了，为什么要复制，而不是重新新建，像首页那样的制作流程，这里给大家解释以下，写好的代码要学会复用，其实一个网站的框架固定后，页头、菜单栏和页脚的样式是可以公用的。3、编辑introduce.html用notepad++打开introduce.html，删掉中间的图片

OK，好了双击打开introduce.html,在浏览器看一下效果吧

好吧，中间区域的位置留出来了，就开始把你家乡的介绍文字放在这里吧。

首先布局简洁一点(简洁不等于简单)，也是上中下的模式，上面放置一张banner图片，布局构思好了之后就先敲个架子，如下图

再来准备一张banner图片，放置到images文件夹中

将banner.jpg加入到页面中

效果如下

问题来了，banner和菜单栏怎么有这么大的间距

原来是新加的table高度没有撑开，给table加上高度样式

这个间隔已经可以了，下面不合适再继续调整

开始添加文案吧

继续添加家乡的介绍

emmmm，文字拥挤在一起了，太丑了吧，优化一下

嗯，差不多了，但是中间文字背景色还需要调整一下

最终定稿图

  百度云下载  

链接：https://pan.baidu.com/s/1yT1ks1fERrgEx-_IR_tXjw

提取码：gv9r

  写稿不易，emmm...