用HTML+CSS實現一個計科院網站首頁靜態頁面
思路：
首先觀察我校計科院網站首頁，按F12觀察它的各個板塊的佈局。html
而後用<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 提取碼：p5taide
相關文章
- 1. 編寫計科院網站首頁的靜態網頁
- 2. HTML+CSS編寫一個計科院網站首頁靜態網頁
- 3. django實現一個靜態頁面
- 4. 實現僞靜態頁面
- 5. 實現頁面靜態化
- 6. 靜態頁面實現include
- 7. 京東首頁靜態頁面
- 8. html+css實現小米商城首頁靜態頁面
- 9. IIS 靜態頁面網站搭建
- 10. java網站頁面靜態化方案
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 編寫計科院網站首頁的靜態網頁
- 2. HTML+CSS編寫一個計科院網站首頁靜態網頁
- 3. django實現一個靜態頁面
- 4. 實現僞靜態頁面
- 5. 實現頁面靜態化
- 6. 靜態頁面實現include
- 7. 京東首頁靜態頁面
- 8. html+css實現小米商城首頁靜態頁面
- 9. IIS 靜態頁面網站搭建
- 10. java網站頁面靜態化方案