6.6 综合案例1——制作简单公司主页
打开各种类型的商业网站，最先映入眼帘的就是首页，也称为主页。作为一个网站的门户，主页一般要求版面整洁，美观大方。结合前面学习的背景和边框知识，我们创建一个简单的商业网站。具体步骤如下所示。
step 01 分析需求。在本案例中，主页包括了三个部分，一部分是网站Logo，一部分是导航栏，最后一部分是主页显示内容。网站Logo使用了一个背景图来代替，导航栏使用表格实现，内容列表使用无序列表实现。案例完成后，效果如图6-25所示。
图6-25 商业网站主页
step 02 构建基本HTML。为了划分不同的区域，HTML页面需要包含不同的div层，每一层代表一个内容。一个div包含背景图，一个div包含导航栏，一个div包含整体内容。内容又可以划分成两个不同的层。其代码如下所示。
<!DOCTYPE html> <html> <head> <title>公司主页</title> </head> <body> <center> <div> <div class=div1 align=center></div> <div class=div2> <table width=99%><tr align=center><td>首页</td><td>最新消息</td><td>产品展示 </td><td>销售网络</td><td>人才招聘</td><td>客户服务</td></tr></table> </div> <div class=div3> <div class=div4> <ul>最新消息 <li>公司举办2017科技辩论大赛</li> <li>企业安全知识大比武</li> <li>优秀员工评比活动规则</li> <li>人才招聘信息</li> </ul> </div> <div class=div5> <ul>成功案例 <li>上海装修建材公司</li> <li>美衣服饰有限公司</li> <li>天力科技有限公司</li> <li>美方豆制品有限公司</li> </ul> </div> </div> </div> </center> </body> </html>
在IE 11.0浏览器中浏览效果如图6-26所示，可以看到在网页中显示了导航栏和两个列表信息。
图6-26 基本HTML结构
step 03 添加CSS代码，设置背景Logo。
在IE 11.0浏览器中浏览效果如图6-27所示，可以看到在网页顶部显示了一个背景图，此背景覆盖整个div层，并不重复，而且背景图片居中显示。
图6-27 设置背景图
step 04 添加CSS代码，设置导航栏。
在IE 11.0浏览器中浏览效果如图6-28所示，可以看到在网页中导航栏背景为浅蓝色，表格中字体大小为12像素，字体类型是幼圆。
图6-28 设置导航栏
step 05 添加CSS代码，设置内容样式。
在IE 11.0浏览器中浏览效果如图6-29所示，可以看到在网页中内容显示在一个圆角边框中，两个不同的内容块中间使用虚线隔开。
图6-29 CSS修饰边框
step 06 添加CSS代码，设置列表样式。
在IE 11.0浏览器中浏览效果如图6-30所示，可以看到在网页中列表字体大小为15像素，字形为楷体。
图6-30 美化列表信息