<!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; }
效果截图: