用HTML+CSS实现一个计科院网站首页静态页面
思路：
首先观察我校计科院网站首页，按F12观察它的各个板块的布局。
然后用<div>从上到下从左到右一块一块仿照着来实现。
需要用到的图片全都从原本网站上保存下来使用。
效果：
HTML代码（CSS全采用内部引用）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>西南石油大学计科院</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 list-style-type: none; 11 } 12 13 div { 14 display: block; 15 } 16 17 input { 18 border-bottom-style: none; 19 border-left-style: none; 20 border-right-style: none; 21 border-top-style: none; 22 } 23 24 em { 25 font-style: normal; 26 } 27 28 a { 29 outline: none; 30 text-decoration:none; 31 } 32 33 ul, 34 li { 35 list-style: none; 36 } 37 38 nav .level>li { 39 float: left; 40 /*width: 16.66%;*/ 41 text-align: center; 42 background: #0b6cb8; 43 /*padding: 10px 0;*/ 44 transition: .4s; 45 font-size: 15.5px; 46 /* color:white;*/ 47 margin-left: 10px; 48 padding-left: 10px; 49 padding-right: 10px; 50 float: left; 51 } 52 53 nav .level>li a { 54 color: white; 55 } 56 57 nav .level>li:hover { 58 background: navy; 59 } 60 /* 设置鼠标滑过后的样式 */ 61 62 nav .two { 63 position: absolute; 64 display: none; 65 /*margin-top: 10px;*/ 66 } 67 /* 先使二级菜单的内容隐藏 */ 68 69 nav .level>li:hover .two { 70 display: block; 71 } 72 /* 鼠标滑过一级菜单后的显示二级菜单 */ 73 74 nav .two li { 75 background:#0b6cb8; 76 padding: 5px 10px; 77 transition: .4s; 78 cursor: pointer; 79 } 80 81 nav .two li:hover { 82 background: navy; 83 } 84 .topWrap { 85 width: 100%; 86 margin: 0 auto; 87 background: #ffffff; 88 height: auto; 89 } 90 91 .navWrap { 92 width: 100%; 93 background: #0b6cb8; 94 height: 50px; 95 line-height: 50px; 96 margin: 0 auto; 97 position: relative; 98 z-index: 9999; 99 } 100 101 .nav { 102 width: 976px; 103 height: 50px; 104 margin: 0 auto; 105 } 106 107 .clear { 108 clear: both; 109 } 110 111 .topDiv { 112 width: 976px; 113 margin: 0 auto; 114 height: 112px; 115 } 116 117 .fr { 118 float: right; 119 } 120 121 .fl { 122 float: left; 123 } 124 125 .fdj { 126 float: right; 127 height: 18px; 128 margin-top: 6px; 129 margin-left: 10px; 130 } 131 132 .topR { 133 width: 420px; 134 height: 76px; 135 padding-top: 15px; 136 color: #999999; 137 } 138 139 .Search { 140 width: 287px; 141 height: 38px; 142 background: url(img/top_hunt_bg.png) no-repeat; 143 margin-top: 15px; 144 float: right; 145 } 146 147 .search_text { 148 float: left; 149 width: 195px; 150 margin-top: 2px; 151 height: 30px; 152 line-height: 30px; 153 font-family: 微软雅黑; 154 color: rgb(200, 200, 200); 155 margin-left: 15px; 156 outline: none; 157 } 158 159 .button { 160 background: url(img/top_hunt.png) no-repeat; 161 width: 18px; 162 height: 18px; 163 cursor: pointer; 164 margin-right: 10px; 165 outline: none; 166 } 167 168 .bannerWrap { 169 width: 100%; 170 margin: 0 auto; 171 height: auto; 172 overflow: hidden; 173 } 174 175 .banner_one { 176 width: 974px; 177 height: 194.8px; 178 position: relative; 179 margin: 0 auto; 180 overflow: hidden; 181 z-index: 1; 182 } 183 184 .slideBox { 185 background: url(img/welcome.jpg) no-repeat; 186 width: 974px; 187 height: 194.8px; 188 overflow: hidden; 189 position: relative; 190 } 191 192 .container { 193 width: 996px; 194 margin: 0 auto; 195 height: auto; 196 } 197 198 .new_inforBox2 { 199 width: 644px; 200 } 201 202 .new_inforBox { 203 width: 644px; 204 height: auto; 205 padding: 0 10px; 206 margin-top: 20px; 207 } 208 209 .dynamic { 210 height: 35px; 211 line-height: 34px; 212 width: 100%; 213 border-bottom: 1px solid #d7d7d7; 214 background: #ddd; 215 } 216 217 .dynamic h2 { 218 font-size: 16px; 219 color: #464646; 220 font-weight: normal; 221 float: left; 222 padding: 0 5px; 223 background: #2780cb; 224 color: #fff; 225 } 226 227 .dynamic span a { 228 width: 38px; 229 height: 25px; 230 display: block; 231 float: right; 232 } 233 234 .newsBox { 235 margin: 12px auto 0; 236 height: auto; 237 overflow: hidden; 238 } 239 240 .new_pic { 241 float: left; 242 width: 310px; 243 } 244 245 .new_list3 { 246 width: 314px; 247 padding: 0 0 0 20px; 248 } 249 250 .new_list { 251 width: 312px; 252 float: left; 253 padding: 0 10px; 254 } 255 256 .new_listd { 257 width: 100%; 258 padding: 0; 259 } 260 261 .dynamic_listh { 262 width: 100%; 263 } 264 265 .dynamic_list { 266 width: 100%; 267 } 268 269 .dynamic_list li a em { 270 display: block; 271 float: left; 272 width: 250px; 273 text-overflow: ellipsis; 274 white-space: nowrap; 275 overflow: hidden; 276 } 277 278 .dynamic_listh li a em, 279 .dynamic_listc1 li a em { 280 width: 586px; 281 } 282 283 .dynamic_list li { 284 height: 30px; 285 line-height: 30px; 286 font-size: 14px; 287 color: #5c5c5c; 288 width: 100%; 289 background: url(img/xdd.png) no-repeat 0px 14px; 290 text-indent: 12px; 291 } 292 293 .dynamic_list li a { 294 color: #5c5c5c; 295 display: block; 296 cursor: pointer; 297 text-overflow: ellipsis; 298 white-space: nowrap; 299 overflow: hidden; 300 } 301 302 .dynamic_list li span { 303 float: right; 304 margin-right: 0; 305 color: #c3c3c3; 306 } 307 308 309 .informBox { 310 width: 180px; 311 height: auto; 312 padding: 0 10px; 313 margin-top: 20px; 314 } 315 316 .informBox3 { 317 width: 312px; 318 } 319 320 .new_inforBox1, 321 .informBox2, 322 .new_picc2, 323 .new_picc3, 324 .new_inforBoxa1 { 325 width: 644px; 326 } 327 328 .new_inforBox { 329 width: 644px; 330 height: auto; 331 padding: 0 10px; 332 margin-top: 20px; 333 } 334 335 .newBoxe { 336 width: 100%; 337 } 338 339 .newBox { 340 margin: 12px auto 0; 341 height: auto; 342 overflow: hidden; 343 } 344 345 .new_listd h3 { 346 font-size: 18px; 347 } 348 349 .new_list h3 { 350 font-size: 16px; 351 color: #0b6cb8; 352 text-indent: 12px; 353 } 354 355 .new_list p { 356 margin-top: 4px; 357 font-size: 12px; 358 color: #999999; 359 text-indent: 2em; 360 line-height: 22px; 361 padding-bottom: 4px; 362 border-bottom: 1px dashed #eeeeee; 363 } 364 365 .footWrap { 366 width: 100%; 367 margin: 30px auto 0; 368 position: relative; 369 z-index: 0; 370 } 371 372 .footDiv_one { 373 width: 100%; 374 margin: 0px auto 0; 375 height: 60px; 376 line-height: 60px; 377 color: #FFFFFF; 378 font-size: 13px; 379 overflow: hidden; 380 background: #224b77; 381 text-align: center; 382 } 383 384 385 </style> 386 </head> 387 <body style="position: relative;"> 388 389 <!--头部图片及搜索框--> 390 <div class="topWrap"> 391 <div style="width:100%;height:112px;background:url(img/top-bg.jpg) no-repeat center top"> 392 <div class="topDiv"> 393 <div class="topR fr"> 394 <div class="Search"> 395 <form action="" method="post"> 396 <input type="hidden" /> 397 <input type="hidden" value="1" /> 398 <input type="hidden" value="0" /> 399 <input type="text" value="请输入关键字搜索" class="search_text" 400 onfocus="if(value=='请输入关键字搜索')value=''" 401 onblur="if(!value)value='请输入关键字搜索'" /> 402 <div class="fdj fr"> 403 <input type="submit" class="button" value style="cursor: hand" /> 404 </div> 405 </form> 406 407 </div> 408 </div> 409 </div> 410 </div> 411 </div> 412 <!--头部图片及搜索框--> 413 414 <!--导航栏--> 415 <div class="navWrap" style="width: 974px;"> 416 <div class="nav"> 417 <nav> 418 <ul class="level"> 419 <li> 420 <a class="" href="index.htm">网站首页</a> 421 </li> 422 <li> 423 <a class="" href="xygk/xyjj.htm">学院概况</a> 424 <ul class="two"> 425 <li> 426 <a href="xygk/xyjj.htm">学院简介</a> 427 </li> 428 <li> 429 <a href="xygk/xyld.htm">学院领导</a> 430 </li> 431 <li> 432 <a href="xygk/zzjg.htm">组织机构</a> 433 </li> 434 </ul> 435 </li> 436 <li> 437 <a class="" href="bksjy/jsjkxyjszy.htm">本科生教育</a> 438 439 <ul class="two"> 440 <li> 441 <a href="bksjy/jsjkxyjszy.htm">计算机科学与技术专业</a> 442 </li> 443 <li> 444 <a href="bksjy/rjgczy.htm">软件工程专业</a> 445 </li> 446 <li> 447 <a href="bksjy/wlgczy.htm">网络工程专业</a> 448 </li> 449 <li> 450 <a href="bksjy/wlwgczy.htm">物联网工程专业</a> 451 </li> 452 <li> 453 <a href="bksjy/xxglyxxxtzy.htm">信息管理与信息系统专业</a> 454 </li> 455 <li> 456 <a href="bksjy/wlkjaqzy.htm">网络空间安全专业</a> 457 </li> 458 <li> 459 <a href="bksjy/sjkxydsjjszy.htm">数据科学与大数据技术专业</a> 460 </li> 461 <li> 462 <a href="bksjy/dwrchzpyxm.htm">对外人才合作培养项目</a> 463 </li> 464 <li> 465 <a href="bksjy/ksxx.htm">考试信息</a> 466 </li> 467 <li> 468 <a href="bksjy/xkzxxx.htm">选课重修信息</a> 469 </li> 470 <li> 471 <a href="bksjy/tzgg.htm">通知公告</a> 472 </li> 473 <li> 474 <a href="bksjy/zlxz.htm">资料下载</a> 475 </li> 476 <li> 477 <a href="bksjy/gxkjssp.htm">公选课教师视频</a> 478 </li> 479 </ul> 480 </li> 481 <li class=""> 482 <a class="" href="yjsjy/zsjz.htm">研究生教育</a> 483 484 <ul class="two"> 485 <li> 486 <a href="yjsjy/zsjz.htm">招生简章</a> 487 </li> 488 <li> 489 <a href="yjsjy/jsjkxyjsyjxk.htm">计算机科学与技术一级学科</a> 490 </li> 491 <li> 492 <a href="yjsjy/rjgcyjxk.htm">软件工程一级学科</a> 493 </li> 494 <li> 495 <a href="yjsjy/wlkjaqyjxk.htm">网络空间安全一级学科</a> 496 </li> 497 <li> 498 <a href="yjsjy/yjsds.htm">研究生导师</a> 499 </li> 500 <li> 501 <a href="yjsjy/yjsjztx.htm">研究生奖助体系</a> 502 </li> 503 <li> 504 <a href="yjsjy/tzgg.htm">通知公告</a> 505 </li> 506 <li> 507 <a href="yjsjy/zlxz.htm">资料下载</a> 508 </li> 509 </ul> 510 </li> 511 <li class=""> 512 <a class="" href="szdw/js.htm">师资队伍</a> 513 514 <ul class="two"> 515 <li> 516 <a href="szdw/js.htm">教授</a> 517 </li> 518 <li> 519 <a href="szdw/fjs.htm">副教授</a> 520 </li> 521 <li> 522 <a href="szdw/js1.htm">讲师</a> 523 </li> 524 <li> 525 <a href="szdw/syry.htm">实验人员</a> 526 </li> 527 </ul> 528 </li> 529 <li class=""> 530 <a class="" href="kxyj/kytd.htm">科学研究</a> 531 532 <ul class="two"> 533 <li> 534 <a href="kxyj/kytd.htm">科研团队</a> 535 </li> 536 <li> 537 <a href="kxyj/kypt.htm">科研平台</a> 538 </li> 539 <li> 540 <a href="kxyj/kycg.htm">科研成果</a> 541 </li> 542 </ul> 543 </li> 544 <li class=""> 545 <a class="" href="xsgz/gzdt.htm">学生工作</a> 546 547 <ul class="two"> 548 <li> 549 <a href="xsgz/gzdt.htm">工作动态</a> 550 </li> 551 <li> 552 <a href="xsgz/tzgg.htm">通知公告</a> 553 </li> 554 <li> 555 <a href="xsgz/kwcxsj.htm">课外创新实践</a> 556 </li> 557 <li> 558 <a href="xsgz/bysjy.htm">毕业生就业</a> 559 </li> 560 <li> 561 <a href="xsgz/xlzc.htm">心灵之窗</a> 562 </li> 563 <li> 564 <a href="xsgz/qcfc.htm">青春风采</a> 565 </li> 566 <li> 567 <a href="xsgz/zlxz.htm">资料下载</a> 568 </li> 569 </ul> 570 </li> 571 <li> 572 <a class="" href="info/1189/4517.htm">招生工作</a> 573 574 <ul class="two"> 575 <li> 576 <a href="zsgz/xyjs.htm">学院介绍</a> 577 </li> 578 <li> 579 <a href="zsgz/bysjyqx.htm">毕业生就业去向</a> 580 </li> 581 <li> 582 <a href="zsgz/yxbysjj.htm">优秀毕业生简介</a> 583 </li> 584 <li> 585 <a href="zsgz/xshj.htm">学生获奖</a> 586 </li> 587 <li> 588 <a href="zsgz/jyxyjs.htm">精英校友介绍</a> 589 <li> 590 <li> 591 <a href="zsgz/zsgzxcbd.htm">招生工作宣传报道</a> 592 </li> 593 </ul> 594 </li> 595 <li> 596 <a class="" href="info/1183/2625.htm">实验中心</a> 597 598 <ul class="two"> 599 <li> 600 <a href="syzx/zxjj.htm">中心简介</a> 601 </li> 602 <li> 603 <a href="syzx/syfs.htm">实验分室</a> 604 </li> 605 <li> 606 <a href="syzx/gzzd.htm">规章制度</a> 607 </li> 608 <li> 609 <a href="syzx/zlxz.htm">资料下载</a> 610 </li> 611 <li> 612 <a href="http://syskf.swpu.edu.cn">开放预约</a> 613 </li> 614 </ul> 615 </li> 616 <li> 617 <a class="" href="djzc/djdt.htm">党建之窗</a> 618 <ul class="two"> 619 <li> 620 <a href="djzc/djdt.htm">党建动态</a> 621 </li> 622 <li> 623 <a href="djzc/xxyd.htm">学习园地</a> 624 </li> 625 <li> 626 <a href="djzc/dwzwgk.htm">党务政务公开</a> 627 </li> 628 <li> 629 <a href="djzc/zlxz.htm">资料下载</a> 630 </li> 631 </ul> 632 </li> 633 </ul> 634 </nav> 635 </div> 636 </div> 637 <!--导航栏--> 638 639 <!--滚动显示图片--> 640 <div style="margin-top: 12px;"> 641 <div class="bannerWrap"> 642 <div class="banner_one"> 643 <div class="slideBox"></div> 644 </div> 645 </div> 646 </div> 647 <!--滚动显示图片--> 648 649 <!--主体部分--> 650 <div class="vsb-box"> 651 652 <!--第一部分--> 653 <div class="container"> 654 <div class="new_inforBox new_inforBox2 fl"> 655 656 <div class="dynamic"> 657 <h2>图片新闻</h1> 658 <span> 659 <a href="#" class="fr"> 660 <img src="img/more.png" /> 661 </a> 662 </span> 663 </div> 664 665 <div class="newsBox"> 666 <div class="new_pic"> 667 <table cellspacing="0" cellpadding="0" border="0" 668 style="padding: 0px;margin: 0px;border: 0px;"> 669 <tr> 670 <td> 671 <div style="height: 174px; width: 310px;overflow: hidden;"> 672 <img src="img/picnew1.jpg" height="174px" width="310px"/> 673 </div> 674 </td> 675 </tr> 676 <tr> 677 <td height="25"> 678 <div align="center" style="overflow: hidden;text-overflow: ellipsis;height: 25px;width=310px;"> 679 <a target="_blank" href="http://www.swpu.edu.cn/scs/info/1045/4427.htm" 680 style="line-height: 220%; color: #222222; font-size: 9pt; font-weight: bold; text-decoration: none;"> 681 计科院组织学生参加2018天府国际网络安全高峰论坛 682 </a> 683 </div> 684 </td> 685 </tr> 686 </table> 687 </div> 688 689 <div class="new_list new_list3"> 690 <ul class="dynamic_list fr"> 691 <li> 692 <a href="#" title="计算机科学学院举办2019年寒假留校学生新春团拜会"> 693 <span>[02-01]</span> 694 <em>计算机科学学院举办2019年寒假留校学生新春</em> 695 </a> 696 </li> 697 698 <li> 699 <a href="#" title="学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作"> 700 <span>[03-15]</span><em>学院召开教职工大会学习传达中层干部大会精</em></a> 701 </li> 702 703 <li> 704 <a href="#" title="计科院工会组织学院女教职工庆祝第109个“三八妇女节”"> 705 <span>[03-12]</span><em>计科院工会组织学院女教职工庆祝第109个“</em></a> 706 </li> 707 708 <li> 709 <a href="#" title="学术讲座——人工智能改变我们的未来生活"> 710 <span>[03-05]</span><em>学术讲座——人工智能改变我们的未来生活</em></a> 711 </li> 712 713 <li> 714 <a href="#" title="计算机科学学院各年级辅导员集中走访学生寝室"> 715 <span>[01-21]</span><em>计算机科学学院各年级辅导员集中走访学生寝</em></a> 716 </li> 717 718 <li> 719 <a href="#" title="学院召开2018年度领导班子民主生活会"> 720 <span>[01-14]</span><em>学院召开2018年度领导班子民主生活会</em></a> 721 </li> 722 </ul> 723 </div> 724 </div> 725 </div> 726 727 728 <div class="informBox informBox3 fl"> 729 <div class="dynamic"> 730 <h2>学术交流</h2> 731 <span> 732 <a href="#" class="fr"> 733 <img src="img/more.png" /> 734 </a> 735 </span> 736 </div> 737 738 <div class="info-list" style="padding-top: 10px;"> 739 <ul class="dynamic_list dynamic_list1" > 740 <li> 741 <a href="info/1076/4624.htm" title="人工智能改变我们的未来生活">人工智能改变我们的未来生活</a> 742 </li> 743 744 <li> 745 <a href="info/1076/4537.htm" title="计算时代的虚假信息传播">计算时代的虚假信息传播</a> 746 </li> 747 748 <li> 749 <a href="info/1076/4483.htm" title="人工智能+：视界充满AI">人工智能+：视界充满AI</a> 750 </li> 751 752 <li> 753 <a href="info/1076/4397.htm" title="零行列式策略及其网络演化动力学">零行列式策略及其网络演化动力学</a> 754 </li> 755 756 <li> 757 <a href="info/1076/4388.htm" title="视频遇上云服务">视频遇上云服务</a> 758 </li> 759 760 <li> 761 <a href="info/1076/4380.htm" title="计科院关于举行2018年校庆论文报告会的通知">计科院关于举行2018年校庆论文报告会的...</a> 762 </li> 763 </ul> 764 </div> 765 </div> 766 </div> 767 <!--第一部分--> 768 769 <!--第二部分--> 770 <div class="container"> 771 <div class="new_inforBox new_inforBoxa new_inforBoxa1 fl"> 772 <div class="dynamic"> 773 <h2>新闻速递</h2> 774 <span> 775 <a href="#"> 776 <img src="img/more.png" /> 777 </a> 778 </span> 779 </div> 780 <div class="newBox newBoxe"> 781 <div class="new_listd new_list"> 782 <h3><a href="#">计算机科学学院举办2019年寒假留校学生新春团拜会</a></h3> 783 <p> 在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们 784 传达学院的慰问和祝福。 2019年2月1日上午9时30分，计算机科学学院在明理楼B306 785 会议室隆重举行2019年寒假留… 786 [<span><a href="#">详细信息</a></span>] 787 </p> 788 <ul class="dynamic_list dynamic_listh"> 789 <li><a href="#"><em>学院召开党委中心组学习会暨党风廉政建设专题会</em><span>03/18</span></a></li> 790 <li><a href="#"><em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em><span>03/15</span></a></li> 791 <li><a href="#"><em>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</em><span>03/12</span></a></li> 792 <li><a href="#"><em>学术讲座——人工智能改变我们的未来生活</em><span>03/05</span></a></li> 793 <li><a href="#"><em>计算机科学学院各年级辅导员集中走访学生寝室</em><span>01/21</span></a></li> 794 <li><a href="#"><em>学院召开2018年度领导班子民主生活会</em><span>01/14</span></a></li> 795 </ul> 796 </div> 797 </div> 798 </div> 799 800 <div class="informBox informBox3 fl"> 801 <div class="dynamic"> 802 <h2>党建动态</h2> 803 <span> 804 <a href="#"> 805 <img src="img/more.png" /> 806 </a> 807 </span> 808 </div> 809 <div class="info-list"> 810 <ul class="dynamic_list dynamic_list1" style="padding-top: 10px;"> 811 <li><a href="#" title="学院召开党委中心组学习会暨党风廉政建设专题会">学院召开党委中心组学习会暨党风廉政建设专题会</a></li> 812 <li><a href="#" title="学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作">学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</a></li> 813 <li><a href="#" title="学院召开2018年领导班子民主生活会">学院召开2018年领导班子民主生活会</a></li> 814 <li><a href="#" title="刘翔同志任计算机科学学院党委副书记、纪委书记">刘翔同志任计算机科学学院党委副书记、纪委书记</a></li> 815 <li><a href="#" title="学院党委组织师生收看庆祝改革开放40周年大会">学院党委组织师生收看庆祝改革开放40周年大会</a></li> 816 <li><a href="#" title="【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会">【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会</a></li> 817 <li><a href="#" title="【聚焦评估】学院召开本科教学工作审核评估工作会">【聚焦评估】学院召开本科教学工作审核评估工作会</a></li> 818 <li><a href="#" title="学院党委开展迎校庆主题党日活动">学院党委开展迎校庆主题党日活动</a></li> 819 </ul> 820 </div> 821 </div> 822 </div> 823 <!--第二部分--> 824 825 <!--第三部分--> 826 <div class="container"> 827 <div class="new_inforBox new_inforBoxa new_inforBoxa1 fl"> 828 <div class="dynamic"> 829 <h2>通知公告</h2> 830 <span> 831 <a href="#"> 832 <img src="img/more.png" /> 833 </a> 834 </span> 835 </div> 836 <div class="info-list"> 837 <ul class="dynamic_list dynamic_list1"> 838 <li><a href="#">自组团出访前公示信息表（彭博）</a></li> 839 <li><a href="#">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li> 840 <li><a href="#">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li> 841 <li><a href="#">2018年秋季学期期末考试情况总结</a></li> 842 <li><a href="#">计算机科学学院2018年度教职工考核优秀名单公示 </a></li> 843 <li><a href="#">国际学术会议（ICCIS2019）征稿通知</a></li> 844 <li><a href="#">计算机科学学院领导班子2018年度民主生活会征求意见</a></li> 845 <li><a href="#">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li> 846 </ul> 847 </div> 848 </div> 849 850 <div class="informBox informBox3 fl"> 851 <div class="dynamic"> 852 <h2>专题列表</h2> 853 <span> 854 <a href="#"> 855 <img src="img/more.png" /> 856 </a> 857 </span> 858 </div> 859 <div class="info-list"> 860 <ul class="dynamic_list dynamic_list1"> 861 <li><a href="#" title="“高性能和大数据”中美高校联合实验室">“高性能和大数据”中美高校联合实验室</a></li> 862 <li><a href="#" title="石油工程计算机模拟技术重点实验室">石油工程计算机模拟技术重点实验室</a></li> 863 <li><a href="#" title="思科网络技术学院教师培训中心">思科网络技术学院教师培训中心</a></li> 864 </ul> 865 </div> 866 </div> 867 </div> 868 <!--第三部分--> 869 870 <!--尾部部分--> 871 <div class="footWrap"> 872 <div class="footDiv_one"> 873 <div> 874 <p></p> 875 <div>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div> 876 <p></p> 877 </div> 878 </div> 879 </div> 880 <!--尾部部分--> 881 882 </div> 883 <!--主体部分--> 884 885 </body> 886 </html>
项目目录文件https://pan.baidu.com/s/1DKR3_5trzGJS6d30zj8jzQ 提取码：p5ta
