<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算机科学学院</title><link href="css/bgcss.css" rel="stylesheet">
</head>
<body><!--顶部图片部分--><div class="top"><!--搜索部分--><div class="serach"><input type="text" value="请输入关键字搜索" class="serach_text"><div class="serach_pic"><input type="submit" class="btnSubmit" value style="cursor: hand"></div></div></div><!-- 导航栏部分--><div class="navagator"><ul><li class="top_li">网站首页</li><li class="top_li">学院概况</li><li class="top_li">本科生教育</li><li class="top_li">研究生教育</li><li class="top_li">师资队伍</li><li class="top_li">科学研究</li><li class="top_li">学生工作</li><li class="top_li">招生工作</li><li class="top_li">实验中心</li><li class="top_li">党建之窗</li></ul></div><!--轮播图部分--><div class="picNews"></div><!--图片新闻与学术交流部分--><div class="contentOne"><!--图片新闻--><div class="news"><div class="newsTitle"><h2>图片新闻</h2><span class="picSpan"><img src="img/more.png"></span></div><!--左边图片部分,实现方式为table标签--><div class="" style="width: 310px;margin: 12px 0 0 0;display: block;float: left"><table class=""><tbody><tr><td><div class="news_pictuure"><img src="img/news_pic2.jpg" style="width: 310px;height: 174px"></div></td></tr><tr><td><div class="news_intro" align="center"><a href="#" class="pic_text" target="_blank" style="text-decoration: none;">计算机科学学院隆重举行第八届“盛特杯”大学生课外...</a></div></td></tr></tbody></table></div><!--右边新闻列表部分--><div class="news_list"><ul style="width: 314px;height: 180px;padding: 0 0 0 20px"><li class="item"><a target="_blank" href="#"><em>计算机科学学院举办2019年寒假留校学生新春</em><span>[02-01]</span></a></li><li class="item"><a target="_blank" href="#"><em>学院召开教职工大会学习传达中层干部大会精</em><span>[03-15]</span></a></li><li class="item"><a target="_blank" href="#"><em>计科院工会组织学院女教职工庆祝第109个“</em><span>[03-12]</span></a></li><li class="item"><a target="_blank" href="#"><em>学术讲座——人工智能改变我们的未来生活</em><span>[03-05]</span></a></li><li class="item"><a target="_blank" href="#"><em>计算机科学学院各年级辅导员集中走访学生寝</em><span>[01-21]</span></a></li><li class="item"><a target="_blank" href="#"><em>学院召开2018年度领导班子民主生活会</em><span>[02-14]</span></a></li></ul></div></div><!--学术交流--><div class="communicate"><div class="newsTitle"><h2>学术交流</h2><span class="picSpan"><img src="img/more.png"></span></div><!--右边新闻列表部分--><div class="news_list"><ul style="width: 314px;height: 180px;padding: 0 0 0 20px"><li class="item"><a target="_blank" href="#"><em>人工智能改变我们的未来生活</em></a></li><li class="item"><a target="_blank" href="#"><em>计算时代的虚假信息传播</em></a></li><li class="item"><a target="_blank" href="#"><em>人工智能+：视界充满AI</em></a></li><li class="item"><a target="_blank" href="#"><em>零行列式策略及其网络演化动力学</em></a></li><li class="item"><a target="_blank" href="#"><em>视频遇上云服务</em></a></li><li class="item"><a target="_blank" href="#"><em>计科院关于举行2018年校庆论文报告会的通知</em></a></li></ul></div></div></div><!--新闻速递与党建动态--><div class="contentTwo"><!--新闻速递--><div class="newsPass"><div class="newsTitle"><h2>新闻速递</h2><span class="picSpan"><img src="img/more.png"></span></div><div class="news_list_2"><h3><a>计算机科学学院举办2019年寒假留校学生新春团拜会</a></h3><p>在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…<span style="color: #0b6cb8">[详细信息]</span></p><ul style="width: 644px;height: 286px;padding-left: 0"><li class="item_2"><a target="_blank" href="#"><em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em><span>03/15</span></a></li><li class="item_2"><a target="_blank" href="#"><em>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</em><span>03/12</span></a></li><li class="item_2"><a target="_blank" href="#"><em>学术讲座——人工智能改变我们的未来生活</em><span>03/05</span></a></li><li class="item_2"><a target="_blank" href="#"><em>计算机科学学院各年级辅导员集中走访学生寝室</em><span>01/21</span></a></li><li class="item_2"><a target="_blank" href="#"><em>学院召开2018年度领导班子民主生活会</em><span>01/14</span></a></li><li class="item_2"><a target="_blank" href="#"><em>计科院与川庆安检院技术交流大会</em><span>01/10</span></a></li></ul></div></div><!--党建动态--><div class="party"><div class="newsTitle" style="width: 320px"><h2>党建动态</h2><span class="picSpan"><img src="img/more.png"></span></div><!--右边新闻列表部分--><div class="news_list"><ul style="width: 314px;height: 180px;padding: 0 0 0 20px"><li class="item"><a target="_blank" href="#"><em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em></a></li><li class="item"><a target="_blank" href="#"><em>学院召开2018年领导班子民主生活会</em></a></li><li class="item"><a target="_blank" href="#"><em>刘翔同志任计算机科学学院党委副书记、纪委书记</em></a></li><li class="item"><a target="_blank" href="#"><em>学院党委组织师生收看庆祝改革开放40周年大会</em></a></li><li class="item"><a target="_blank" href="#"><em>【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会</em></a></li><li class="item"><a target="_blank" href="#"><em>【聚焦评估】学院召开本科教学工作审核评估工作会</em></a></li><li class="item"><a target="_blank" href="#"><em>学院党委开展迎校庆主题党日活动</em></a></li><li class="item"><a target="_blank" href="#"><em>学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会</em></a></li></ul></div></div></div><!--通知公告与专题列表--><div class="contentThree"><!--通知公告--><div class="inform"><div class="newsTitle"><h2>新闻速递</h2><span class="picSpan"><img src="img/more.png"></span></div><div class="news_list_2"><ul style="width: 644px;height: 280px;padding-left: 0"><li class="item_2"><a target="_blank" href="#"><em>自组团出访前公示信息表（彭博）</em></a></li><li class="item_2"><a target="_blank" href="#"><em>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</em></a></li><li class="item_2"><a target="_blank" href="#"><em>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</em></a></li><li class="item_2"><a target="_blank" href="#"><em>2018年秋季学期期末考试情况总结</em></a></li><li class="item_2"><a target="_blank" href="#"><em>计算机科学学院2018年度教职工考核优秀名单公示</em></a></li><li class="item_2"><a target="_blank" href="#"><em>国际学术会议（ICCIS2019）征稿通知</em></a></li><li class="item_2"><a target="_blank" href="#"><em>计算机科学学院领导班子2018年度民主生活会征求意见</em></a></li><li class="item_2"><a target="_blank" href="#"><em>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</em></a></li></ul></div></div><!--专题列表--><div class="subject"><div class="newsTitle" style="width: 320px"><h2>专题列表</h2><span class="picSpan"><img src="img/more.png"></span></div><!--右边新闻列表部分--><div class="news_list"><ul style="width: 314px;height: 180px;padding: 0 0 0 20px"><li class="item"><a target="_blank" href="#"><em>中美联合高性能和大数据计算实验室</em></a></li><li class="item"><a target="_blank" href="#"><em>石油工程计算机模拟技术重点实验室</em></a></li><li class="item"><a target="_blank" href="#"><em>思科网络技术学院教师培训中心</em></a></li></ul></div></div></div><!--底部信息--><div class="footer"><p>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</p></div>
</body>
</html>
body{margin: 0; } .top{width: 100%;height:112px;background: no-repeat url("../img/top-bg.jpg") center; } .serach{width: 287px;height: 38px;background: url("../img/top_hunt_bg.png") no-repeat;margin-top: 32px;margin-right: 320px;float: right; } .serach_text{float: left;width: 195px;margin-top: 2px;margin-left: 15px;height: 30px;line-height: 30px;color: rgb(200,200,200);outline: none;border: medium none; } .serach_pic{height: 18px;float: right;margin-top: 6px; } .btnSubmit{width: 22px;height: 22px;margin-right: 10px;margin-top: 2px;outline:none;cursor: pointer;background: url("../img/top_hunt.png") no-repeat;border: medium none; } .navagator{background: #0b6cb8;height: 50px;line-height: 50px;margin: 0 auto;width: 974px; } ul{margin: 0; } .top_li{list-style: none;color: #fff;font-size: 15px;float: left;padding: 0 15px; } div{display: block; } .picNews{width: 974px;height: 195px;margin: 20px auto;background: url("../img/welcome.jpg") no-repeat center; } .contentOne{height: 268px;width: 974px;margin: 0 auto; } .news{height: 100%;width: 644px;float: left;padding: 0 10px 0 0; } .newsTitle{width: 100%;height: 34px;line-height: 34px;background: #ddd; } h2{width: 74px;background: #0b6cb8;color: #fff;font-size: 16px;padding: 0 5px;float: left;margin-top: 0;margin-bottom: 0;font-weight: normal; } .picSpan{float: right;display: block;padding: 0 5px; } table{width: 100%;height: 200px; } .news_pictuure{width: 310px;height: 174px;overflow: hidden; } .pic_text{line-height: 220%;color: #222222;font-size: 9pt;font-weight: bold;text-align: center;text-decoration: none; } .news_list{width: 334px;height: 180px;margin-top: 12px;float: right; } .item{overflow: hidden;font-size: 14px;line-height: 30px;height: 30px;width: 100%;background: url(../img/xdd.png) no-repeat 0px 14px;text-indent: 12px; } .item a{width: 314px;height: 30px;text-decoration: none;display: block; } .item em{overflow: hidden;color: #5c5c5c;width: 250px;float: left;height: 30px;font-style: normal;text-overflow:ellipsis } .item span{width: 60px;height: 30px;color: #5c5c5c; } .communicate{width: 320px;height: 226px;float: right; } .contentTwo{width: 996px;height: 324px;margin: 0 auto; } .newsPass{width: 644px;height: 304px;padding: 0 10px;float: left; } .news_list_2{width: 644px;height: 258px;margin-top: 12px;float: right; } .news_list_2 h3{margin: 0;padding: 0;text-indent: 12px; } .news_list_2 h3 a{width: 422px;height: 25px;color: #0b6cb8;font-size: 18px;cursor: pointer;} .news_list_2 p{margin-top: 4px;font-size: 12px;color: #999999;/*首行缩进两个字符*/text-indent: 2em;line-height: 22px;padding-bottom: 4px;/*下划线*/border-bottom: 1px dashed #eeeeee; } .item_2{overflow: hidden;font-size: 14px;line-height: 30px;height: 30px;width: 644px;background: url(../img/xdd.png) no-repeat 0px 14px;text-indent: 12px; } li.item_2 a{width: 644px;height: 30px;text-decoration: none;display: block; } .item_2 a em{color: #5c5c5c;width: 570px;float: left;height: 30px;font-style: normal;text-overflow:ellipsis } .item_2 a span{width: 66px;height: 30px;color: #c3c3c3;float: right; } .party{width: 332px;height: 286px;float: right; } .contentThree{width: 996px;height: 296px;margin: 0 auto; } .inform{width: 644px;height: 304px;padding: 0 10px;float: left; } .subject{width: 332px;height: 126px;float: right; } .footer{width: 100%;height: 60px;background: blue;color:black;font-size: 13px;line-height: 60px; } .footer p{text-align: center; }
效果截图：
