效果展示
代码展示
1.html文件
<!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/CACC6406F054FCD01947F4DE4BC_40CB5E9A_AF5D.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;">计科院组织学生参加2018天府国际网络安全高峰论坛</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>
2.css文件
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: 15px; margin-right: 272px; 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: #224b77; color: #ffffff; font-size: 13px; line-height: 60px; } .footer p{ text-align: center; }
<!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/CACC6406F054FCD01947F4DE4BC_40CB5E9A_AF5D.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;">计科院组织学生参加2018天府国际网络安全高峰论坛</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>