一.实现截图

网页内所有连接均链到404.html如下图：

二.源文件一览

其中images文件夹存储本次作业所用到的图片jquery-1.7.2.min.js为网上下载的query javascript库的精简版，本次用于修改页面的外观，为页面添加动态效果jsstyle.js则是效果的具体实现。其中动态效果如下：

三.节选代码

主网页代码：

1

2

3

4

5

6

7

8

9

10

11

12

138

139

216

217

218

219

220

400

401

402

403

670

671

672

673

760

761

762

819

820

821

822

848

849

850

851

852

Main Code

global.css

1 @charset "utf-8";

2 /* Document css */

3 /** 清除内外边距**/

4 body, h1, h2, h3, h4, h5, h6, hr, p, div, span, i, object, iframe, /* 结构元素 */

5 dl, dt, dd, ul, ol, li, /* 列表元素 */

6 form, fieldset, legend, button, input, textarea, option, select, /* 表单元素 */

7 pre, /* 文本格式元素 */

8 table, tr, td, /* 表格元素 */

9 img {

10 margin: 0;

11 padding: 0;

12 }

13 /** 重置图片元素 **/

14 img {

15 border: 0 none;

16 vertical-align: top;

17 }

18 /** 重置列表元素 **/

19 ul, ol, li, dl, dt, dd {

20 list-style-type: none;

21 }

22 /** 设置默认字体 **/

23 body {

24 font-size: 14px;

25 color: #333333;

26 font-family: "宋体", sans-serif;

27 background: #fff;

28 }

29

30 input, select, button, textarea {

31 font-size: 12px;

32 font-family: Tahoma, Geneva, sans-serif;

33 }

34

35 i, em, cite {

36 font-style: normal;

37 }

38

39 h1, h2, h3, h4, h5, h6 {

40 font-size: 100%;

41 }

42 /**重置表单元素**/

43 input[type=submit] {

44 cursor: pointer;

45 }

46

47 input[type=button] {

48 cursor: pointer;

49 }

50

51 button, input {

52 overflow: visible;

53 }

54 /** 重置表格元素 **/

55 table {

56 border-collapse: collapse;

57 border-spacing: 0;

58 }

59 /** 默认链接元素 **/

60 a {

61 text-decoration: none;

62 }

63

64 a:link, a:visited {

65 color: inherit;

66 }

67

68 a:hover, a:active {

69 color: inherit;

70 text-decoration: none;

71 }

72

73 a:focus {

74 -moz-outline-style: none;

75 }

76

77 a:focus {

78 outline: none;

79 }

80

81 a.cOrange:link, a.cOrange:visited {

82 color: inherit;

83 }

84

85 a.cOrange:hover, a.cOrange:active {

86 color: inherit;

87 }

88

89 .pMore:hover {

90 color: #f00;

91 }

92 /** 浮动元素 **/

93 .fl {

94 display: inline;

95 float: left;

96 }

97

98 .fr {

99 display: inline;

100 float: right;

101 }

102 /*清除浮动*/

103 .clearfix:after {

104 content: ".";

105 display: block;

106 height: 0;

107 clear: both;

108 visibility: hidden;

109 }

110

111 .clearfix {

112 display: inline-block;

113 }

114

115 .clearfix {

116 display: block;

117 }

118

119 .clear {

120 clear: both;

121 height: 0;

122 line-height: 0;

123 font-size: 0;

124 overflow: hidden;

125 }

126

127 .cl5 {

128 clear: both;

129 height: 5px;

130 line-height: 0;

131 font-size: 0;

132 overflow: hidden;

133 }

134

135 .cl10 {

136 clear: both;

137 height: 10px;

138 line-height: 0;

139 font-size: 0;

140 overflow: hidden;

141 }

142

143 .mt10 {

144 margin-top: 10px;

145 }

146

147 .mt15 {

148 margin-top: 15px;

149 }

150

151 .ml9 {

152 margin-left: 9px;

153 }

154

155 .container {

156 width: 980px;

157 margin: 0 auto;

158 }

159

160 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10 {

161 float: left;

162 }

163

164 .span1 {

165 width: 10%;

166 }

167

168 .span2 {

169 width: 20%;

170 }

171

172 .span3 {

173 width: 30%;

174 }

175

176 .span4 {

177 width: 40%;

178 }

179

180 .span5 {

181 width: 50%;

182 }

183

184 .span1 {

185 width: 10%;

186 }

187

188 .span6 {

189 width: 60%;

190 }

191

192 .span7 {

193 width: 70%;

194 }

195

196 .span8 {

197 width: 80%;

198 }

199

200 .span9 {

201 width: 90%;

202 }

203

204 .span10 {

205 width: 100%;

206 }

global.css

jsstyle.js

@charset "utf-8";

/* Document css */

/** 清除内外边距**/

body, h1, h2, h3, h4, h5, h6, hr, p, div, span, i, object, iframe, /* 结构元素 */

dl, dt, dd, ul, ol, li, /* 列表元素 */

form, fieldset, legend, button, input, textarea, option, select, /* 表单元素 */

pre, /* 文本格式元素 */

table, tr, td, /* 表格元素 */

img {

margin: 0;

padding: 0;

}

