用HTML+CSS编写一个计科院网站首页的静态网页-CSDN博客

用HTML+CSS编写一个计科院网站首页的静态网页

学号：201631062509

姓名：杨菓

1.观察计科院主页

网站所有图片可以从开发者工具中审查找到。

计科院静态网站并没有占满整个网页，而是在中间，所以左右边界也是很重要的设置。

2.源代码

HTML源代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
  6     <title>西南石油大学计科院</title>
  7     <link rel="icon" href="favicon.ico">
  8     <link rel="stylesheet" href="css/index.css" type="text/css">
  9     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
 10 
 11     <link href="css/style.css" rel="stylesheet" type="text/css" />
 12     <script type="text/javascript" src="js/jquery.min.js"></script>
 13     <script type="text/javascript"  src="js/nav.js"></script>
 14     <script type="text/javascript" src="js/bootstrap.min.js"></script>
 15     <style>
 16     
 17     #box{
 18         margin-left:430px;
 19         margin-right:430px;
 20     }
 21    
 22 
 23     </style>
 24 </head>
 25 <body>
 26 <div id="box">
 27 
 28     <div class="container-fluid">
 29         <div class="row-fluid">
 30             <div class="span12">
 31 
 32                 <div id="title">
 33                         <form class="form-search form-inline">
 34                                 <input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查找</button>
 35                     </form>
 36                 </div>
 37                
 38                
 39 <div id="top_bg">
 40     <div class="top">
 41         <!--导航开始-->
 42         <div class="nav_z">
 43             <ul id="navul" class="cl">
 44                 <li>
 45                     <a href="#">网站首页</a>
 46                     
 47                 </li>
 48                 <li>
 49                     <a href="#">学院概况</a>
 50                     <ul>
 51                             <li><a href="xygk/xyjj.htm">学院简介</a></li>
 52                             <li><a href="xygk/xyld.htm">学院领导</a></li>
 53                             <li><a href="xygk/zzjg.htm">组织机构</a></li>
 54                     </ul>
 55                 </li>
 56                 <li>
 57                     <a href="#">本科生教育</a>
 58                     <ul>
 59                             <li><a href="bksjy/jsjkxyjszy.htm">计算机科学与技术专业</a></li>
 60                             <li><a href="bksjy/rjgczy.htm">软件工程专业</a></li>
 61                             <li><a href="bksjy/wlgczy.htm">网络工程专业</a></li>
 62                             <li><a href="bksjy/wlwgczy.htm">物联网工程专业</a></li>
 63                             <li><a href="bksjy/xxglyxxxtzy.htm">信息管理与信息系统专业</a></li>
 64                             <li><a href="bksjy/wlkjaqzy.htm">网络空间安全专业</a></li>
 65                             <li><a href="bksjy/sjkxydsjjszy.htm">数据科学与大数据技术专业</a></li>
 66                             <li><a href="bksjy/dwrchzpyxm.htm">对外人才合作培养项目</a></li>
 67                             <li><a href="bksjy/ksxx.htm">考试信息</a></li>
 68                             <li><a href="bksjy/xkzxxx.htm">选课重修信息</a></li>
 69                             <li><a href="bksjy/tzgg.htm">通知公告</a></li>
 70                             <li><a href="bksjy/zlxz.htm">资料下载</a></li>
 71                             <li><a href="bksjy/gxkjssp.htm">公选课教师视频</a></li>
 72                     </ul>
 73                 </li>
 74                 <li>
 75                     <a href="#">研究生教育</a>
 76                     <ul>
 77                             <li><a href="yjsjy/zsjz.htm">招生简章</a></li>
 78                             <li><a href="yjsjy/jsjkxyjsyjxk.htm">计算机科学与技术一级学科</a></li>
 79                             <li><a href="yjsjy/rjgcyjxk.htm">软件工程一级学科</a></li>
 80                             <li><a href="yjsjy/wlkjaqyjxk.htm">网络空间安全一级学科</a></li>
 81                             <li><a href="yjsjy/yjsds.htm">研究生导师</a></li>
 82                             <li><a href="yjsjy/yjsjztx.htm">研究生奖助体系</a></li>
 83                             <li><a href="yjsjy/tzgg.htm">通知公告</a></li>
 84                             <li><a href="yjsjy/zlxz.htm">资料下载</a></li>
 85                     </ul>
 86                 </li>
 87                 <li>
 88                     <a href="#">师资队伍</a>
 89                     <ul>
 90                             <li><a href="szdw/js.htm">教授</a></li>
 91                             <li><a href="szdw/fjs.htm">副教授</a></li>
 92                             <li><a href="szdw/js1.htm">讲师</a></li>
 93                             <li><a href="szdw/syry.htm">实验人员</a></li>
 94                     </ul>
 95                 </li>
 96                 <li>
 97                     <a href="#">科学研究</a>
 98                     <ul>
 99                             <li><a href="kxyj/kytd.htm">科研团队</a></li>
