淮安信息职业技术学院毕业设计论文
江苏淮安网络科技有限公司 苏ICP备4545121号| ICP许可证号：
苏454564123123 食品流通许可证 SP42019915100418HJ8|
Copyright © 2010 -2016 MAIMAI.com All Rights Reserved
Css样式：
#footer{width:1001px;height:180px;float:left;background-color:#f8f8fc;border-top:2px solid #CCCCCC;margin-top:5px;}
.bq{float:left;}
.bq img{float:left;margin-top:30px;margin-left:15px;}
.bqp{display:block;float:right;width:800px;height:40px;font-size:13px;color:#999;line-height:20px;padding-top:15px;margin-left:30px;padding-bottom:5px;}
.gs{float:right;width:700px;} .gs img{padding-bottom:15px;}
尾部的预览效果如下图3-10所示：
图3-10尾部预览效果
首页效果预览如图3-11所示:
10
第三章 静态页面布局
图3-11 首页预览效果
3.2列表静态页面
列表页（list_article.html）是后台显示子页面内容的必要页，头部和尾部和首页静态页面一样，需要改变的就是main主题内容部分。main部分分成左右两块。
左边部分布局代码:
11
淮安信息职业技术学院毕业设计论文
css样式如图3-12所示:
图3-12 左边部分样式
左边显示的效果如图3-13所示：
图3-13 左边预览效果
右边部分布局代码如图3-14所示:
12
第三章 静态页面布局
图3-14 右边部分布局代码
Css样式：
#list_right{width:737px; height:500px; float:right; padding-right:5px;} #list_right ul{ margin:0; padding:0; list-style:none;}
.list_right_top{width:737px;height:34px;background:url(../images/list_righttoup.jpg) no-repeat;}
.intro { text-indent:2em; margin-top:-5px;}
.list_right_top_text{ color:#000; line-height:36px; float:left; padding-left:20px;} .list_right_cen{width:760px; height:440px; border-left:2px #d1d1d1 solid; border-right:2px #d1d1d1 solid; margin-left:1px; _margin-left:1px;}
.list_right_du{width:737px; height:9px; background:url(../images/list_rightdu.jpg) no-repeat;}
#list_right{width:734px;height:auto;float:left;padding-left:10px;padding-bottom:10px; padding-top:10px;}
.list_rigtall{width:730px; height:35px; background:url(../images/productDt.jpg) no-repeat; margin:0 auto;}
.list_rightbi{line-height:43px; padding-left:40px; float:left; width:100px; height:35px; font-size:14px; font-weight:bold;}
.list_rigtjp{ float:right; padding-right:15px; line-height:35px;}
.list_right_center{width:760px; /*height:auto;*/ padding-top:12px; margin:0 auto; color:#343233; line-height:25px;}
这样整个列表页便完成了，最终效果如图3-15所示：
13
淮安信息职业技术学院毕业设计论文
图3-15 列表页预览效果
3.3内容静态页面
内容页和列表页一样，只是中间部分的右边内容改变了，内容页是展示的具体内容。
右边部分代码如下
右边效果显示如图3-16所示：
图3-16内容页右边效果
14