/** 重置图片元素 **/

img {

border: 0 none;

vertical-align: top;

}

/** 重置列表元素 **/

ul, ol, li, dl, dt, dd {

list-style-type: none;

}

/** 设置默认字体 **/

body {

font-size: 14px;

color: #333333;

font-family: "宋体", sans-serif;

background: #fff;

}

input, select, button, textarea {

font-size: 12px;

font-family: Tahoma, Geneva, sans-serif;

}

i, em, cite {

font-style: normal;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

}

/**重置表单元素**/

input[type=submit] {

cursor: pointer;

}

input[type=button] {

cursor: pointer;

}

button, input {

overflow: visible;

}

/** 重置表格元素 **/

table {

border-collapse: collapse;

border-spacing: 0;

}

/** 默认链接元素 **/

a {

text-decoration: none;

}

a:link, a:visited {

color: inherit;

}

a:hover, a:active {

color: inherit;

text-decoration: none;

}

a:focus {

-moz-outline-style: none;

}

a:focus {

outline: none;

}

a.cOrange:link, a.cOrange:visited {

color: inherit;

}

a.cOrange:hover, a.cOrange:active {

color: inherit;

}

.pMore:hover {

color: #f00;

}

/** 浮动元素 **/

.fl {

display: inline;

float: left;

}

.fr {

display: inline;

float: right;

}

/*清除浮动*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

display: inline-block;

}

.clearfix {

display: block;

}

.clear {

clear: both;

height: 0;

line-height: 0;

font-size: 0;

overflow: hidden;

}

.cl5 {

clear: both;

height: 5px;

line-height: 0;

font-size: 0;

overflow: hidden;

}

.cl10 {

clear: both;

height: 10px;

line-height: 0;

font-size: 0;

overflow: hidden;

}

.mt10 {

margin-top: 10px;

}

.mt15 {

margin-top: 15px;

}

.ml9 {

margin-left: 9px;

}

.container {

width: 980px;

margin: 0 auto;

}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10 {

float: left;

}

.span1 {

width: 10%;

}

.span2 {

width: 20%;

}

.span3 {

width: 30%;

}

.span4 {

width: 40%;

}

.span5 {

width: 50%;

}

.span1 {

width: 10%;

}

.span6 {

width: 60%;

}

.span7 {

width: 70%;

}

.span8 {

width: 80%;

}

.span9 {

width: 90%;

}

.span10 {

width: 100%;

}

jsstyle.js

404.html

404.html

style.css

style.css

@charset "utf-8";

*{

margin: 0px;

padding: 0px;

text-decoration:none;

list-style: none;

font-size: 12px;

font-family: Arial;

}

/*顶部区域*/

#top{

width: 100%;

height: 30px;

background: #F7F7F7;

border-bottom: 1px solid #EEEEEE;

position: relative;

z-index: 100;

}

#top #top_main{

width: 1210px;

height: 30px;

margin: 0 auto;

}

#top #top_main .topu{

float: left;

}

#top #top_main .topu li{

width: 82px;

height: 30px;

display: block;

float: left;

list-style: none;

font-size: 12px;

color: #666666;

line-height: 30px;

}

#top #top_main .topu li .xing{

width: 13px;

height: 13px;

background: url(../images/xing.png) no-repeat;

position: absolute;

top:8px;

}

#top #top_main .topu li .didian{

width: 20px;

height: 20px;

background: url(../images/didian.png) no-repeat;

position: absolute;

top:4px;

}

#top #top_main .topu li a{

color: #666666;

padding-left: 16px;

text-decoration: none;

}

#top #top_main .topu li a:hover{

color: #E4393C;

text-decoration: underline;

}

#top #top_main .topu .erweitu{

width: 116px;

height: 120px;

background: url(../images/erwei.png) no-repeat 0px -40px;

border: 1px solid #ccc;

position: absolute;

top: 30px;

left: 150px;

display: none;

z-index:22;

}

#top #top_main .topu .aa{

display: block;

}

/*鼠标移入显示二维码*/

#top #top_main .topu .xuan .aa:hover .erweitu{

display: block;

}

/*top中间区域开始*/

#top #top_main #hello{

width: 230px;

height:30px;

margin-left: 180px;

float: left;

}

#top #top_main #hello span{

line-height: 30px;

font-size: 12px;

color: #666666;

}

#top #top_main #hello span a{

color: #666666;

text-decoration: none;

}

#top #top_main #hello span a:hover{

color: #E4393C;

text-decoration:underline;

}

/*top中间区域结束*/

/*top右边区域开始*/

#top #top_main .topright{

height: 30px;

float: left;

position: relative;

}

#top #top_main .topright ul li{

float: left;

padding-right: 10px;

height: 30px;

}

#top #top_main .topright ul li > a{

display: block;

font-size: 12px;

float: left;

padding-left: 8px;

line-height: 20px;

color: #666;

margin-top: 5px;

}

#top #top_main .topright ul li .cun{

margin-top: 8px;

float: left;

border-left: 1px solid #ccc;

height: 14px;

}

#top #top_main .topright ul li .cun a{

font-size: 12px;

line-height: 14px;

color: #666;

float: left;

margin-left: 5px;

}