100                             <li><a href="kxyj/kypt.htm">科研平台</a></li>
101                             <li><a href="kxyj/kycg.htm">科研成果</a></li>
102                     </ul>
103                 </li>
104                 <li>
105                     <a href="#">学生工作</a>
106                     <ul>
107                             <li><a href="xsgz/gzdt.htm">工作动态</a></li>
108                             <li><a href="xsgz/tzgg.htm">通知公告</a></li>
109                             <li><a href="xsgz/kwcxsj.htm">课外创新实践</a></li>
110                             <li><a href="xsgz/bysjy.htm">毕业生就业</a></li>
111                             <li><a href="xsgz/xlzc.htm">心灵之窗</a></li>
112                             <li><a href="xsgz/qcfc.htm">青春风采</a></li>
113                             <li><a href="xsgz/zlxz.htm">资料下载</a></li>
114                     </ul>
115                 </li>
116                 <li>
117                     <a href="#">招生工作</a>
118                     <ul>
119                             <li><a href="zsgz/xyjs.htm">学院介绍</a></li>
120                             <li><a href="zsgz/bysjyqx.htm">毕业生就业去向</a></li>
121                             <li><a href="zsgz/yxbysjj.htm">优秀毕业生简介</a></li>
122                             <li><a href="zsgz/xshj.htm">学生获奖</a></li>
123                             <li><a href="zsgz/jyxyjs.htm">精英校友介绍</a></li>
124                             <li><a href="zsgz/zsgzxcbd.htm">招生工作宣传报道</a></li>
125                     </ul>
126                 </li>
127                 <li>
128                     <a href="#">实验中心</a>
129                     <ul>
130                             <li><a href="syzx/zxjj.htm">中心简介</a></li>
131                             <li><a href="syzx/syfs.htm">实验分室</a></li>
132                             <li><a href="syzx/gzzd.htm">规章制度</a></li>
133                             <li><a href="syzx/zlxz.htm">资料下载</a></li>
134                             <li><a href="http://syskf.swpu.edu.cn">开放预约</a></li>
135                     </ul>
136                 </li>
137                 <li>
138                     <a href="#">党建之窗</a>
139                     <ul>
140                             <li><a href="djzc/djdt.htm">党建动态</a></li>
141                             <li><a href="djzc/xxyd.htm">学习园地</a></li>
142                             <li><a href="djzc/dwzwgk.htm">党务政务公开</a></li>
143                             <li><a href="djzc/zlxz.htm">资料下载</a></li>
144                     </ul>
145                 </li>
146                 <!--可在此处直接添加导航-->
147             </ul>
148         </div><!--导航结束-->
149     </div><!--导航结束-->
150 </div><!--导航结束-->
151                 <div class="carousel slide" id="carousel-915504">
152                     <ol class="carousel-indicators">
153                         <li class="active" data-slide-to="0" data-target="#carousel-915504">
154                         </li>
155                         <li data-slide-to="1" data-target="#carousel-915504">
156                         </li>
157                         
158                     </ol>
159                     <div class="carousel-inner">
160                         <div class="item active">
161                             <img alt="" src="img/h1.jpg" />
162                            
163                         </div>
164                         <div class="item">
165                             <img alt="" src="img/h2.jpg" />
166                            
167                         </div>
168                        
169                     </div> <a data-slide="prev" href="#carousel-915504" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-915504" class="right carousel-control">›</a>
170                 </div>
171                 <div class="row-fluid">
172                     <div class="span8">
173                        
174 
175                         <div id="gonav">
176 
177                             <h2>图片新闻</h2>
178                             <span >
179                                 <a>
180                                     More>>
181                                 </a>
182                             </span>
183                         </div>
184 
185                         <div class="row-fluid">
186                             <div class="span6">
187                                 <div class="carousel slide" id="carousel-589608">
188                                     
189                                     <div class="carousel-inner">
190                                         <div class="item active">
191                                             <img alt="" src="img/a.jpg" />
192                                             <div class="carousel-caption">
193                                                
194                                                 <p>
195                                                         计科院2017-2018年度先进班级评比展示活动圆满落幕
196                                                 </p>
197                                             </div>
198                                         </div>
199                                         <div class="item">
200                                             <img alt="" src="img/b.jpg" />
201                                             <div class="carousel-caption">
202                                                
203                                                 <p>
204                                                         计科院第6届物联网创意大赛圆满落幕
205                                                 </p>
206                                             </div>
207                                         </div>
208                                         <div class="item">
209                                             <img alt="" src="img/c.jpg" />
210                                             <div class="carousel-caption">
211                                                
212                                                 <p>
213                                                         梁宗文老师获得“2018年度四川省优秀物联网教师”...
214                                                 </p>
215                                             </div>
216                                         </div>
217                                         <div class="item">
218                                                 <img alt="" src="img/d.jpg" />
219                                                 <div class="carousel-caption">
220                                                    
221                                                     <p>
222                                                             “传递爱心，西柚启航”--科院“走进敬老院”活动...
223                                                     </p>
224                                                 </div>
225                                             </div>
226                                             <div class="item">
227                                                     <img alt="" src="img/e.jpg" />
228                                                     <div class="carousel-caption">
229                                                         
230                                                         <p>
231                                                                 >计算机科学学院隆重举行第八届“盛特杯”大学生课...
232                                                         </p>
233                                                     </div>
234                                                 </div>
235                                                 <div class="item">
236                                                         <img alt="" src="img/f.jpg" />
237                                                         <div class="carousel-caption">
238                                                           
239                                                             <p>
240                                                                     计算机科学学院隆重举行第八届“盛特杯”大学生课...
241                                                             </p>
242                                                         </div>
243                                                     </div>
244                                     </div> 
245                                     <ol class="carousel-indicators">
246                                         <li class="active" data-slide-to="0" data-target="#carousel-589608">
247                                         </li>
248                                         <li data-slide-to="1" data-target="#carousel-589608">
249                                         </li>
250                                         <li data-slide-to="2" data-target="#carousel-589608">
251                                         </li>
252                                         <li data-slide-to="3" data-target="#carousel-589608">
253                                             </li>
254                                             <li data-slide-to="4" data-target="#carousel-589608">
255                                                 </li>
256                                                 <li data-slide-to="5" data-target="#carousel-589608">
257                                                     </li>
258                                     </ol>
259                                    
260                                 </div>
261                             </div>
262                             <div class="span6">
263                                 <ul id="ull">
264                                         <li><a href="info/1045/4613.htm" title="计算机科学学院举办2019年寒假留校学生新春团拜会">计算机科学学院举办2019年寒假留校学生新春</a></li>
265 
266                                         <li><a href="info/1045/4643.htm" title="计科院工会组织学院女教职工庆祝第109个“三八妇女节”">计科院工会组织学院女教职工庆祝第109个“</a></li>
267                                         
268                                         <li><a href="info/1045/4633.htm" title="学术讲座——人工智能改变我们的未来生活">学术讲座——人工智能改变我们的未来生活</a></li>
269                                         
270                                         <li><a href="info/1045/4603.htm" title="计算机科学学院各年级辅导员集中走访学生寝室">计算机科学学院各年级辅导员集中走访学生寝</a></li>
271                                         
272                                         <li><a href="info/1045/4592.htm" title="学院召开2018年度领导班子民主生活会">学院召开2018年度领导班子民主生活会</a></li>
273                                         
274                                         <li><a href="info/1045/4589.htm" title="计科院与川庆安检院技术交流大会">计科院与川庆安检院技术交流大会</a></li>
275                                 </ul>
276                             </div>
277                         </div>
278                     </div>
279                     <div class="span4">
280                         <div id="gonav">
281 
282                             <h2>学术交流</h2>
283                             <span >
284                                 <a>
285                                     More>>
286                                 </a>
287                             </span>
288                         </div>
289 
290                         <div class="row-fluid">
291                             <div class="span12">
292                                 <ul id="ull">
293                                         <li> <a href="info/1076/4624.htm" title="人工智能改变我们的未来生活">人工智能改变我们的未来生活</a></li>
294                                         <li> <a href="info/1076/4537.htm" title="计算时代的虚假信息传播">计算时代的虚假信息传播</a></li>
295                                         <li> <a href="info/1076/4483.htm" title="人工智能+：视界充满AI">人工智能+：视界充满AI</a></li>
296                                         <li> <a href="info/1076/4397.htm" title="零行列式策略及其网络演化动力学">零行列式策略及其网络演化动力学</a></li>
297                                         <li> <a href="info/1076/4388.htm" title="视频遇上云服务">视频遇上云服务</a></li>
298                                         <li> <a href="info/1076/4380.htm" title="计科院关于举行2018年校庆论文报告会的通知">计科院关于举行2018年校庆论文报告会的...</a></li>
299                                 </ul>
300                             </div>
301                         </div>
302                     </div>
303                 </div>
304                 <div class="row-fluid">
305                     <div class="span8">
306                         <div id="gonav">
307 
308                             <h2>新闻速递</h2>
309                             <span >
310                                 <a>
311                                     More>>
312                                 </a>
313                             </span>
314                         </div>
315                         <div class="row-fluid">
316                                 <div id="span12">
317                                     
318                                         <h3><a href="info/1045/4613.htm">计算机科学学院举办2019年寒假留校学生新春团拜会</a></h3>
319                                         <p>&#8203;在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<span><a href="info/1045/4613.htm">详细信息</a></span>]</p>
320                                         
321                                         <ul id="ull">
322                        <li><a href="info/1045/4643.htm">计科院工会组织学院女教职工庆祝第109个“三八妇女节”</a></li>                 
323                        <li><a href="info/1045/4633.htm">学术讲座——人工智能改变我们的未来生活</a></li>                 
324                        <li><a href="info/1045/4603.htm">计算机科学学院各年级辅导员集中走访学生寝室</a></li>                 
325                        <li><a href="info/1045/4592.htm">学院召开2018年度领导班子民主生活会</a></li>                 
326                        <li><a href="info/1045/4589.htm">计科院与川庆安检院技术交流大会</a></li>                 
327                        <li><a href="info/1045/4599.htm">计算机科学学院分年级召开期末年级大会</a></li>                 
328                                              
329                                          </ul>
330                                     </ul>
331                                 </div>
332                             </div>
333                        
334                     </div>
335                     <div class="span4">
336                             <div id="gonav">
337 
338                                     <h2>党建动态</h2>
339                                     <span >
340                                         <a>
341                                             More>>
342                                         </a>
343                                     </span>
344                                 </div>
345                                 <div class="row-fluid">
346                                         <div class="span12">
347                                             <ul id="ull">
348                                                     <li> <a href="info/1082/4593.htm" title="学院召开2018年领导班子民主生活会">学院召开2018年领导班子民主生活会</a></li>
349                                                     <li> <a href="info/1082/4520.htm" title="刘翔同志任计算机科学学院党委副书记、纪委书记">刘翔同志任计算机科学学院党委副书记、...</a></li>
350                                                     <li> <a href="info/1082/4512.htm" title="学院党委组织师生收看庆祝改革开放40周年大会">学院党委组织师生收看庆祝改革开放40周...</a></li>
351                                                     <li> <a href="info/1082/4464.htm" title="【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会">【审核评估】学院召开本科教学工作审核...</a></li>
352                                                     <li> <a href="info/1082/4424.htm" title="【聚焦评估】学院召开本科教学工作审核评估工作会">【聚焦评估】学院召开本科教学工作审核...</a></li>
353                                                     <li> <a href="info/1082/4471.htm" title="学院党委开展迎校庆主题党日活动">学院党委开展迎校庆主题党日活动</a></li>
354                                                     <li> <a href="info/1082/4376.htm" title="学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会">学院党委组织收看2018年全国科学道德和...</a></li>
355                                                     <li> <a href="info/1082/4356.htm" title="【聚焦评估】学院召开全院教职工大会部署本学期本科审核评估迎评促建工作">【聚焦评估】学院召开全院教职工大会部...</a></li>
356                                             </ul>
357                                         </div>
358                                     </div>
359                     </div>
360                 </div>
361                 <div class="row-fluid">
362                     <div class="span8">
363                             <div id="gonav">
364 
365                                     <h2>通知公告</h2>
366                                     <span >
367                                         <a>
368                                             More>>
369                                         </a>
370                                     </span>
371                                 </div>
372                                 <div class="row-fluid">
373                                         <div class="span12">
374                                             <ul id="ull">
375                                                     <li> <a href="info/1055/4638.htm">自组团出访前公示信息表（彭博）</a></li>
376                                                     <li> <a href="info/1055/4627.htm">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
377                                                     <li> <a href="info/1055/4626.htm">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
378                                                     <li> <a href="info/1055/4600.htm">2018年秋季学期期末考试情况总结</a></li>
379                                                     <li> <a href="info/1055/4597.htm">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
380                                                     <li> <a href="info/1055/4588.htm">国际学术会议（ICCIS2019）征稿通知</a></li>
381                                                     <li> <a href="info/1055/4584.htm">计算机科学学院领导班子2018年度民主生活会征求意见</a></li>
382                                                     <li> <a href="info/1055/4578.htm">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li>
383                                             </ul>
384                                         </div>
385                                     </div>
386                     </div>
387                     <div class="span4">
388                             <div id="gonav">
389 
390                                     <h2>专题列表</h2>
391                                     <span >
392                                         <a>
393                                             More>>
394                                         </a>
395                                     </span>
396                                 </div>
397                                 <div class="row-fluid">
398                                         <div class="span12">
399                                             <ul id="ull">
400                                                     <li> <a href="info/1173/2003.htm" title="中美联合高性能和大数据计算实验室">中美联合高性能和大数据计算实验室</a></li>
401    
402  
403                                                     <li> <a href="info/1173/2004.htm" title="石油工程计算机模拟技术重点实验室">石油工程计算机模拟技术重点实验室</a></li>
404                                                        
405                                                      
406                                                     <li> <a href="info/1173/2005.htm" title="思科网络技术学院教师培训中心">思科网络技术学院教师培训中心</a></li>
407                                             </ul>
408                                         </div>
409                                     </div>
410                     </div>
411                 </div>
412             </div>
413         </div>
414     </div>
415 
416 </div>
417 </body>
418 
419 </html>

