效果图

废话不多说上代码

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

CSS源码

@charset "utf-8";

/* reset */

*{margin:0;padding:0;list-style-type:none;}

a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/

:focus{outline:0;}

label{cursor:pointer;}

img{vertical-align:middle;}

table{empty-cells:show;border-collapse:collapse;border-spacing:0;}

h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}

abbr,acronym{border:0;font-variant:normal}

address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}

input,button,textarea,select{*font-size:100%}

a,img{border:0;}

a,a:visited{color:#5e5e5e; text-decoration:none;}

a:hover{color:#4183C4;text-decoration:underline;}

.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-table;}/* Hides from IE-mac \*/

*html .clearfix{height:1%;}

.clearfix{display:block;}/* End hide from IE-mac */

*+html .clearfix{min-height:1%;}

body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}

/* shortcut */

.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}

*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}

*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}

.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}

.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}

.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}

.shortcut a:hover{background:#fff;}

.shortcut span.right{float:right;}

.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}

.headeline{height:40px;overflow:hidden;}

.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

/*-------------------------Simple reset--------------------------*/

*{margin:0;padding:0;}

/*-------------------------General Styles--------------------------*/

html{background:url('../img/bg_tile.jpg') #18222b;}

body{color:#fcfcfc;font:14px/1.3 'Segoe UI',Arial, sans-serif;min-height:930px;background:url('../img/bg_center.jpg') center 240px no-repeat;}

a, a:visited {text-decoration:none;outline:none;color:#54a6de;}

a:hover{text-decoration:underline;}

/*----------------------------Headers & Footers-----------------------------*/

header{background:url('../img/header.png') repeat-x;display:block;height:220px;padding:10px;}

header h1{background:url('../img/logo.png') no-repeat center center;height:80px;margin:75px auto;overflow:hidden;text-align:center;text-indent:-99999px;}/*----------------------------Green filter bar-----------------------------*/

#filter {background:url("../img/bar.png") repeat-x 0 -94px;display:block;height:39px;margin:55px auto;position:relative;width:600px;text-align:center;-moz-box-shadow:0 4px 4px #000;-webkit-box-shadow:0 4px 4px #000;box-shadow:0 4px 4px #000;}

#filter:before, #filter:after {background:url("../img/bar.png") no-repeat;height:43px;position:absolute;top:0;width:78px;content:'';-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);box-shadow:0 2px 0 rgba(0,0,0,0.4);}

#filter:before {background-position:0 -47px;left:-78px;}

#filter:after {background-position:0 0;right:-78px;}

#filter a{color:#FFFFFF;display:inline-block;height:39px;line-height:37px;padding:0 15px;text-shadow:1px 1px 1px #315218;}

#filter a:hover{text-decoration:none;}

#filter a.active{background:url("../img/bar.png") repeat-x 0 -138px;box-shadow:1px 0 0 rgba(255, 255, 255, 0.2),-1px 0 0 rgba(255, 255, 255, 0.2),1px 0 1px rgba(0,0,0,0.2) inset,-1px 0 1px rgba(0,0,0,0.2) inset;}

/*----------------------------Content area-----------------------------*/

#container{display:block;overflow:hidden;width:830px;margin:0 auto;}

#container li{float:left;height:96px;list-style:none outside none;margin:6px;position:relative;width:125px;-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}

#container ul{overflow:hidden;}

#container ul.hidden{display:none;}