#top #top_main .topright ul li .cun a:hover{

color: #E4393C;

text-decoration: underline;

}

#top #top_main .topright ul li .vip{

width: 24px;

height: 11px;

float: left;

background: url(../images/vip.png) no-repeat 0px 0px;

position: relative;

top: 1px;

margin-left: 5px;

}

#top #top_main .topright ul li .bjd{

width: 21px;

height: 11px;

float: left;

background: url(../images/bjd.jpg) no-repeat 0px 0px;

position: relative;

top: 1px;

margin-left: 5px;

}

#top #top_main .topright ul li .downjian{

width: 10px;

height: 8px;

background: url(../images/all.png) no-repeat -94px -53px;

position: relative;

top: -18px;

left: 78px;

}

#top #top_main .topright ul li .cun a.dong{

height: 11px;

margin-left: 25px;

padding-right: 10px;

}

#top #top_main .topright ul li.hidetu{

width: 84px;

}

#top #top_main .topright ul li .erwei{

width: 250px;

height: 294px;

border: 1px solid #ccc;

background: white;

float: left;

position: relative;

top: 8px;

z-index: 33;

display: none;

}

#top #top_main .topright ul li.kefu{

width: 83px;

height: 30px;

}

#top #top_main .topright ul li .a1{

width: 83px;

height: 20px;

overflow: hidden;

position: relative;

z-index: 999;

}

#top #top_main .topright ul li.kefu:hover .a1{

overflow: visible;

}

#top #top_main .topright ul li.kefu:hover .kefuhide{

border: 1px solid #ccc;

background: white;

}

#top #top_main .topright ul li.wangzhan{

width: 73px;

height: 30px;

}

#top #top_main .topright ul li.wangzhan span{

color: #666;

padding-left: 10px;

}

#top #top_main .topright ul li.wangzhan a{

font-weight: 400;

color: #666;

padding-left: 6px;

line-height: 1.7em;

}

#top #top_main .topright ul li.wangzhan a:hover{

color: #E4393C;

text-decoration: underline;

}

/*搜索区域开始*/

#serach{

width: 1210px;

height: 90px;

margin: 0 auto;

position: relative;

z-index: 98;

}

#serach .logo{

width: 270px;

height: 60px;

float: left;

margin-top: 15px;

position: relative;

}

#serach .logo .dongtu{

width: 100px;

height: 70px;

background: url(../images/aa.gif) no-repeat;

position: absolute;

top: -5px;

left: 170px;

}

#serach .sou{

float: left;

width: 510px;

height: 57px;

margin-top: 15px;

margin-left: 20px;

}

#serach .sou .sousuo{

width: 494px;

height: 30px;

float: left;

margin-top: 4px;

border: 3px solid #E4393C;

}

#serach .sou .kuang{

width: 406px;

height: 22px;

float: left;

padding: 4px 4px;

line-height: 20px;

border: none;

}

#serach .sou .souzi{

width: 78px;

height: 30px;

float: right;

background: #E4393C;

}

#serach .sou .souzi a{

display: block;

font-size: 16px;

font-weight: 700;

color: white;

text-align: center;

line-height: 30px;

}

#serach .sou .reci{

width: 510px;

height: 18px;

float: left;

margin-top: 5px;

}

#serach .sou .reci{

color: #999;

}

#serach .sou .reci a{

color: #999;

padding-right: 5px;

}

#serach .sou .reci a:hover{

color: #E4393C;

text-decoration: underline;

}

#serach .myjd{

width: 108px;

height: 32px;

float: left;

background: #F7F7F7;

border: 1px solid #ccc;

margin-top: 25px;

margin-left: 10px;

position: relative;

}

#serach .myjd .mytu{

width: 19px;

height: 17px;

float: left;

background: url(../images/all.png) no-repeat -123px -31px;

margin-top: 7px;

margin-left: 10px;

}

#serach .myjd a{

display: block;

color: #666;

float: left;

margin-top: 7px;

margin-left: 5px;

}

#serach .myjd a:hover{

color: #E4393C;

text-decoration: underline;

}

#serach .myjd .jiantou{

width: 10px;

height: 8px;

background: url(../images/all.png) no-repeat -94px -53px;

position: absolute;

top: 10px;

left: 90px;

}

#serach .myjd .myjdhide{

width: 310px;

height: 235px;

border: 1px solid #ccc;

position: absolute;

top: 32px;

left: -203px;

background: white;

display: none;

z-index: 22;

}

#serach .myjd:hover .myjdhide{

display: block;

}

#serach .myjd .myjdhide .hey ul li {

width: 124px;

height: 20px;

margin-top: 7px;

margin-left: 10px;

}

#serach .myjd .myjdhide .hey ul li a{

width: 124px;

height: 20px;

margin-top: 1px;

line-height: 20px;

color: #005EA7;

}

#serach .myjd .myjdhide .hey ul li a:hover{

color: #E4393C;

text-decoration: none;

background: #F3F3F3;

}

#serach .myjd .myjdhide .hey .heyright{

width: 150px;

height: 130px;

float: left;

}

#serach .myjd .myjdhide .hidebot{

width: 310px;

height: 52px;

margin-top: 3px;

