第三章 静态页面布局
第三章 静态页面制作
网站首页的展示直面影响着顾客对整个网站的好感度以及观赏欲。首先，分析一下买买网效果图，主页效果图可以划分出相应的布局区域，共划分为head首部、main中间部分、foot尾部。接着需要内容页以及列表页还有一个index_article页来进行后台代码处理。使用DIV+CSS布局方式构建网页。
3.1首页静态页面
首页主要分为3个部分，其中每个的布局都采用的不同的样式，最重要的就是中部main页面，运用的脚本语言方式比较多。 3.1.1头部部分
头部部分包括logo、导航、过渡三个部分，在导航部分中添加下拉框特效，代码如图3-1head布局：
图3-1 head布局
css样式：
#head{width:1024px;background-color:#FFFFFF;float:left;}
.logo{position:relative;height:65px;}
.logo img{position:absolute;top:9px;left:7px;} .clear{clear:both;}
.dh{float:left;height:35px;margin-top:3px;margin-bottom:3px;} .menu{width:1020px;float:left;height:35px;margin-top:3px;
margin-bottom:3px;background-color:f83b4d;}
.menu ul{float:left;line-height:37px;}
.menu ul li{float:left;line-height:37px;margin-left:45px;}
.menu ul li a{color:#FFF;text-decoration:none;padding-left:10px;} .mainmenu{float:left;width:110px;height:35px;list-style-type:none; margin-right:5px;margin-top:5px;} li.mainmenu ul {margin:0;width:90px;}
li.mainmenu{width:200px;display:block;text-decoration:none;
background:#f83b4d;color:#fff;padding:0.5em;border-bottom:1px solid #fff;} ul#dropdownmenu li a:hover{background:#FFCCCC;} li{list-style: none;}
5
淮安信息职业技术学院毕业设计论文
.mainmenu ul{position: relative;left:50px;} .fla{width:1022px;height:400px;float:left;}
预览如下图3-2 head部分预览效果显示：
图3-2 head部分预览效果
3.1.2主体内容部分
中间主体部分是整个页面的内容部分，一个网页的精髓展示便在这里，所以这个部分也是比较麻烦的。这个部分分为了top、center、bottom三个部分。
Top部分布局部分代码-如下所示：
Css样式代码如下图3-3所示：
图3-3 top部分css样式
预览效果如图3-4
6
第三章 静态页面布局
图3-4 top部分预览效果
center部分布局部分代码-如下所示：
针织衫\
这里center部分使用了JS代码来实现鼠标滑动到图片上方图片放大的效果，JS代码如图3-5所示：
图3-5 放大图片JS代码
7
淮安信息职业技术学院毕业设计论文
接着用CSS代码来对center部分定义：
.center{width:1024px;float:left;}
.center_top{float:left;width:1024px;height:30px;margin-top:20px;} .center_top img{float:left;margin-left:12px;}
.jrxp{float:left;width:70px;height:30px;line-height:30px;margin-left:8px;font-family:\黑体\
.jrxpbz{float:left;width:100px;height:30px;line-height:30px;color:#CCCCCC;font-size:12px;margin-left:5px;}
.center_content{float:left;margin-left:13px;border-bottom: 3px solid #CCCCCC;border-right:1px solid #CCCCCC;margin-top:8px;} #tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;} .center_content
a{color:#333;font-family:\
宋
体
\
.center_content img{float:left;margin-left:10px;margin-top:8px;margin-bottom:5px;} .center_content_text{display:block;margin-left:13px;width:226px;height:20px;font-size:14px;line-height:20px;}
.jg{float:left;color:#FF0000;font-size:16px;font-weight:bold;display:block;width:100px;height:25px;line-height:25px;margin-left:20px;margin-top:20px;}
最终实现效果如图3-6 所示
图3-6 中间部分预览效果
bottom部分是由一组滚动图组成，使用JS实现鼠标滑动到图片上，滚动停止，鼠标一开，继续滚动的效果。
主要运用的是表单和表格的知识，布局部分代码-如下图3-7所示：
图3-7 bottom布局代码
JS代码如图3-8所示：
8
第三章 静态页面布局
图3-8 bottom部分JS 代码
Css代码如下所示：
.bottom{float:left;width:990px;margin-top:30px;margin-left:8px;overflow:hidden;}
.bottom_bj{float:left;margin-top:20px;} .bottom_top_aleft{float:left;}
.bottom_top{width:990px;height:30px;} .bottom_top img{float:left;margin-left:8px;}
.bottom_top_txt{font-size:14px;font-weight:bold;line-height:25px;float:left;margin-left:8px;margin-top:2px;}
.bottom_more{float:right;line-height:30px;color:#999999;font-family:\宋体\.bottom_more
a{color:#999999;font-family:\
宋
体
\
预览效果如图3-9所示：
图3-9bottom部分预览效果
3.1.3尾部部分
尾部foot部分一般都是版权信息，联系方式等内容的模块，相对上面的main部分比较简单一点，这里买买网所要实现的foot部分内容包括二维码，版权信息，许可证，以及几个公众号的内容。 Foot部分(尾部部分)
9