计科院网站
效果图
代码如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="gb2312"> <title>计算机科学学院</title> <style> .body{ width:900px; margin: 0 auto; clear:both } .topPicture{ background-color: white; width: 900px; height:100px; color:white; height: available; text-align:center; margin:0px; padding:0; background-image:url(top-bg.jpg); display: inline-block; } .topPicture img{ width:100%; height:auto; padding:0; margin:0; } #search{width:280px;float:right;height:35px;margin-top:23px;margin-right:0px} input{width:210px;height:27px;border:1px solid #e2e2e2;float:left} #search1{margin-top:1px;width:63px;height:30px;line-height:30px;float:left;background-color:#dddddd;color:black;cursor:pointer} .guide{ clear: both; background-color: rgba(11, 108, 184, 0.87); color: white; font-family: "宋体"; height: 40px; font-size: 15px; line-height: 40px; padding:0px; margin-top:0px; margin-bottom: 10px; } .navy{ background-color: #dddddd; height: 30px; width: 630px; float: left; } .nav1 { background-color: #2780cb; font-size: 15px; font-family: "宋体"; color: white; height: 30px; width:70px; text-align: center; line-height:30px; float: left; } .nav2{ background-color: #dddddd; height: 30px; width: 250px; float: right; } .nav3{ background-color: #dddddd; font-family: "宋体"; height: 30px; width: 50px; font-size: 12px; line-height:30px; text-align: center; float: right; } .footer { clear:both; background-color:#2780cb; color:white; height: 50px; font-size: 8px; text-align:center; line-height:50px; } .leftBox{width:630px;float:left} .rightBox{width:250px;float:left;margin-left:20px;} .newsLeftBox{ width:630px; font-family: "宋体"; font-size:12px; text-align:left; line-height:30px; float:left; } .newsLeftBox ul{ margin:15px; padding:0; } .newsLeftBox ul li{ margin:0; padding:0; } .news1{ clear:both width:330px; float:right; } .newsRightBox{ width:250px; font-family: "宋体"; font-size:12px; text-align:left; line-height:30px; margin-top:5px; float:left; padding:0; margin:0; } .newsRightBox ul{ margin:0px; padding:0px; } .newsRightBox ul li{ width: 230px; text-align:left; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; padding:0px; margin-left:5px; list-style:none; } .time{ width:50px; height:30px; font-size:5px; text-align:center; line-height:30px; margin-top:5px; } <!--导航栏--> ul{ list-style: none; padding:0; margin:0; } .nav>li{ list-style:none; float: left; } ul a{ display: block; text-decoration: none; width: 82px; height: 40px; text-align: center; line-height: 40px; color: white; padding-right:0px; background-color: rgba(11, 108, 184, 0.77); } .drop-down{ position: relative; } .drop-down-content{ padding: 0; position: absolute; left: -9999px; } .drop-down-content li:hover a{ background-color:red; } .nav .drop-down:hover .drop-down-content{ left: 0; } .newleft{text-align:left;} .newright{text-align:right;} .newpic{ clear:both;width:285px;float:left;margin-top:10px} .newRightstyle{ width:250px; height:30px; overflow:hidden; } </style> </head> <body> <div class="body"> <!--头部图片--> <div class="topPicture" > <div id="search"> <input type="text" placeholder="请输入关键字搜索"> <div id="search1">搜索</div> </div> </div> <!--导航栏--> <div class="guide"> <!--下拉菜单--> <ul class="nav"> <li><a href="#">网站首页</a></li> <li class="drop-down"><a href="#">学院概况</a> <ul class="drop-down-content"> <li><a href="#">学院简介</a></li> <li><a href="#">学院领导</a></li> <li><a href="#">组织机构</a></li> </ul> </li> <li class="drop-down"><a href="#">本科生研究</a> <ul class="drop-down-content"> <li><a href="#">计算机科学与技术专业</a></li> <li><a href="#">软件工程专业</a></li> <li><a href="#">网络工程专业</a></li> <li><a href="#">物联网工程专业</a></li> <li><a href="#">信息管理与信息系统专业</a></li> <li><a href="#">网络空间安全专业</a></li> <li><a href="#">数据科学与大数据技术专业</a></li> <li><a href="#">对外人才合作培养项目</a></li> <li><a href="#">考试信息</a></li> <li><a href="#">选课重修信息</a></li> <li><a href="#">通知公告</a></li> <li><a href="#">资料下载</a></li> <li><a href="#">公选课教师视频</a></li> </ul></li> <li class="drop-down"><a href="#">研究生研究</a> <ul class="drop-down-content"> <li><a href="#">招生简章</a></li> <li><a href="#">计算机科学与技术一级学科</a></li> <li><a href="#">软件工程一级学科</a></li> <li><a href="#">网络空间安全一级学科</a></li> <li><a href="#">研究生导师</a></li> <li><a href="#">研究生奖助体系</a></li> <li><a href="#">通知公告</a></li> <li><a href="#">资料下载</a></li> </ul></li> <li class="drop-down"><a href="#">师资队伍</a> <ul class="drop-down-content"> <li><a href="#">教授</a></li> <li><a href="#">副教授</a></li> <li><a href="#">讲师</a></li> <li><a href="#">实验人员</a></li> </ul></li> <li class="drop-down"><a href="#">科学研究</a> <ul class="drop-down-content"> <li><a href="#">科研团队</a></li> <li><a href="#">科研团队</a></li> <li><a href="#">科研成果</a></li> </ul></li> <li class="drop-down"><a href="#">学生工作</a> <ul class="drop-down-content"> <li><a href="#">工作动态</a></li> <li><a href="#">通知公告</a></li> <li><a href="#">课外创新实践</a></li> <li><a href="#">毕业生就业</a></li> <li><a href="#">心灵之窗</a></li> <li><a href="#">青春风采</a></li> <li><a href="#">资料下载</a></li> </ul></li> <li class="drop-down"><a href="#">招生工作</a> <ul class="drop-down-content"> <li><a href="#">学院介绍</a></li> <li><a href="#">毕业生就业去向</a></li> <li><a href="#">优秀毕业生简介</a></li> <li><a href="#">学生获奖</a></li> <li><a href="#">精英校友介绍</a></li> <li><a href="#">招生工作宣传报道</a></li> </ul></li> <li class="drop-down"><a href="#">实验中心</a> <ul class="drop-down-content"> <li><a href="#">中心简介</a></li> <li><a href="#">实验分室</a></li> <li><a href="#">规章制度</a></li> <li><a href="#">资料下载</a></li> <li><a href="#">开放预约</a></li> </ul></li> <li class="drop-down"><a href="#">党建之窗</a> <ul class="drop-down-content"> <li><a href="#">党建动态</a></li> <li><a href="#">学习园地</a></li> <li><a href="#">党务政务公开</a></li> <li><a href="#">资料下载</a></li> </ul></li> </ul> </div> <!--图片，以及第二栏--> <div class="header"> <img src="pic.png" width="900px"/> </div> <div class="leftBox"> <div class="navy"> <div class="nav1">图片新闻</div> <div class="nav3">more>></div> </div> <!--图片新闻内容--> <div class="newsLeftBox"> <!--图片--> <div class="newpic"><img src="newspic.png" width="250px" float="left" /> <p style="margin-left:20px">计科院第6届物联网创意大赛圆满落幕</p> </div> <!--新闻内容--> <div class="news1"> <table width="345" border="0" cellspacing="0" cellpadding="0" border-color="white" float="right"> <tr><td class="newleft"> 学术讲座——人工智能改变我们的未来生活</td> <td class="newright"> 03/05</td></tr> <tr><td class="newleft"> 计科院工会组织学院女教职工庆祝第109个“三八妇女节”</td> <td class="newright"> 03/05</td></tr> <tr><td class="newleft"> 计算机科学学院举办2019年寒假留校学生新春团拜会</td> <td class="newright"> 03/05</td></tr> <tr><td class="newleft"> 计算机科学学院各年级辅导员集中走访学生寝室</td> <td class="newright"> 03/05</td></tr> <tr><td class="newleft"> 学院召开2018年度领导班子民主生活会</td> <td class="newright"> 03/05</td></tr> <tr><td class="newleft"> 计科院与川庆安检院技术交流大会</td> <td class="newright"> 03/05</td></tr> </table> </div> </div> </div> <!--图片新闻结束--> <!--学术交流新闻块--> <div class="rightBox"> <div class="nav2"> <div class="nav1">学术交流</div> <div class="nav3">more>></div> </div> <div class="newsRightBox"> <ul> <li >人工智能改变我们的未来生活</li> <li >计算时代的虚假信息传播</li> <li>人工智能+：视界充满AI</li> <li>零行列式策略及其网络演化动力学</li> <li>视频遇上云服务</li> <li>计科院关于举行2018年校庆论文报告会的通知</li> </ul> </div> </div> <!--新闻速递 --> <div class="newsLeftBox"> <div class="navy"> <div class="nav1">新闻速递</div> <div class="nav3">more>></div> </div> <h2 style="color:rgba(11, 108, 184, 0.77);margin:0px"><A href="http://www.swpu.edu.cn/scs/info/1045/4613.htm" title="计算机科学学院举办2019年寒假留校学生新春团拜会">计算机科学学院举办2019年寒假留校学生新春团拜会</a></h2> <p style="font-size：5px;color:gray;margin:0px">在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…</p> <ul > <li style="overflow:hidden">学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</li> <li>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</li> <li>学术讲座——人工智能改变我们的未来生活</li> <li>计算机科学学院各年级辅导员集中走访学生寝室</li> <li>学院召开2018年度领导班子民主生活会</li> <li>计科院与川庆安检院技术交流大会</li> </ul> </div> <!--党建动态--> <div class="rightBox"> <div class="nav2"> <div class="nav1">党建动态</div> <div class="nav3">more>></div> </div> <div class="newsRightBox"> <ul> <li>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</li> <li>学院召开2018年领导班子民主生活会</li> <li>刘翔同志任计算机科学学院党委副书记、纪委书记</li> <li>学院党委组织师生收看庆祝改革开放40周年大会</li> <li>【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会</li> <li>【聚焦评估】学院召开本科教学工作审核评估工作会</li> <li>学院党委开展迎校庆主题党日活动</li> <li>学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会</li> </ul> </div> </div> <!--通知公告--> <div class="newsLeftBox"> <div class="navy"> <div class="nav1">通知公告</div> <div class="nav3">more>></div> </div> <ul > <li>自组团出访前公示信息表（彭博）</li> <li>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</li> <li>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</li> <li>2018年秋季学期期末考试情况总结</li> <li>计算机科学学院2018年度教职工考核优秀名单公示</li> <li>国际学术会议（ICCIS2019）征稿通知</li> <li>计算机科学学院领导班子2018年度民主生活会征求意见</li> <li>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</li> </ul> </div> <!--专题列表--> <div class="rightBox"> <div class="nav2"> <div class="nav1">专题列表</div> <div class="nav3">more>></div> </div> <div class="newsRightBox"> <ul > <li>中美联合高性能和大数据计算实验室</li> <li>石油工程计算机模拟技术重点实验室</li> <li>思科网络技术学院教师培训中心</li> </ul> </div> </div> </div> <!--尾部落款--> <div class="footer"> Copyright? 2018 All Rights Reserved. 西南石油大学计算机科学学院 </div> </body> </html>