background: #F3F3F3;

float: left;

}

#serach .myjd .myjdhide .hidebot .bottop{

width: 305px;

height: 18px;

margin-left: 5px;

margin-top: 5px;

float: left;

}

#serach .myjd .myjdhide .hidebot .bottop span{

float: left;

color: #666;

}

#serach .myjd .myjdhide .hidebot .bottop a{

display: block;

margin-top: 0px;

margin-left: 120px;

color: #005EA7;

}

#serach .myjd .myjdhide .hidebot .botdown {

width: 305px;

height: 18px;

float: left;

}

#serach .myjd .myjdhide .hidebot .botdown span{

margin-left: 120px;

color: #666;

}

#serach .gouwuche{

width: 124px;

height: 32px;

border: 1px solid orange;

float: left;

background: #F7F7F7;

border: 1px solid #ccc;

margin-top: 25px;

margin-left: 10px;

position: relative;

}

#serach .gouwuche .chetu{

width: 22px;

height: 20px;

background: url(../images/all.png) no-repeat -120px -88px;

position: absolute;

top: 5px;

left: 5px;

}

#serach .gouwuche a{

display: block;

padding-left: 30px;

padding-top: 7px;

color: #666;

}

#serach .gouwuche a:hover{

color: #E4393C;

text-decoration: underline;

}

#serach .gouwuche .jianleft{

width: 10px;

height: 10px;

background: url(../images/all.png) no-repeat -110px -45px;

position: absolute;

top: 10px;

right: 5px;

}

#serach .gouwuche .num{

width: 17px;

height: 20px;

position: absolute;

top: -10px;

left: 20px;

background: url(../images/all.png) no-repeat -134px -280px;

}

#serach .gouwuche .num .numright{

width: 10px;

height: 20px;

float: right;

background: url(../images/all.png) no-repeat -132px -251px;

}

#serach .gouwuche .num .numzi{

width: 10px;

height: 10px;

position: absolute;

top: 0px;

}

#serach .gouwuche .num span{

display: block;

margin-left: 3px;

margin-top: -2px;

font-size: 14px;

color: #FFF;

}

#serach .gouwuche .hideche{

width: 348px;

height: 69px;

background: white;

border: 1px solid #ccc;

position: absolute;

top: 32px;

left: -225px;

display: none;

z-index: 22;

}

#serach .gouwuche:hover .hideche{

display: block;

}

#serach .gouwuche .hideche .kongche{

width: 56px;

height: 49px;

margin-left: 40px;

margin-top: 7px;

float: left;

background: url(../images/all.png) no-repeat 0px 0px;

}

#serach .gouwuche .hideche span{

display: block;

margin-top: 30px;

color: #999;

}

#serach .jubao{

width: 134px;

height: 46px;

float: left;

margin-left: 5px;

margin-top: 15px;

background: url(../images/a1.png) no-repeat;

}

/*导航条区域开始*/

#daohang{

width: 1210px;

height: 40px;

margin: 0 auto;

background: #E43D3F;

position: relative;

z-index: 97;

}

#daohang .dhleft{

width: 210px;

height: 40px;

float: left;

}

#daohang .dhleft .erjimenu{

width: 206px;

height: 401px;

border: 2px solid #E4393C;

position: relative;

}

#daohang .dhleft .erjimenu ul{

margin-top: 9px;

margin-left: 1px;

}

#daohang .dhleft .erjimenu ul li{

width: 205px;

height: 26px;

float: right;

border: 1px solid white;

border-left: none;

}

#daohang .dhleft .erjimenu ul li .mulu{

margin-left: 15px;

position: relative;

}

#daohang .dhleft .erjimenu ul li .mulu .jian{

width: 10px;

height: 10px;

background: url(../images/all.png) no-repeat -110px -45px;

position: absolute;

top: 7px;

right: 3px;

}

#daohang .dhleft .erjimenu ul li .mulu .bai{

width: 4px;

height: 27px;

background: white;

position: absolute;

z-index: 24;

top: 0px;

right: 1px;

display: none;

}

#daohang .dhleft .erjimenu ul li .hidemenu{

width: 705px;

height: 439px;

background: white;

border: 1px solid #ccc;

z-index: 23;

position: absolute;

top: 0px;

left: 200px;

display: none;

}

#daohang .dhleft .erjimenu ul li .hideleft{

width: 489px;