HTML源代码

CSS源代码：

  1 *{
  2     margin: 0px;
  3     padding: 0px;
  4 }
  5 
  6 .heading{
  7     
  8     margin: 0px auto;
  9 }
 10 
 11 .heading img{
 12     width: 100%;
 13     margin: 0px auto;
 14 }
 15 .wrapper{
 16     width: 984px;
 17     margin: 0px auto;
 18 }
 19 
 20 .nav{
 21     width:984px;
 22     height:50px;
 23     margin: 0 auto;
 24 }
 25 .nav ul{
 26     width: 100%;
 27 }
 28 .nav li{
 29     float:left;
 30     height:50px;
 31     line-height:50px;
 32     font-size:16px;
 33     position:relative; 
 34     list-style-type: none;
 35     background-color: #0066CC;
 36 }
 37 .nav li a{
 38     color:#FFF;
 39     display:block;
 40     padding: 0 15.6px; 
 41     text-decoration: none;
 42 }
 43 .nav ul li a:hover{
 44     display:block;
 45     color: #fff;
 46     background:#0a5894;
 47     text-decoration: none;
 48 }
 49 .body_img img{
 50     width: 100%;
 51     margin: 0px auto;
 52 }
 53 .body{
 54     width: 100%;
 55     margin: 0 auto;
 56 }
 57 .body_content{
 58     width: 100%;
 59     height: 800px;
 60     margin: 10px auto;
 61 }
 62 .content1{
 63     height: 280px;
 64     width: 685px;
 65     float: left;
 66 }
 67 .content1_head{
 68     margin-top: 0px;
 69     width: 685px;
 70     height: 40px;
 71     background-color: #969696;
 72 }
 73 .content1_head1{
 74     font-size: 18px;
 75     width: 80px;
 76     height: 35px;
 77     background-color: #0066CC;
 78     margin-top: 0px;
 79     margin-left: auto;
 80     margin-right: auto;
 81     float: left;
 82     color: white;
 83     padding: 2px;
 84     text-align: center;
 85 }
 86 .content1_head img{
 87     margin: 15px auto;
 88     float: right;
 89     border: none;
 90 }
 91 .content1_body{
 92     width: 685px;
 93     margin:0px auto;
 94     float: left;
 95 }
 96 .content1_left img{
 97     margin: 20px auto;
 98     float: left;
 99 }
