17.2.5  设计系统首页文件

17.2.5 设计系统首页文件

本系统实例的系统主页文件是index.html，具体实现流程如下。

（1）设计顶部导航界面

插入一个名为“header”的<div>，然后在顶部插入一幅素材图片<div>，在下面分别设置主页、产品展示、关于我们、个人博客、联系我们共5个导航链接。具体代码如下。

执行后的效果如图17-19所示。

图17-19 顶部导航

（2）设计中间内容界面，插入一个名为“contents”的<div>，具体实现流程如下。

■首先在上方插入一幅名为“summer-nymph.png”的图片。

■然后使用<p></p>标记输入一段文本。

■接着插入一个名为“featured”的<div>。

■通过<ul>和<li>列表标记连续插入三个图文并茂的产品信息。

具体实现代码如下。

此时执行之后的效果如图17-20所示。

图17-20 执行效果

（3）设计底部导航界面，插入一个名为“footer”的<div>，具体实现流程如下。

■插入一个名为“connect”的<div>。

■分别提供两个和联系信息有关的超级链接。

执行之后的效果如图17-21所示。

图17-21 执行效果