height: 439px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hidetop{

width: 665px;

height: 38px;

border-bottom: 1px solid #ccc;

float: left;

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul{

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li{

width: 86px;

height: 28px;

float: left;

margin-right: 20px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li a{

color: #666;

float: left;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .chong{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .caipiao{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat 0 -49px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .peixun{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat 0 -100px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .jipiao{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat 0 -146px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .qianzheng{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat 0 -194px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li .youxi{

width: 30px;

height: 30px;

float: left;

background: url(../images/zz.png) no-repeat 0 -243px;

}

#daohang .dhleft .erjimenu ul li .hidetop ul li a:hover{

color:#E4393C;

font-size: 14px;

text-decoration: underline;

font-weight: normal;

}

#daohang .dhleft .erjimenu ul li .hideleft .dl1{

width: 477px;

height: 25px;

margin-left: 10px;

border-bottom: 1px solid #eee;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dl1{

width: 334px;

height: 25px;

margin-left: 10px;

border-bottom: 1px solid #eee;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft .dllast{

width: 477px;

height: 25px;

margin-left: 10px;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft .dllast1{

width: 477px;

height: 47px;

margin-left: 10px;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1{

width: 334px;

height: 47px;

margin-left: 10px;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1 dt{

}

#daohang .dhleft .erjimenu ul li .hideleft .dllast1 dt{

width: 52px;

height: 47px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1 dt{

width: 52px;

height: 47px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dllast{

width: 334px;

height: 25px;

margin-left: 10px;

padding: 6px 0px;

}

#daohang .dhleft .erjimenu ul li .hideleft1 .dllast dt{

width: 52px;

height: 25px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hideleft1 dt a{

color: #E4393C;

font-size: 12px;

font-weight: 700;

}

#daohang .dhleft .erjimenu ul li .hideleft dt{

float: left;

margin-right: 10px;

}

#daohang .dhleft .erjimenu ul li .hideleft1 dt{

float: left;

margin-right: 10px;

}

#daohang .dhleft .erjimenu ul li .hideleft dt a{

color: #E4393C;

font-size: 12px;

font-weight: 700;

}

#daohang .dhleft .erjimenu ul li .hideleft dd{

float: left;

white-space: nowrap;

}

#daohang .dhleft .erjimenu ul li .hideleft dd a{

font-size: 12px;

font-weight: 400;

padding: 0px 8px;

color: #666;

border-left: 1px solid #ccc;

}

#daohang .dhleft .erjimenu ul li .hideleft1 dd{

float: left;

white-space: nowrap;

}

#daohang .dhleft .erjimenu ul li .hideleft1 dd a{

font-size: 12px;

font-weight: 400;

padding: 0px 8px;

color: #666;

border-left: 1px solid #ccc;

}

#daohang .dhleft .erjimenu ul li .hideleft dd a:hover{

color: #E4393C;

text-decoration: underline;

}

#daohang .dhleft .erjimenu ul li .hideleft1 dd a:hover{

color: #E4393C;

text-decoration: underline;

}

#daohang .dhleft .erjimenu ul li .hideright{

width: 210px;

height: 439px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hideright .phoneplan{

width: 194px;

height: 30px;

background: url(../images/b6.png) no-repeat 0px -60px;

margin: 10px 8px;

}

#daohang .dhleft .erjimenu ul li .hideright .game{

width: 194px;

height: 30px;

background: url(../images/b66.png) no-repeat;

margin: 10px 8px;

}

#daohang .dhleft .erjimenu ul li .hideright .jiazhuang{

width: 194px;

height: 30px;

background: url(../images/b6.png) no-repeat 0px -90px;

margin: 10px 8px;

}

#daohang .dhleft .erjimenu ul li .hideright dt{

color: #E4393C;

font-size: 12px;

font-weight: 700;

margin-top: 20px;

margin-left: 10px;

margin-bottom: 5px;

}

#daohang .dhleft .erjimenu ul li .hideright dd a{

font-size: 12px;

font-weight: 400;

padding-left: 10px;

line-height: 20px;

color: #666;

}

#daohang .dhleft .erjimenu ul li .hideright dd a:hover{

text-decoration: underline;

}

#daohang .dhleft .erjimenu ul li .hideright ul li{

width: 102px;

height: 20px;

float: left;

}

#daohang .dhleft .erjimenu ul li .hideright ul li a{

font-size: 12px;

font-weight: 400;

padding-left: 10px;

line-height: 20px;

color: #666;

}

#daohang .dhleft .erjimenu ul li .hideright ul li a:hover{

text-decoration: underline;

}

#daohang .dhleft .erjimenu ul li .hideright .tu1{

margin-top: 8px;

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li .hideright .tu2{

margin-top: 120px;

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li .hideright .tu3{

margin-top: 180px;

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li .hideright .tu4{

margin-top: 230px;

margin-left: 10px;

}

#daohang .dhleft .erjimenu ul li.li1:hover .hidemenu,

#daohang .dhleft .erjimenu ul li:hover .bai{

display: block;

}

#daohang .dhleft .erjimenu > ul > li:hover .jian{

display: none;

}

#daohang .dhleft .erjimenu > ul > li:hover{

border-top: 1px solid #bbb;

border-bottom: 1px solid #bbb;

}

#daohang .dhleft .erjimenu ul li a{

font-size: 14px;

line-height: 26px;

color: #333;

font-weight: 400;

}

#daohang .dhleft .erjimenu ul li a:hover{

color: #E4393C;

font-weight: 700;

}

#daohang .dhleft > a{

width: 190px;

height: 40px;

display: block;

color: white;

font-weight: 700;

font-size: 14px;

padding-left: 20px;

line-height: 40px;

}

#daohang .dhleft a:hover{

text-decoration: underline;

}

#daohang .dhright{

width: 1000px;

height: 40px;

float: left;

}

#daohang .dhright ul{

float: left;

}

#daohang .dhright ul li{

float: left;

width: 85px;

height: 40px;

}

#daohang .dhright ul li a{

