发布时间 : 星期一 文章证券公司DIV+CSS布局案例 - 图文更新完毕开始阅读19761e6da98271fe910ef987
案例10：证券公司DIV+CSS布局案例
目 录
案例10：证券公司DIV+CSS布局案例................................................................................1 案例10：证券公司DIV+CSS布局案例................................................................................2
10.1效果图分析 ...........................................................................................................2 10.2效果图切片 ...........................................................................................................3 10.3制作站点首页头部.................................................................................................4
10.3.1 首页头部的信息和基础样式的制作..............................................................5 10.3.2 页面头部的分析..........................................................................................9
10.3.3 首页头部logo 和banner部分的制作 ...........................................................9 10.3.4导航列表的制作 ........................................................................................ 14 10.4制作站点首页主题部分........................................................................................ 19
10.4.1分析主题部分效果图 ................................................................................. 19 10.4.2 制作主题部分的父元素 ............................................................................. 20
10.4.3制作主体左侧部分 ..................................................................................... 21 10.4.4 制作主体右侧内容中关于我们的部分 ........................................................ 28 10.4.5制作今日新闻部分 ..................................................................................... 34 10.4.6制作点拨和时评的部分 .............................................................................. 37 10.4.7制作合作伙伴 ............................................................................................ 41 10.5 制作首页的底部 ................................................................................................. 42 10.6首页的兼容问题 .................................................................................................. 44 10.7二级页面的制作 .................................................................................................. 46
案例10：证券公司DIV+CSS布局案例
本案例重点：
? ? ? ?
效果图的分析 站点的首页制作 二级页面的制作 兼容问题的解决
10.1效果图分析
本例中通过一个实例讲解一个二级页面的制作方法，其他页面的制作可以参照类似的方法。其中站点首页的效果如图10-1所示。
图10-1网站首页效果图
一个二级页面的效果如图10-2所示。
图10-2站点二级页面的效果图
从图10-1和图10-2可以看出，首页和二级页面的头部、左侧和底部是相同的，右侧部分的宽度和样式是相同的，区别在于内容不同。
1. 首页效果图的分析
从图10-1可以看出，此时首页在纵向可以分为3个部分：头部（包括logo部分和导航）、内容部分和底部。其中中间部分可以分为两部分：左侧的公告热点信息等、右侧的关于我们、新闻列表和相关连接部分。 2. 二级页面的分析
二级页面和首页的结构基本相同，其中的区别在于右侧的内容此时为新闻列表。
10.2效果图切片
分析完网页后，就要进行效果图切片了。同样要注意文本的隐藏、切片的选择和保存格式等几个方面。下面进行详细讲解。
在制作切片时，首先要区分页面内容与修饰的部分，然后分析出那些修饰部分是可以用CSS代码实现的，那些部分是可以用背景图片来实现的，那些是需要知道详细宽的。在制作切图时，首先把影响背景的文本内容去掉，同时尽量减少图片文件的数量。制作好的效果图如10-3所示。
图10-3首页效果图的切片
从图10-3的切片看出，用做背景的图片包括头部背景、导航背景、主题背景、底部背景、分类图标，其他的图片内容图片。切好图后，将切片保存到磁盘相应的位置。因为实例中二级页面内容部分没有新的图片，所有可以不进行切图操作了。新建一个站点，然后将使用的图片放入images文件夹里。
10.3制作站点首页头部
做好站点工作准备后，就可以开始制作网页页面了。同前面章节的实例制作一样，首页头部也要分成几个部分进行制作。下面分别进行讲解。