用HTML+CSS编写一个计科院网站首页的静态网页
1.效果如图:
2.代码如下:
<!DOCTYPE html>
<html><head><title>组织机构-西南石油大学 - 计算机科学学院</title><META Name="keywords" Content="西南石油大学,计算机科学学院" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"><link rel="stylesheet" type="text/css" href="../css/style.css"><link rel="stylesheet" type="text/css" href="../css/publice.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.soChange.js"></script>
<script type="text/javascript">
$(function(){
$(".mainmenu dl").hide();
$("li.mainmenu").hover(function(){
$(this).find("dl").stop(true,true);
$(this).find("dl").slideDown();
},function(){
$(this).find("dl").stop(true,true);
$(this).find("dl").slideUp();
});
})
</script>
<!--Announced by Visual SiteBuilder 9-->
<link rel="stylesheet" type="text/css" href="../_sitegray/_sitegray_d.css" />
<script language="javascript" src="../_sitegray/_sitegray.js"></script>
<!-- CustomerNO:7765626265723230776447565352574103080004 -->
<link rel="stylesheet" type="text/css" href="../dpzw.vsb.css" />
<script type="text/javascript" src="/system/resource/js/vsbscreen.min.js" id="_vsbscreen" devices="pc|mobile|pad"></script>
<script type="text/javascript" src="/system/resource/js/counter.js"></script>
<script type="text/javascript">_jsq_(1112,'/dpzw.jsp',-1,1459835785)</script>
</head>
<body style="position: relative"><!--top s-->
<div class="topWrap clearfix">
<div style="width:100%;height:112px;background:url(../img/top-bg.jpg) no-repeat center top">
<div class="topDiv">
<div class="topR fr"><script language="javascript" src="/system/resource/js/dynclicks.js"></script><script language="javascript" src="/system/resource/js/openlink.js"></script><div class="topR_t fr" style="color:#fff;">
</div>
<script type="text/javascript">
function _nl_ys_check_2(){
var keyword = document.getElementById('showkeycode192730_2').value;
if(keyword==null||keyword==""){
alert("请输入关键字搜索");
return false;
}
if(window.toFF==1)
{
document.getElementById("lucenenewssearchkey192730").value = Simplized(keyword );
}else
{
document.getElementById("lucenenewssearchkey192730").value = keyword;
}
var base64 = new Base64();
document.getElementById("lucenenewssearchkey192730").value = base64.encode(document.getElementById("lucenenewssearchkey192730").value);
new VsbFormFunc().disableAutoEnable(document.getElementById("showkeycode192730_2"));
return true;
}
function submitForm()
{
document.getElementById("au1a").submit();
}
</script>
<script type="text/javascript">
function test3()
{
var tempStr=document.getElementById('showkeycode192730_2').value;
if(tempStr=="请输入关键字搜索")
{
document.getElementById('showkeycode192730_2').value="";
}
}
function test4()
{
var tempStr=document.getElementById('showkeycode192730_2').value;
if(tempStr=="")
{
document.getElementById('showkeycode192730_2').value="请输入关键字搜索";
}
}
</script>
<div class="Search">
<form action="../ssjg.jsp?wbtreeid=1112" method="post" id="au1a" name="au1a" onsubmit="return _nl_ys_check_2()">
<input type="hidden" id="lucenenewssearchkey192730" name="lucenenewssearchkey" value=""><input type="hidden" id="_lucenesearchtype192730" name="_lucenesearchtype" value="1"><input type="hidden" id="searchScope192730" name="searchScope" value="0">
<input type="text" value="请输入关键字搜索" name="showkeycode" class="search_text" onfocus="test3()" onblur="test4()" id="showkeycode192730_2" />
<div class="fdj fr"> <input type="submit" class="button pngFix" value="" style="cursor: hand"></div>
</form>
</div><script language="javascript" src="/system/resource/js/base64.js"></script><script language="javascript" src="/system/resource/js/formfunc.js"></script>
</div></div>
</div>
</div><!--nav--><div class="navWrap clearfix" style="width: 974px">
<div class="nav">
<ul>
<li>
<a class="link" href="../index.htm">网站首页</a>
</li>
<li class="mainmenu">
<a class="link" href="xyjj.htm">学院概况</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="xyjj.htm">学院简介</a></dd>
<dd><a href="xyld.htm">学院领导</a></dd>
<dd><a href="zzjg.htm">组织机构</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../bksjy/jsjkxyjszy.htm">本科生教育</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../bksjy/jsjkxyjszy.htm">计算机科学与技术专业</a></dd>
<dd><a href="../bksjy/rjgczy.htm">软件工程专业</a></dd>
<dd><a href="../bksjy/wlgczy.htm">网络工程专业</a></dd>
<dd><a href="../bksjy/wlwgczy.htm">物联网工程专业</a></dd>
<dd><a href="../bksjy/xxglyxxxtzy.htm">信息管理与信息系统专业</a></dd>
<dd><a href="../bksjy/wlkjaqzy.htm">网络空间安全专业</a></dd>
<dd><a href="../bksjy/sjkxydsjjszy.htm">数据科学与大数据技术专业</a></dd>
<dd><a href="../bksjy/dwrchzpyxm.htm">对外人才合作培养项目</a></dd>
<dd><a href="../bksjy/ksxx.htm">考试信息</a></dd>
<dd><a href="../bksjy/xkzxxx.htm">选课重修信息</a></dd>
<dd><a href="../bksjy/tzgg.htm">通知公告</a></dd>
<dd><a href="../bksjy/zlxz.htm">资料下载</a></dd>
<dd><a href="../bksjy/gxkjssp.htm">公选课教师视频</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../yjsjy/zsjz.htm">研究生教育</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../yjsjy/zsjz.htm">招生简章</a></dd>
<dd><a href="../yjsjy/jsjkxyjsyjxk.htm">计算机科学与技术一级学科</a></dd>
<dd><a href="../yjsjy/rjgcyjxk.htm">软件工程一级学科</a></dd>
<dd><a href="../yjsjy/wlkjaqyjxk.htm">网络空间安全一级学科</a></dd>
<dd><a href="../yjsjy/yjsds.htm">研究生导师</a></dd>
<dd><a href="../yjsjy/yjsjztx.htm">研究生奖助体系</a></dd>
<dd><a href="../yjsjy/tzgg.htm">通知公告</a></dd>
<dd><a href="../yjsjy/zlxz.htm">资料下载</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../szdw/js.htm">师资队伍</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../szdw/js.htm">教授</a></dd>
<dd><a href="../szdw/fjs.htm">副教授</a></dd>
<dd><a href="../szdw/js1.htm">讲师</a></dd>
<dd><a href="../szdw/syry.htm">实验人员</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../kxyj/kytd.htm">科学研究</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../kxyj/kytd.htm">科研团队</a></dd>
<dd><a href="../kxyj/kypt.htm">科研平台</a></dd>
<dd><a href="../kxyj/kycg.htm">科研成果</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../xsgz/gzdt.htm">学生工作</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../xsgz/gzdt.htm">工作动态</a></dd>
<dd><a href="../xsgz/tzgg.htm">通知公告</a></dd>
<dd><a href="../xsgz/kwcxsj.htm">课外创新实践</a></dd>
<dd><a href="../xsgz/bysjy.htm">毕业生就业</a></dd>
<dd><a href="../xsgz/xlzc.htm">心灵之窗</a></dd>
<dd><a href="../xsgz/qcfc.htm">青春风采</a></dd>
<dd><a href="../xsgz/zlxz.htm">资料下载</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../info/1189/4517.htm">招生工作</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../zsgz/xyjs.htm">学院介绍</a></dd>
<dd><a href="../zsgz/bysjyqx.htm">毕业生就业去向</a></dd>
<dd><a href="../zsgz/yxbysjj.htm">优秀毕业生简介</a></dd>
<dd><a href="../zsgz/xshj.htm">学生获奖</a></dd>
<dd><a href="../zsgz/jyxyjs.htm">精英校友介绍</a></dd>
<dd><a href="../zsgz/zsgzxcbd.htm">招生工作宣传报道</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../info/1183/2625.htm">实验中心</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../syzx/zxjj.htm">中心简介</a></dd>
<dd><a href="../syzx/syfs.htm">实验分室</a></dd>
<dd><a href="../syzx/gzzd.htm">规章制度</a></dd>
<dd><a href="../syzx/zlxz.htm">资料下载</a></dd>
<dd><a href="http://syskf.swpu.edu.cn">开放预约</a></dd>
</dl>
</li>
<li class="mainmenu">
<a class="link" href="../djzc/djdt.htm">党建之窗</a>
<!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd><a href="../djzc/djdt.htm">党建动态</a></dd>
<dd><a href="../djzc/xxyd.htm">学习园地</a></dd>
<dd><a href="../djzc/dwzwgk.htm">党务政务公开</a></dd>
<dd><a href="../djzc/zlxz.htm">资料下载</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".mainmenu dl").hide();
</script><!--banner--> <div class="banner_three">
<div class="eachBox">
<div class="changeBox_a1" id="change_32">
<div class="changeDiv">
<a target="_blank" href="../info/1033/4634.htm" title=""><img src="../images/welcome.jpg" /></a>
</div>
<div class="changeDiv">
<img src="../images/main-zs.jpg" style="width:100%; height:200px;" />
</div>
<ul class="ul_change_a2">
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>
</div><!--main-->
<div class="mainWrap clearfix"><div class="main_tit">
<div class="main_titT main_titTa">
<img src="../img/bri_icon1.png">
<a href="../index.htm">网站首页</a>>
<a href="xyjj.htm">学院概况</a>>
<a href="zzjg.htm" class="cur">组织机构</a>
</div>
</div>
<div class="main_con">
<div class="main_conL">
<div class="main_conLT">
<dl><dt>学院概况</dt><dd><a href="xyjj.htm">学院简介</a></dd>
<dd><a href="xyld.htm">学院领导</a></dd>
<dd><a href="zzjg.htm" class="cur">组织机构</a></dd>
</dl></div>
<div class="informBox informBoxb informBoxb1"><script type="text/javascript">
function _nl_ys_check(){
var keyword = document.getElementById('showkeycode192758').value;
if(keyword==null||keyword==""){
alert("请输入你要检索的内容！");
return false;
}
if(window.toFF==1)
{
document.getElementById("lucenenewssearchkey192758").value = Simplized(keyword );
}else
{
document.getElementById("lucenenewssearchkey192758").value = keyword;
}
var base64 = new Base64();
document.getElementById("lucenenewssearchkey192758").value = base64.encode(document.getElementById("lucenenewssearchkey192758").value);
new VsbFormFunc().disableAutoEnable(document.getElementById("showkeycode192758"));
return true;
}
function submitForm()
{
document.getElementById("au7a").submit();
}
</script>
<form action="../ssjg.jsp?wbtreeid=1112" method="post" id="au7a" name="au7a" onsubmit="return _nl_ys_check()" style="display: inline">
<input type="hidden" id="lucenenewssearchkey192758" name="lucenenewssearchkey" value=""><input type="hidden" id="_lucenesearchtype192758" name="_lucenesearchtype" value="1"><input type="hidden" id="searchScope192758" name="searchScope" value="1">
<div class="dynamic dynamicc"><h2>站内搜索</h2></div>
<input id="showkeycode192758" type="text" class="search_text" name="showkeycode" value="请输入关键字进行搜索" onfocus="if(this.value=='请输入关键字进行搜索')this.value='';" onblur="if(this.value=='')this.value='请输入关键字进行搜索';" />
<input type="submit" value="搜索" class="h_button" />
</form>
<div class="zp_pic">
</div></div></div>
<script language="javascript" src="/system/resource/js/ajax.js"></script><script language="javascript">_getBatchClickTimes('null',1459835785,'wbnews','u9')</script>
<script>function seeContenta9(contentid,size,displayid){ document.getElementById(contentid).innerHTML = '['; for(var i=0;i<=size;i++){ var allcontentid = contentid+(i+1); if(allcontentid==displayid){ document.getElementById(contentid).innerHTML += " <span id='"+allcontentid+"' name='"+allcontentid+"' >"+(i+1)+"</span> "; document.getElementById(displayid).style.display = 'block'; }else{ document.getElementById(contentid).innerHTML += " <span style='cursor:pointer' id='"+allcontentid+"' name='"+allcontentid+"' onclick=seeContenta9('"+contentid+"','"+size+"','"+allcontentid+"') >"+(i+1)+"</span> "; document.getElementById(allcontentid).style.display = 'none'; } } document.getElementById(contentid).innerHTML += ']';}</script>
<script>_addDynClicks('wbnews',1459835785,1230)</script>
<div class="main_conR">
<h2>组织机构</h2>
<div class="main_conRC">
<div id="vsb_content_1230_u91"><div id="vsb_content"><p style="text-align: left;"><img src="/__local/3/E9/FC/1485E79DC2B55E1EDACD65B1FA6_76F900F8_286E5.png" alt="组织结构" vsbhref="vurl" vurl="/_vsl/3E9FC1485E79DC2B55E1EDACD65B1FA6/76F900F8/286E5" vheight="" width="400" vwidth="400" orisrc="/__local/3/E9/FC/1485E79DC2B55E1EDACD65B1FA6_76F900F8_286E5.png" class="img_vsb_content"></p></div></div>
<p style="text-align:right; margin-top:40px;">更新时间：2018年11月20日</p>
</div>
<span id="vsb_content_1230_u9" name="vsb_content_1230_u9"></span><br /><br />
</div>
</div></div>
<div class="footDiv_three">
<div class="footDiv_one">
<div class="foot_one">
<p><div>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div></p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//切换对象为其他，这里为包含图片和标题的层
$('#change_32 div.changeDiv').soChange({//对象指向层，层内包含图片及标题
thumbObj:'#change_32 .ul_change_a2 span',
thumbNowClass:'on'//自定义导航对象当前class为on
});
});
</script>
</body></html>
浙公网安备 33010602011771号