display: block;

width: 85px;

height: 40px;

font-size: 14px;

font-weight: 700;

line-height: 40px;

text-align: center;

color: white;

}

#daohang .dhright ul li a:hover{

background: #A40000;

}

#daohang .dhright .dhtu{

float: right;

width: 141px;

height: 40px;

position: relative;

}

#daohang .dhright .dhtu ul li{

position: absolute;

display: none;

}

#daohang .dhright .dhtu ul li.on{

display: block;

}

#daohang .dhright .dhtu .zeng{

width: 100px;

height: 40px;

position: absolute;

top: 0px;

left: 40px;

}

#daohang .dhright .dhtu .zeng span{

color: yellow;

font-size: 18px;

font-weight: 700;

line-height: 40px;

font-style: oblique;

}

/*导航条区域结束*/

/*轮播区域开始*/

#main{

width: 1210px;

height: 410px;

margin: 0 auto;

position: relative;

z-index: 96;

margin-top: 5px;

}

#main .mainleft{

width: 670px;

height: 400px;

margin-left: 220px;

float: left;

}

#main .mainright{

width: 310px;

height: 400px;

float: right;

margin-left: 7px;

}

#main .mainleft .lunbo{

width: 670px;

height: 240px;

float: left;

position: relative;

}

#main .mainleft .lunbo .pic li{

position: absolute;

top: 0px;

left: 0px;

display: none;

}

#main .mainleft .lunbo .nav {

position:absolute;

bottom: 10px;

right: 5px;

z-index:12;

}

#main .mainleft .lunbo .nav li {

list-style: none;

float: left;

width: 22px;

height: 22px;

background: #999999;

line-height: 22px;

font-size: 14px;

color: white;

text-align: center;

margin-right: 10px;

border-radius: 10px;

cursor:pointer;

position: relative;

}

#main .mainleft .lunbo .nav li.on{

background:#E4393C;

}

#main .mainleft .liulan{

width: 670px;

height: 159px;

float: left;

border-bottom: 1px solid #eee;

}

#main .mainleft .liulan .liuleft{

width: 30px;

height: 159px;

float: left;

border-left: 1px solid #eee;

cursor: pointer;

}

#main .mainleft .liulan .liucenter{

width: 608px;

height: 159px;

float: left;

overflow: hidden;

position: relative;

}

#main .mainleft .liulan .liucenter ul{

width: 9999px;

position: relative;

left: 0px;

}

#main .mainleft .liulan .liucenter ul li{

width: 202px;

height: 159px;

float: left;

border-right: 1px solid #EEE;

}

#main .mainleft .liulan .liuright{

width: 30px;

height: 159px;

float: left;

cursor: pointer;

border-right: 1px solid #EEE;

}

#main .mainleft .liulan .liuright .righttu{

width: 25px;

height: 32px;

background: url(../images/16.png) no-repeat -50px -51px;

margin-top: 65px;

}

#main .mainright .baotu{

width: 310px;

height: 70px;

}

#main .mainright .kuaibao{

width: 310px;

height: 30px;

margin-top: 7px;

border-bottom: 2px solid #aaa;

}

#main .mainright .kuaibao span{

display: block;

float: left;

line-height: 30px;

font-size: 14px;

font-weight: 700;

color: #555;

}

#main .mainright .kuaibao a{

color: #005EA7;

display: block;

float: right;

line-height: 30px;

}

#main .mainright .kuaibao a:hover{

text-decoration: underline;

}

#main .mainright .baomain{

width: 310px;

height: 108px;

float: left;

border: 1px solid #ccc;

border-right: none;

}

#main .mainright .baomain ul li{

width: 153px;

height: 27px;

border-right: 1px solid #ccc;

float: left;

}

#main .mainright .baomain ul li a{

line-height: 25px;

padding-left: 7px;

color:#666;

}

#main .mainright .baomain ul li a:hover{

color: #E4393C;

text-decoration: underline;

}

#main .mainright .tubiao{

width: 308px;

height: 168px;

margin-top: 10px;

border: 1px solid #ccc;

overflow: hidden;

float: left;

position: relative;

}

#main .mainright .tubiao > ul{

float: left;

position: absolute;

top: 0px;

}

#main .mainright .tubiao > ul > li{

width: 76px;

height: 83px;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

float: left;

cursor: pointer;

}

#main .mainright .tubiao > ul > li a{

display: block;

margin-top: 10px;

color: #666;

text-align: center;

}

#main .mainright .tubiao > ul > li:hover a{

color: #E4393C;

text-decoration: underline;

}

#main .mainright .tubiao > ul > li .tubiao_1{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat ;

}

#main .mainright .tubiao > ul > li .tubiao_2{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat 0px -50px;

}

#main .mainright .tubiao > ul > li .tubiao_3{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -126px 0px;

}

#main .mainright .tubiao > ul > li .tubiao_4{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -189px 0px;

}

#main .mainright .tubiao > ul > li .tubiao_5{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -63px 0px;

}

#main .mainright .tubiao ul li .tubiao_6{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -63px -51px;

}

#main .mainright .tubiao ul li .tubiao_7{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -126px -51px;

}

#main .mainright .tubiao ul li .tubiao_8{

