用HTML+CSS实现一个计科院网站首页静态页面

时间:2024-03-10 21:08:27

思路:

首先观察我校计科院网站首页,按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>
View Code

项目目录文件https://pan.baidu.com/s/1DKR3_5trzGJS6d30zj8jzQ  提取码:p5ta