首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<title>西南石油大学计科院</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/index.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
#box{
margin-left:430px;
margin-right:430px;
}
</style>
</head>
<body>
<div id="box">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="title">
<form class="form-search form-inline">
<input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查找</button>
</form>
</div>
<div id="top_bg">
<div class="top">
<!--导航开始-->
<div class="nav_z">
<ul id="navul" class="cl">
<li>
<a href="#">网站首页</a>
</li>
<li>
<a href="#">学院概况</a>
<ul>
<li><a href="xygk/xyjj.htm">学院简介</a></li>
<li><a href="xygk/xyld.htm">学院领导</a></li>
<li><a href="xygk/zzjg.htm">组织机构</a></li>
</ul>
</li>
<li>
<a href="#">本科生教育</a>
<ul>
<li><a href="bksjy/jsjkxyjszy.htm">计算机科学与技术专业</a></li>
<li><a href="bksjy/rjgczy.htm">软件工程专业</a></li>
<li><a href="bksjy/wlgczy.htm">网络工程专业</a></li>
<li><a href="bksjy/wlwgczy.htm">物联网工程专业</a></li>
<li><a href="bksjy/xxglyxxxtzy.htm">信息管理与信息系统专业</a></li>
<li><a href="bksjy/wlkjaqzy.htm">网络空间安全专业</a></li>
<li><a href="bksjy/sjkxydsjjszy.htm">数据科学与大数据技术专业</a></li>
<li><a href="bksjy/dwrchzpyxm.htm">对外人才合作培养项目</a></li>
<li><a href="bksjy/ksxx.htm">考试信息</a></li>
<li><a href="bksjy/xkzxxx.htm">选课重修信息</a></li>
<li><a href="bksjy/tzgg.htm">通知公告</a></li>
<li><a href="bksjy/zlxz.htm">资料下载</a></li>
<li><a href="bksjy/gxkjssp.htm">公选课教师视频</a></li>
</ul>
</li>
<li>
<a href="#">研究生教育</a>
<ul>
<li><a href="yjsjy/zsjz.htm">招生简章</a></li>
<li><a href="yjsjy/jsjkxyjsyjxk.htm">计算机科学与技术一级学科</a></li>
<li><a href="yjsjy/rjgcyjxk.htm">软件工程一级学科</a></li>
<li><a href="yjsjy/wlkjaqyjxk.htm">网络空间安全一级学科</a></li>
<li><a href="yjsjy/yjsds.htm">研究生导师</a></li>
<li><a href="yjsjy/yjsjztx.htm">研究生奖助体系</a></li>
<li><a href="yjsjy/tzgg.htm">通知公告</a></li>
<li><a href="yjsjy/zlxz.htm">资料下载</a></li>
</ul>
</li>
<li>
<a href="#">师资队伍</a>
<ul>
<li><a href="szdw/js.htm">教授</a></li>
<li><a href="szdw/fjs.htm">副教授</a></li>
<li><a href="szdw/js1.htm">讲师</a></li>
<li><a href="szdw/syry.htm">实验人员</a></li>
</ul>
</li>
<li>
<a href="#">科学研究</a>
<ul>
<li><a href="kxyj/kytd.htm">科研团队</a></li>
<li><a href="kxyj/kypt.htm">科研平台</a></li>
<li><a href="kxyj/kycg.htm">科研成果</a></li>
</ul>
</li>
<li>
<a href="#">学生工作</a>
<ul>
<li><a href="xsgz/gzdt.htm">工作动态</a></li>
<li><a href="xsgz/tzgg.htm">通知公告</a></li>
<li><a href="xsgz/kwcxsj.htm">课外创新实践</a></li>
<li><a href="xsgz/bysjy.htm">毕业生就业</a></li>
<li><a href="xsgz/xlzc.htm">心灵之窗</a></li>
<li><a href="xsgz/qcfc.htm">青春风采</a></li>
<li><a href="xsgz/zlxz.htm">资料下载</a></li>
</ul>
</li>
<li>
<a href="#">招生工作</a>
<ul>
<li><a href="zsgz/xyjs.htm">学院介绍</a></li>
<li><a href="zsgz/bysjyqx.htm">毕业生就业去向</a></li>
<li><a href="zsgz/yxbysjj.htm">优秀毕业生简介</a></li>
<li><a href="zsgz/xshj.htm">学生获奖</a></li>
<li><a href="zsgz/jyxyjs.htm">精英校友介绍</a></li>
<li><a href="zsgz/zsgzxcbd.htm">招生工作宣传报道</a></li>
</ul>
</li>
<li>
<a href="#">实验中心</a>
<ul>
<li><a href="syzx/zxjj.htm">中心简介</a></li>
<li><a href="syzx/syfs.htm">实验分室</a></li>
<li><a href="syzx/gzzd.htm">规章制度</a></li>
<li><a href="syzx/zlxz.htm">资料下载</a></li>
<li><a href="http://syskf.swpu.edu.cn">开放预约</a></li>
</ul>
</li>
<li>
<a href="#">党建之窗</a>
<ul>
<li><a href="djzc/djdt.htm">党建动态</a></li>
<li><a href="djzc/xxyd.htm">学习园地</a></li>
<li><a href="djzc/dwzwgk.htm">党务政务公开</a></li>
<li><a href="djzc/zlxz.htm">资料下载</a></li>
</ul>
</li>
<!--可在此处直接添加导航-->
</ul>
</div><!--导航结束-->
</div><!--导航结束-->
</div><!--导航结束-->
<div class="carousel slide" id="carousel-915504">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-915504">
</li>
<li data-slide-to="1" data-target="#carousel-915504">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/h1.jpg" />
</div>
<div class="item">
<img alt="" src="img/h2.jpg" />
</div>
</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>
</div>
<div class="row-fluid">
<div class="span8">
<div id="gonav">
<h2>图片新闻</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div class="span6">
<div class="carousel slide" id="carousel-589608">
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/a.jpg" />
<div class="carousel-caption">
<p>
计科院2017-2018年度先进班级评比展示活动圆满落幕
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/b.jpg" />
<div class="carousel-caption">
<p>
计科院第6届物联网创意大赛圆满落幕
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/c.jpg" />
<div class="carousel-caption">
<p>
梁宗文老师获得“2018年度四川省优秀物联网教师”...
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/d.jpg" />
<div class="carousel-caption">
<p>
“传递爱心，西柚启航”--科院“走进敬老院”活动...
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/e.jpg" />
<div class="carousel-caption">
<p>
>计算机科学学院隆重举行第八届“盛特杯”大学生课...
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/f.jpg" />
<div class="carousel-caption">
<p>
计算机科学学院隆重举行第八届“盛特杯”大学生课...
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-589608">
</li>
<li data-slide-to="1" data-target="#carousel-589608">
</li>
<li data-slide-to="2" data-target="#carousel-589608">
</li>
<li data-slide-to="3" data-target="#carousel-589608">
</li>
<li data-slide-to="4" data-target="#carousel-589608">
</li>
<li data-slide-to="5" data-target="#carousel-589608">
</li>
</ol>
</div>
</div>
<div class="span6">
<ul id="ull">
<li><a href="info/1045/4613.htm" title="计算机科学学院举办2019年寒假留校学生新春团拜会">计算机科学学院举办2019年寒假留校学生新春</a></li>
<li><a href="info/1045/4643.htm" title="计科院工会组织学院女教职工庆祝第109个“三八妇女节”">计科院工会组织学院女教职工庆祝第109个“</a></li>
<li><a href="info/1045/4633.htm" title="学术讲座——人工智能改变我们的未来生活">学术讲座——人工智能改变我们的未来生活</a></li>
<li><a href="info/1045/4603.htm" title="计算机科学学院各年级辅导员集中走访学生寝室">计算机科学学院各年级辅导员集中走访学生寝</a></li>
<li><a href="info/1045/4592.htm" title="学院召开2018年度领导班子民主生活会">学院召开2018年度领导班子民主生活会</a></li>
<li><a href="info/1045/4589.htm" title="计科院与川庆安检院技术交流大会">计科院与川庆安检院技术交流大会</a></li>
</ul>
</div>
</div>
</div>
<div class="span4">
<div id="gonav">
<h2>学术交流</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div class="span12">
<ul id="ull">
<li> <a href="info/1076/4624.htm" title="人工智能改变我们的未来生活">人工智能改变我们的未来生活</a></li>
<li> <a href="info/1076/4537.htm" title="计算时代的虚假信息传播">计算时代的虚假信息传播</a></li>
<li> <a href="info/1076/4483.htm" title="人工智能+：视界充满AI">人工智能+：视界充满AI</a></li>
<li> <a href="info/1076/4397.htm" title="零行列式策略及其网络演化动力学">零行列式策略及其网络演化动力学</a></li>
<li> <a href="info/1076/4388.htm" title="视频遇上云服务">视频遇上云服务</a></li>
<li> <a href="info/1076/4380.htm" title="计科院关于举行2018年校庆论文报告会的通知">计科院关于举行2018年校庆论文报告会的...</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="gonav">
<h2>新闻速递</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div id="span12">
<h3><a href="info/1045/4613.htm">计算机科学学院举办2019年寒假留校学生新春团拜会</a></h3>
<p>在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<span><a href="info/1045/4613.htm">详细信息</a></span>]</p>
<ul id="ull">
<li><a href="info/1045/4643.htm">计科院工会组织学院女教职工庆祝第109个“三八妇女节”</a></li>
<li><a href="info/1045/4633.htm">学术讲座——人工智能改变我们的未来生活</a></li>
<li><a href="info/1045/4603.htm">计算机科学学院各年级辅导员集中走访学生寝室</a></li>
<li><a href="info/1045/4592.htm">学院召开2018年度领导班子民主生活会</a></li>
<li><a href="info/1045/4589.htm">计科院与川庆安检院技术交流大会</a></li>
<li><a href="info/1045/4599.htm">计算机科学学院分年级召开期末年级大会</a></li>
</ul>
</ul>
</div>
</div>
</div>
<div class="span4">
<div id="gonav">
<h2>党建动态</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div class="span12">
<ul id="ull">
<li> <a href="info/1082/4593.htm" title="学院召开2018年领导班子民主生活会">学院召开2018年领导班子民主生活会</a></li>
<li> <a href="info/1082/4520.htm" title="刘翔同志任计算机科学学院党委副书记、纪委书记">刘翔同志任计算机科学学院党委副书记、...</a></li>
<li> <a href="info/1082/4512.htm" title="学院党委组织师生收看庆祝改革开放40周年大会">学院党委组织师生收看庆祝改革开放40周...</a></li>
<li> <a href="info/1082/4464.htm" title="【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会">【审核评估】学院召开本科教学工作审核...</a></li>
<li> <a href="info/1082/4424.htm" title="【聚焦评估】学院召开本科教学工作审核评估工作会">【聚焦评估】学院召开本科教学工作审核...</a></li>
<li> <a href="info/1082/4471.htm" title="学院党委开展迎校庆主题党日活动">学院党委开展迎校庆主题党日活动</a></li>
<li> <a href="info/1082/4376.htm" title="学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会">学院党委组织收看2018年全国科学道德和...</a></li>
<li> <a href="info/1082/4356.htm" title="【聚焦评估】学院召开全院教职工大会部署本学期本科审核评估迎评促建工作">【聚焦评估】学院召开全院教职工大会部...</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="gonav">
<h2>通知公告</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div class="span12">
<ul id="ull">
<li> <a href="info/1055/4638.htm">自组团出访前公示信息表（彭博）</a></li>
<li> <a href="info/1055/4627.htm">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
<li> <a href="info/1055/4626.htm">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
<li> <a href="info/1055/4600.htm">2018年秋季学期期末考试情况总结</a></li>
<li> <a href="info/1055/4597.htm">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
<li> <a href="info/1055/4588.htm">国际学术会议（ICCIS2019）征稿通知</a></li>
<li> <a href="info/1055/4584.htm">计算机科学学院领导班子2018年度民主生活会征求意见</a></li>
<li> <a href="info/1055/4578.htm">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li>
</ul>
</div>
</div>
</div>
<div class="span4">
<div id="gonav">
<h2>专题列表</h2>
<span >
<a>
More>>
</a>
</span>
</div>
<div class="row-fluid">
<div class="span12">
<ul id="ull">
<li> <a href="info/1173/2003.htm" title="中美联合高性能和大数据计算实验室">中美联合高性能和大数据计算实验室</a></li>
<li> <a href="info/1173/2004.htm" title="石油工程计算机模拟技术重点实验室">石油工程计算机模拟技术重点实验室</a></li>
<li> <a href="info/1173/2005.htm" title="思科网络技术学院教师培训中心">思科网络技术学院教师培训中心</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html源码
@charset "utf-8";
/* CSS Document */
html,*,body, div, ul,ol, li,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;}
img{vertical-align:middle;}
em{font-style:normal;}
a img, :link img, :visited img{border:0;}
a:link, a:visited{text-decoration:none;color:#666666;}
a:hover,a:focus{text-decoration:underline;color:#0573bd;text-decoration:none;}
ul, ul li{list-style-type:none;}
#top_bg{height:40px;background:#0b6cb8;box-shadow:1px 1px 7px #999;z-index:999;left:0;border-bottom:#C6C6C6 solid 1px;margin-bottom: 10px}
.nav_z{width:auto!important;height:40px;float:left;position:relative;z-index:999 ;}
#navul li{float:left;width:100px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li a:link, #navul li a:visited{color:#FFF;font-weight:500;letter-spacing:2px;}
#navul li ul{display:none;position:absolute;z-index:999;background:#0b6cb8;border:#c6c6c6 1px solid;border-bottom:none;left:-1px;}
#navul li ul li{display:block;width:100px;float:none;height:35px;position:relative;line-height:35px;border-bottom:#C6C6C6 1px solid;font-size:12px;overflow:hidden}
#navul li.navmoon{background:#0a5894;border:#C6C6C6 1px solid;width:100px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#FFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:100px;height:35px;line-height:35px;}
#navul li.navmoon ul a:hover{color:#FFF;background:#0a5894;}
#gonav{height: 40px;background-color: #ddd;margin-bottom: 10px;}
#gonav h2{float:left;background-color: #2780cb;font-size: 16px;padding-top: 0px;padding-right: 5px;padding-bottom: 0px;padding-left: 5px;color:#fff}
#gonav span{float:right;height: 40px;line-height: 40px}
#ull li{ height: 30px;line-height: 30px;font-size: 14px;color: #5c5c5c;width: 100%;background: url(img/xdd.png) no-repeat 0px 14px;text-indent: 12px;}
#ull li a{color: #5c5c5c;display: block;cursor: pointer;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
#span12 p{ margin-top: 4px;font-size: 12px;color: #999999;text-indent: 2em;line-height: 22px;padding-bottom: 4px;border-bottom: 1px dashed #eeeeee;}
#span12 h3 a{color: #0b6cb8;}
#title{ height: 112px;background: url(../img/top-bg.jpg) no-repeat;vertical-align:center}
#title form{float:right;margin-top: 41px;margin-bottom: 41px;margin-right: 10px;}
css
文件目录
实现思路（从上至下）:
Ps:所有图片通过审查元素都可以找到
搜索栏的实现，通过margin和left可以实现垂直居中
导航栏的实现，网上找的，略过
轮播图的实现以及下面的左右 2:1布局都是通过 bootstrap实现（具体实现参考 bootstrap可视化布局网站 http://www.bootcss.com/p/layoutit/）
然后每个分区里面的 信息通过 ul 列表嵌套 a 实现
链接：https://pan.baidu.com/s/1WkqyE29mPEiaJHzZV7DYVw
提取码：wuy8
原文地址：https://www.cnblogs.com/yuanzessrs/p/10527280.html
时间： 2024-10-28 20:04:36