width: 41px;

height: 30px;

margin-left: 18px;

margin-top: 10px;

background: url(../images/dd.png) no-repeat -189px -51px;

}

#main .mainright .tubiao ul li .tubiao_9{

width: 10px;

height: 8px;

background: url(../images/all.png) no-repeat -94px -53px;

margin-left: 33px;

margin-top: 5px;

}

#main .mainright .tubiao .tubiaola{

width: 308px;

height: 168px;

float: left;

position: absolute;

top: 168px;

left: 0px;

}

#main .mainright .tubiao .tubiaola .c_main{

width: 308px;

height: 135px;

float: left;

position: relative;

}

#main .mainright .tubiao .tubiaola .c_main .box{

width: 308px;

height: 135px;

position: absolute;

display: none;

}

#main .mainright .tubiao .tubiaola .c_main .box .chong{

width: 300px;

height: 22px;

}

#main .mainright .tubiao .tubiaola .c_main .box .cb{

vertical-align:middle;

width: 70px;

height: 21px;

background: #e4393c;

border-radius: 3px;

margin-left: 50px;

margin-top: 7px;

border: none;

color: white;

padding-bottom:2px;

}

#main .mainright .tubiao .tubiaola .close{

width: 20px;

height: 24px;

color: #ccc;

position: absolute;

top: 0px;

right: 0px;

font-size: 22px;

cursor: pointer;

}

#main .mainright .tubiao .tubiaola .c_main .box > ul > li{

float: left;

margin-left: 10px;

margin-right: 20px;

}

#main .mainright .tubiao .tubiaola .c_main .box > ul > li a{

line-height: 28px;

*line-height: 18px;

text-decoration: none;

color: #005EA7;

}

#main .mainright .tubiao .tubiaola .c_main .box > ul > li a:hover{

color: #E4393C;

}

#main .mainright .tubiao .tubiaola .c_main .box .yeyoutu{

width: 2295px;

height: 80px;

float: left;

margin-top: 20px;

}

#main .mainright .tubiao .tubiaola .c_main .box .yeyoutu img{

margin: 0px 6px;

cursor: pointer;

}

/*轮播区域结束*/

/**/

#lifewindow{

width: 1210px;

height: 514px;

margin: 0 auto;

position: relative;

z-index: 90;

}

#lifewindow .lifetu{

width: 1210px;

height: 24px;

float: left;

background: url(../images/e1.png) no-repeat;

}

#lifewindow .lifemain{

width: 1210px;

height: 400px;

float: left;

}

#lifewindow .lifemain .tuarea1{

width: 295px;

height: 190px;

margin-top: 10px;

position: relative;

overflow: hidden;

float: left;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea2{

width: 295px;

height: 190px;

position: relative;

overflow: hidden;

float: left;

margin-top: 10px;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea3{

width: 295px;

height: 190px;

position: relative;

overflow: hidden;

float: left;

margin-top: 10px;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea4{

width: 295px;

height: 190px;

position: relative;

overflow: hidden;

float: left;

margin-top: 10px;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea5{

width: 295px;

height: 190px;

position: relative;

margin-top: 10px;

overflow: hidden;

float: left;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea6{

width: 295px;

height: 190px;

position: relative;

margin-top: 10px;

overflow: hidden;

float: left;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea7{

width: 295px;

height: 190px;

position: relative;

margin-top: 10px;

overflow: hidden;

float: left;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea8{

width: 295px;

height: 190px;

margin-top: 10px;

position: relative;

overflow: hidden;

float: left;

margin-right: 7px;

}

#lifewindow .lifemain .tuarea9{

width: 396px;

height: 70px;

margin-top: 10px;

position: relative;

float: left;

cursor: pointer;

margin-right: 5px;

}

#lifewindow .lifemain .zhe{

width: 120px;

height: 190px;

float: left;

background: #ccc;

position: absolute;

z-index: 2;

filter:alpha(opacity=70);

opacity: 0.7;

}

#lifewindow .lifemain h3{

width: 120px;

font-size: 20px;

display: block;

margin-top: 30px;

float: left;

font-family: "微软雅黑";

color: black;

cursor: pointer;

margin-left: 20px;

font-weight: 700;

}

#lifewindow .lifemain .life1{

float: left;

width: 120px;

margin-top: 5px;

margin-left: 20px;

}

#lifewindow .lifemain .life1 a{

font-weight: 500;

color: #333;

font-size: 14px;

}

#lifewindow .lifemain .cantuan{

width: 72px;

height: 32px;

float: left;

margin-top: 5px;

margin-left: 20px;

background: url(../images/ee1.jpg) no-repeat;

}

#lifewindow .lifemain .zhe ul{

float: left;

filter:alpha(opacity=70);

opacity: 0.7;

margin-top: 20px;

margin-left: 30px;

}

#lifewindow .lifemain .zhe ul li{

list-style: disc;

margin-top: 5px;

}

#lifewindow .lifemain .zhe ul li a{

color: #333;

}

#lifewindow .lifemain .zhe1{

width: 120px;

height: 190px;

float: left;

background: white;

position: absolute;

z-index: 2;

filter:alpha(opacity=70);

