1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 list-style-type: none; 11 text-decoration: none; 12 } 13 body{ 14 background-color: rgb(242,242,242); 15 } 16 span a{ 17 font-size: 12px; 18 } 19 .backg-styl{ 20 background-image: url("imgs/bgz.jpg"); 21 width: 1060px; 22 margin: 0px auto; 23 background-repeat: repeat-y; 24 } 25 .text-styl{ 26 width: 1000px; 27 margin: 0px auto; 28 } 29 .bg-styl{ 30 background-image: url("imgs/top.jpg"); 31 height: 150px; 32 width: 1000px; 33 background-repeat: no-repeat; 34 background-position: 0px 0px; 35 } 36 .lian-styl >span{ 37 font-size: 12px; 38 float: right; 39 margin-right: 5px; 40 } 41 .daohang-styl{ 42 background-color: #275d89; 43 } 44 .daohang-styl >ul >li{ 45 float: left; 46 padding: 5px 29px; 47 background-image: url("imgs/solid.gif"); 48 background-position: right center; 49 background-repeat: no-repeat; 50 } 51 .daohang-styl >ul >li:hover{ 52 background-color: #1f4a6e; 53 } 54 .daohang-styl a{ 55 color: white; 56 font-size: 14px; 57 } 58 .daohang-styl a:hover{ 59 text-decoration: none; 60 } 61 .gy-styl{ 62 padding: 0px 5px; 63 background-color: #f7f7f7; 64 color: #666666; 65 border: 1px solid #e6e6e6; 66 width: 987px; 67 } 68 .gyu-styl >span{ 69 padding: 5px 7px; 70 float: left; 71 font-size: 12px; 72 } 73 .sousuo-styl{ 74 display: inline-block; 75 vertical-align: top; 76 padding: 5px 42px; 77 float: right; 78 } 79 .gy-styl.sousuo-styl{ 80 vertical-align: top; 81 display: inline-block; 82 padding-top: 4px; 83 } 84 .gyu-styl a{ 85 color: #666666; 86 } 87 .sousuo-styl >span{ 88 font-size: 12px; 89 } 90 .big-styl{ 91 height: 500px; 92 width: 997px; 93 padding: 9px 0px 0px 0px; 94 border: 1px solid #f0f0f0; 95 } 96 .bk-styl{ 97 background-color:#f7f7f7 ; 98 padding: 1px 0px 0px 0px; 99 width: 194px; 100 height: 456px; 101 float: left; 102 } 103 .left-styl li{ 104 margin-top: 0px; 105 } 106 .right-styl{ 107 width: 707px; 108 height: 431px; 109 float: right; 110 margin-right: 35px; 111 padding: 0px 15px; 112 border: 1px solid #f0f0f0; 113 } 114 .top-styl{ 115 width: 721px; 116 height: 208px; 117 padding: 0px 0px 0px 0px; 118 border: 1px solid #f0f0f0; 119 } 120 .top-styl img{ 121 float: left; 122 } 123 .rg-styl{ 124 float: right; 125 width: 425px; 126 height: 194px; 127 } 128 .rg-styl h1{ 129 font-weight: normal; 130 font-size: 18px; 131 float: left; 132 } 133 .rg-styl a{ 134 float: right; 135 } 136 .g-styl{ 137 color: rgb(25, 68, 118); 138 font-family: "微软雅黑"; 139 font-size: 18px; 140 font-weight: normal; 141 } 142 .gg-styl a{ 143 color: #f06217; 144 font-size: 12px; 145 } 146 .nn-styl{ 147 line-height: 28px; 148 } 149 .nn-styl li{ 150 float: left; 151 background: url("imgs/icon.gif") left center no-repeat; 152 padding-left: 5px; 153 } 154 .nn-styl a{ 155 font-size: 12px; 156 color: #666666; 157 float: left; 158 } 159 .nn-styl i{ 160 font-size: 12px; 161 color: #666666; 162 float: right; 163 } 164 .nrs-styl li{ 165 float: left; 166 background: url("imgs/icon.gif") left center no-repeat; 167 padding-left: 5px; 168 } 169 .nrs-styl a{ 170 color:#666666; 171 font-size: 12px; 172 } 173 .nrs-styl i{ 174 float: right; 175 font-style: normal; 176 color: #666666; 177 } 178 a:hover{ 179 text-decoration: underline; 180 } 181 .xia-styl{ 182 width: 721px; 183 height: 240px; 184 border: 1px solid #f0f0f0; 185 padding: 0px 0px 0px 0px ; 186 background: url("imgs/casebg.jpg"); 187 } 188 .shang-styl{ 189 width: 721px; 190 height: 132px; 191 } 192 .zuoyi-styl{ 193 float: left; 194 width: 339px; 195 height: 104px; 196 padding: 0px 0px 0px 0px ; 197 } 198 .zuoyi-styl img{ 199 padding: 7px 0px 0px 8px ; 200 float: left; 201 } 202 .rgg-styl{ 203 width: 203px ; 204 height: 102px; 205 float: right; 206 } 207 .nrss-styl li{ 208 float: left; 209 background: url("imgs/icon.gif") left center no-repeat; 210 padding-left: 5px; 211 } 212 .nrss-styl{ 213 font-size: 12px; 214 color: #666666; 215 line-height: 28px; 216 float: right; 217 } 218 .youyi-styl{ 219 float: right; 220 width: 332px; 221 height: 103px; 222 padding: 0px 0px 0px 0px ; 223 } 224 .youyi-styl img{ 225 padding: 7px 0px 0px 8px ; 226 float: left; 227 } 228 .rrgg-styl{ 229 width: 197px ; 230 height: 102px; 231 float: right; 232 } 233 .xia1-styl{ 234 width: 721px; 235 height: 104px; 236 padding: 0px 0px 12px 0px ; 237 } 238 .zuoer-styl{ 239 float: left; 240 width: 354px; 241 height: 114px; 242 padding: 0px 0px 0px 0px ; 243 244 } 245 .zuoer-styl img{ 246 padding: 7px 0px 0px 8px ; 247 float: left; 248 } 249 .nrsss-styl{ 250 font-size: 12px; 251 color: #666666; 252 line-height: 28px; 253 float: right; 254 } 255 .nrsss-styl li{ 256 float: left; 257 background: url("imgs/icon.gif") left center no-repeat; 258 padding-left: 5px; 259 } 260 .zzgg-styl{ 261 width: 217px ; 262 height: 102px; 263 float: right; 264 } 265 .youer-styl{ 266 float: right; 267 width: 332px; 268 height: 103px; 269 padding: 0px 0px 0px 0px ; 270 } 271 .youer-styl img{ 272 padding: 7px 0px 0px 8px ; 273 float: left; 274 } 275 .nrss-styl a{ 276 color: #666666; 277 } 278 .ggs-styl a{ 279 color: #f06217; 280 font-size: 12px; 281 padding: 0px 15px 0px 0px ; 282 } 283 .nrsss-styl a{ 284 color: #666666; 285 } 286 .zui-styl{ 287 height: 49px; 288 border-top: 1px solid #e0e0e0; 289 background: #f2f2f2; 290 line-height: 49px; 291 width: 1048px; 292 } 293 .zui-styl p{ 294 color: #666666; 295 font-family: "微软雅黑"; 296 padding-left: 32px; 297 font-size: 12px; 298 } 299 .yy{ 300 text-align: center; 301 } 302 </style> 303 </head> 304 <body> 305 <div class="backg-styl"> 306 <div class="text-styl"> 307 <div class="bg-styl"> 308 <div class="lian-styl"> 309 <span>|<a href="#">简体</a></span> 310 <span><a href="#">Deutsch</a></span> 311 <span><a href="#">English </a>||</span> 312 <div style="clear: both"></div> 313 </div> 314 </div> 315 <div class="daohang-styl"> 316 <ul> 317 <li style="<a href="#">首页</a></li> 318 <li><a href="#">部门概况</a></li></li> 319 <li><a href="#">校情公开</a></li></li> 320 <li><a href="#">制度规程</a></li></li> 321 <li><a href="#">服务指南</a></li></li> 322 <li><a href="#">工作动态</a></li></li> 323 <li><a href="#">学习资料</a></li></li> 324 <li><a href="#">一周安排</a></li></li> 325 <li><a href="#">简报简讯</a></li></li> 326 </ul> 327 <div style="clear: both"></div> 328 </div> 329 <div class="gy-styl"> 330 <div class="gyu-styl"> 331 <span>今天是：2014年3月35日 星期二 </span> 332 <span><a href="#">欢迎您访问某某科技学院学校办公室网站!</a></span> 333 </div> 334 <div class="sousuo-styl" > 335 <span>搜索 </span><input type="text" style=" height: 18px"/><input type="button" style=" 61px" value="查询"/> 336 <div style="clear: both"></div> 337 </div> 338 <div style="clear: both"></div> 339 </div> 340 <div style="height: 10px"></div> 341 <div class="big-styl"> 342 <div class="bk-styl"> 343 <ul> 344 <li style="margin-top: 0px"><a href="#"> <img src="imgs/n1.jpg" title="协同办公系统" alt="协同办公系统"></a></li> 345 <li><a href="#"> <img src="imgs/n2.jpg" title="信息公开网" alt="信息公开网"></a></li> 346 <li><a href="#"> <img src="imgs/n3.jpg" title="书记校长信箱" alt="书记校长信箱"></a></li> 347 <li><a href="#"> <img src="imgs/n4.jpg" title="相关链接" alt="相关链接"></a></li> 348 <li><a href="#"> <img src="imgs/n5.jpg" title="联系我们" alt="联系我们"></a></li> 349 </ul> 350 <img src="imgs/weixin.jpg"> 351 </div> 352 <div class="right-styl" > 353 <div class="top-styl"> 354 <img src="imgs/pic.jpg"> 355 <div class="rg-styl"> 356 <h1 class="g-styl" style="float: left;">工作动态</h1> 357 <span class="gg-styl" style="float: right"><a href="#">更多>></a></span> 358 <div style="clear: both"></div> 359 <ul class="nn-styl"> 360 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 361 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 362 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 363 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 364 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 365 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出重要指示</a><i>[2014-04-06]</i></li> 366 </ul> 367 </div> 368 <div style="clear: both"></div> 369 </div> 370 371 <div class="xia-styl"> 372 <div class="shang-styl"> 373 <div class="zuoyi-styl"> 374 <img src="imgs/p1.jpg"> 375 <div class="rgg-styl"> 376 <h1 class="g-styl" style="float: left">高校视野</h1> 377 <span class="gg-styl" style="float: right"><a href="#">更多>></a></span> 378 <div style="clear: both"></div> 379 <ul class="nrss-styl"> 380 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出</a></li> 381 <li><a href="#">美国布里奇波特大学校长一行访问我</a></li> 382 <li><a href="#">巴比什波雅依大学孔院参加克鲁日城</a></li> 383 <div style="clear: both"></div> 384 </ul> 385 </div> 386 </div> 387 <div class="youyi-styl"> 388 <img src="imgs/p2.jpg"> 389 <div class="rrgg-styl"> 390 <h1 class="g-styl" style="float: left">服务指南</h1> 391 <span class="gg-styl" style="float: right"><a href="#">更多>></a></span> 392 <div style="clear: both"></div> 393 <ul class="nrss-styl"> 394 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出</a></li> 395 <li><a href="#">美国布里奇波特大学校长一行访问我</a></li> 396 <li><a href="#">巴比什波雅依大学孔院参加克鲁日城</a></li> 397 <div style="clear: both"></div> 398 </ul> 399 </div> 400 </div> 401 <div style="clear: both"></div> 402 </div> 403 <div class="xia1-styl"> 404 <div class="zuoer-styl"> 405 <img src="imgs/p3.jpg"> 406 <div class="zzgg-styl"> 407 <h1 class="g-styl" style="float: left">简报简讯</h1> 408 <span class="ggs-styl" style="float: right"><a href="#">更多>></a></span> 409 <div style="clear: both"></div> 410 <ul class="nrsss-styl"> 411 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出</a></li> 412 <li><a href="#">美国布里奇波特大学校长一行访问我</a></li> 413 <li><a href="#">巴比什波雅依大学孔院参加克鲁日城</a></li> 414 <div style="clear: both"></div> 415 </ul> 416 </div> 417 </div> 418 <div class="youer-styl"> 419 <img src="imgs/p4.jpg"> 420 <div class="rrgg-styl"> 421 <h1 class="g-styl" style="float: left">服务指南</h1> 422 <span class="gg-styl" style="float: right"><a href="#">更多>></a></span> 423 <div style="clear: both"></div> 424 <ul class="nrss-styl"> 425 <li><a href="#">路甬祥郝平肯定学校发展成绩并作出</a></li> 426 <li><a href="#">美国布里奇波特大学校长一行访问我</a></li> 427 <li><a href="#">巴比什波雅依大学孔院参加克鲁日城</a></li> 428 <div style="clear: both"></div> 429 </ul> 430 </div> 431 </div> 432 </div> 433 </div> 434 </div> 435 </div> 436 </div> 437 <div class="zui-styl"> 438 <p>版权所有 某某科技学院校园学校办公室 xb@zust.edu.cn ICP备05014576号 地址：某某市留和路318号 邮编：310023 </p> 439 </div> 440 </div> 441 <div style="clear: both"></div> 442 </div> 443 </div> 444 </div> 445 </div> 446 </div> 447 <div class="yy"><img src="imgs/footyy.jpg"></div> 448 </body> 449 </html>
效果图：