100 .content1_right ul{
101     text-align: right;
102     list-style-type: none;
103     margin:20px auto;
104     font-size: 14px;
105     padding: 10px;
106 }
107 .content1_right ul li{
108     padding: 5px;
109 }
110 a:link,a:visited{
111     text-decoration: none;
112     color: darkgray;
113 }
114 a:hover{
115     text-decoration: none;
116     color: black;
117 }
118 .content2{
119     height: 260px;
120     float: right;
121     width: 280px;
122 }
123 .content2_head{
124     margin-top: 0px;
125     width: 280px;
126     height: 40px;
127     background-color: #969696;
128     
129 }
130 .content2_head1{
131     font-size: 18px;
132     width: 90px;
133     height: 35px;
134     background-color: #0066CC;
135     margin-top: 0px;
136     margin-left: auto;
137     margin-right: auto;
138     float: left;
139     color: white;
140     padding: 2px;
141     text-align: center;
142 }
143 .content2_head img{
144     margin: 15px auto;
145     float: right;
146     border: none;
147 }
148 .content2_body{
149     height: 220px;
150 }
151 .content2_body ul{
152     text-align: left;
153     list-style-type: none;
154     font-size: 14px;
155     margin-top: 25px;
156 }
157 .content2_body ul li{
158     padding: 5px;
159 }
160 .content3{
161     height: 280px;
162     width: 685px;
163     float: left;
164 }
165 
166 .content3_head{
167     margin-top: 0px;
168     width: 685px;
169     height: 40px;
170     background-color: #969696;
171 }
172 .content3_head1{
173     font-size: 18px;
174     width: 80px;
175     height: 35px;
176     background-color: #0066CC;
177     margin-top: 0px;
178     margin-left: auto;
179     margin-right: auto;
180     float: left;
181     color: white;
182     padding: 2px;
183     text-align: center;
184 }
185 .content3_head img{
186     margin: 15px auto;
187     float: right;
188     border: none;
189 }
190 
191 .conten3_body{
192     height: 240px;
193 }
194 .content3_body ul{
195     text-align: left;
196     list-style-type: none;
197     font-size: 14px;
198     margin-top: 15px;
199     line-height: 30px;
200 }
201 .conten3_body ul li{
202     padding: 5px;
203 }
204 
205 .content4{
206     height: 280px;
207     float: right;
208     width: 280px;
209 }
210 .content4_head{
211     margin-top: 0px;
212     width: 280px;
213     height: 40px;
214     background-color: #969696;
215 }
216 .content4_head1{
217     font-size: 18px;
218     width: 80px;
219     height: 35px;
220     background-color: #0066CC;
221     margin-top: 0px;
222     margin-left: auto;
223     margin-right: auto;
224     float: left;
225     color: white;
226     padding: 2px;
227     text-align: center;
228 }
229 .content4_head img{
230     margin: 15px auto;
231     float: right;
232     border: none;
233 }
234 .content4_body ul{
235     text-align: left;
236     list-style-type: none;
237     font-size: 14px;
238     margin-top: 10px;
239 }
240 .content4_body ul li{
241     padding: 5px;
242 }
243 
244 .content5{
245     height: 280px;
246     width: 685px;
247     float: left;
248 }
249 
250 .content5_head{
251     margin-top: 0px;
252     width: 685px;
253     height: 40px;
254     background-color: #969696;
255 }
256 .content5_head1{
257     font-size: 18px;
258     width: 80px;
259     height: 35px;
260     background-color: #0066CC;
261     margin-top: 0px;
262     margin-left: auto;
263     margin-right: auto;
264     float: left;
265     color: white;
266     padding: 2px;
267     text-align: center;
268 }
269 .content5_head img{
270     margin: 15px auto;
271     float: right;
272     border: none;
273 }
274 
275 .content5_body ul{
276     text-align: left;
277     list-style-type: none;
278     font-size: 14px;
279     padding-top: 10px;
280     line-height: 30px;
281 }
282 .conten5_body ul li{
283     padding: 5px;
284 }
285 
286 .content6{
287     height: 280px;
288     float: right;
289     width: 280px;
290 }
291 .content6_head{
292     margin-top: 0px;
293     width: 280px;
294     height: 40px;
295     background-color: #969696;
296 }
297 .content6_head1{
298     font-size: 18px;
299     width: 80px;
300     height: 35px;
301     background-color: #0066CC;
302     margin-top: 0px;
303     margin-left: auto;
304     margin-right: auto;
305     float: left;
306     color: white;
307     padding: 2px;
308     text-align: center;
309 }
310 .content6_head img{
311     margin: 15px auto;
312     float: right;
313     border: none;
314 }
315 .content6_body ul{
316     text-align: left;
317     margin:20px auto;
318     font-size: 14px;
319     padding: 10px;
320 }
321 .content6_body ul li{
322     padding: 5px;
323 }
324 
325 .footing{
326     width: 100%;
327     background-color: #006699;
328     height: 100px;
329     text-align: center;
330 }
331 
332 .footing font{
333     color: white;
334     font-size: 4;
335 }