opacity: 0.7;

}

#lifewindow .lifemain img{

position: absolute;

top: 0px;

left: 0px;

}

/**/

/*网站详情开始*/

#xiang{

width: 1210px;

height: 176px;

margin: 0 auto;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

#xiang .xleft{

width: 970px;

height: 176px;

float: left;

margin-left: 20px;

}

#xiang .xleft .qing{

margin-top: 10px;

width: 192px;

height: 151px;

float: left;

}

#xiang .xleft .qing .qtu{

width: 40px;

height: 40px;

background: url(../images/all.png)no-repeat 0px -55px;

float: left;

}

#xiang .xleft .qing .qtu1{

width: 40px;

height: 40px;

background: url(../images/all.png)no-repeat -50px -55px;

float: left;

}

#xiang .xleft .qing .qtu2{

width: 40px;

height: 40px;

background: url(../images/all.png)no-repeat 0px -100px;

float: left;

}

#xiang .xleft .qing .qtu3{

width: 40px;

height: 40px;

background: url(../images/all.png)no-repeat -50px -100px;

float: left;

}

#xiang .xleft .qing .qtu4{

width: 40px;

height: 40px;

background: url(../images/all.png)no-repeat 0px -149px;

float: left;

}

#xiang .xleft .qing h3{

width: 148px;

height: 31px;

float: right;

line-height: 31px;

font-weight: 700;

font-size: 14px;

color: #666;

}

#xiang .xleft .qing .bao{

width: 148px;

height: 20px;

float: right;

}

#xiang .xleft .qing a{

line-height: 20px;

color: #666;

}

#xiang .xleft .qing a:hover{

color: #E4393C;

text-decoration: underline;

}

#xiang .xright{

width: 200px;

height: 176px;

float: left;

background: url(../images/16.png)no-repeat 0px -130px;

}

#xiang .xright h3{

width: 200px;

height: 18px;

margin-top: 17px;

float: left;

line-height: 18px;

font-weight: 700;

font-size: 14px;

color: #666;

margin-bottom: 5px;

}

#xiang .xright span{

width: 200px;

height: 65px;

float: left;

display: block;

line-height: 1.8em;

color: #666;

}

#xiang .xright a{

width: 70px;

height: 14px;

margin-top: 20px;

float: right;

color: #005EA7;

}

#xiang .xright a:hover{

text-decoration: underline;

}

/*网站详情结束*/

/*底部开始*/

#down{

width: 1210px;

height: 150px;

margin: 0 auto;

margin-bottom: 30px;

margin-top: 20px;

}

#down .down_top{

width: 1210px;

height: 18px;

float: left;

text-align: center;

}

#down .down_top a{

padding-right: 10px;

padding-left: 10px;

line-height: 18px;

border-right: 1px solid #ccc;

color: #666;

}

#down .down_top a:hover{

color: #E4393C;

text-decoration: underline;

}

#down .down_center{

width: 1210px;

height: 72px;

float: left;

margin: 10px 0px;

}

#down .down_center span{

width: 1210px;

height: 14px;

float: left;

margin-top: 3px;

text-align: center;

color: #666;

}

#down .down_center a{

padding-right: 5px;

color: #666;

}

#down .down_center a:hover{

color: #E4393C;

text-decoration: underline;

}

#down .down_bot{

width: 1210px;

height: 40px;

float: left;

text-align: center;

}

#down .down_bot img{

margin-left: 10px;

}

/*底部结束*/

.fu{

width: 38px;

height: 410px;

position: fixed;

left: 50%;

bottom: 30px;

margin-left: 615px;

display: none;

}

.fu ul li{

width: 38px;

height: 36px;

margin-bottom: 5px;

border: 1px solid #DEDEDE;

position: relative;

}

.fu ul li:hover .futuhide{

display: block!important;

}

.fu ul li:hover .futuhide1{

display: block!important;

}

.fu ul li .futuhide{

width: 38px;

height: 36px;

border: 1px solid #ED5759;

position: absolute;

top: 0px;

left: 0px;

font-size: 13px;

color: #ED5759;

padding-top: 3px;

background: #FDEEEE;

text-align: center;

display: none;

}

.fu ul li .futuhide1{

width: 38px;

height: 36px;

position: absolute;

top: 0px;

left: 0px;

font-size: 13px;

color: white;

padding-top: 3px;

background: #615F5F;

text-align: center;

display: none;

}

.fu ul li .futu1{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat;

}

.fu ul li .futu2{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -54px;

}

.fu ul li .futu3{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -109px;

}

.fu ul li .futu4{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -162px;

}

.fu ul li .futu5{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -220px;

}

.fu ul li .futu6{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -275px;

}

.fu ul li .futu7{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -329px;

}

.fu ul li .futu8{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -385px;

}

.fu ul li .futu9{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -497px;

}

.fu ul li .futu10{

width: 38px;

height: 36px;

background: url(../images/xuanfu.png) no-repeat 0px -552px;

}

四.作业地址

百度云:https://pan.baidu.com/s/1MJCfP5HSHXSDTggK-2m-BA

提取码:nlbm

码云地址:https://gitee.com/aiguille/codes/0b6zlwt3g8ydc9qfvu5xk44