编写河北大学官网界面
2024-03-29 16:07:39
因为这次做的是精仿，所以用到了js写方法来实现页面的隐藏，或者某种特效。还是最重要也是最困难的就是页面通过div来布局，因为涉及到div的固定漂浮，还有隐藏，当鼠标移到某个页面再更换页面，所以代码看起来比较繁琐，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>河北大学-Hebei University</title>
</head>
<style>.ce{width:240px ;height: 100%;background-color: #ffffff;float: left;}
.title
{width: 79px;height: 100%;background-color: #ffffff;text-align: center;line-height: 50px;float: left;
}.xuan{border:1px solid #CCC;background:white;position:fixed;height:600px;width:50px;z-index:100000;right:0px;top:60px;display: block;}.xuan1{border:1px solid #CCC;background-color: #ffffff;position:fixed;height:90px;width:50px;z-index:100000;right:50px;top:60px;border: none;display: block;}.xuan2{border:1px solid #CCC;background-color: #ffffff;position:fixed;height:60px;width:25px;z-index:100000;right:55px;top:160px;border: none;display: block;}.bian{border-style:solid; border-width:1px; border-color:#000;border-bottom-color:#ffffff}
.bian1 {border-style:solid; border-width:1px; border-color:#ffffff;border-bottom-color:#000;}
.bian3
{border-style:solid; border-width:1px; border-bottom-color:#000 ;border-left-color:#ffffff;border-right-color:#ffffff;border-top-color:#ffffff;
}</style>
<body>
<div style="width: 100%;height: 130px;background-color: #ffffff">
<div class="ce"></div><!--头部-->
<div style="width: 320px;height:86px;background-color:#ffffff;float: left;margin-top: 44px;"><img src="hbu\logo.png"style="width: 100%;height: 100%">
</div><div style="width: 800px;height: 130px;background-color: #ffffff;float: left"><div style="width: 100%;height: 65px;background-color: #ffffff"><input type="text" style="height:24px;width:300px;margin-left:410px;margin-top:30px;" placeholder="搜索……"autocomplete="off"/></div><div style="width: 800px;height: 15px;background-color: #ffffff"></div><div style="width: 800px;height: 50px;background-color: #ffffff"><div id="divt1"class="title"onmouseover="ch1()"onmouseout="ch11()">首页</div><div id="divt2"class="title"onmouseover="ch2()"onmouseout="ch22()">学校概况<div id="diva"style="width:158px;height:240px;z-index: 500;display:none;position:absolute;"><div id="a" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px;"onmouseover="channge1()"onmouseout="channge11()">学校简介</div><div id="b" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px"onmouseover="channge2()"onmouseout="channge22()">学校章程</div><div id="c" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px"onmouseover="channge3()"onmouseout="channge33()">历任领导</div><div id="d" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px"onmouseover="channge4()"onmouseout="channge44()">现任领导</div><div id="e" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px"onmouseover="channge5()"onmouseout="channge55()">虚拟校园</div><div id="f" style="width: 158px;height: 40px;background-color: #3385ff;text-align:left;line-height:40px"onmouseover="channge6()"onmouseout="channge66()">校园风光</div></div></div><div id="divt3"class="title"onmouseover="ch3()"onmouseout="ch33()">机构设置</div><div id="divt4"class="title"onmouseover="ch4()"onmouseout="ch44()">师资队伍</div><div id="divt5"class="title"onmouseover="ch5()"onmouseout="ch55()">学科专业</div><div id="divt6"class="title"onmouseover="ch6()"onmouseout="ch66()">招生信息</div><div id="divt7"class="title"onmouseover="ch7()"onmouseout="ch77()">人才招聘</div><div id="divt8"class="title"onmouseover="ch8()"onmouseout="ch88()">合作办学</div><div id="divt9"class="title"onmouseover="ch9()"onmouseout="ch99()">信息公开</div></div></div></div>
<!--上半部分-->
<div style="width: 100%;height: 300px;background-color: #ffffff;float: left">
<div class="ce"></div>
<div style="width: 1040px;height: 300px;background-color: #ffffff;float:left;z-index: 1;"><img src="hbu\111.jpg"style="height: 100%;width: 100%">
</div></div>
<!--下半部分-->
<div style="width: 100%;height: 600px;background-color: #ffffff;float: left;"><div class="ce"></div><div style="width:1040px;height: 20px "></div><div style="width: 1040px;height: 580px;background-color:#ffffff;float: left;"><!--下半部分中间一大块--><div style="width: 520px;height: 580px;background-color:#ffffff;float: left"><!--左边块--><div style="width: 100%;height: 50px;background-color: #ffffff;float: left" ><!--左边块标题--><div id="div9" class="bian" style="width: 150px;height: 100%;background-color: #ffffff;float: left;text-align:center;line-height:50px;" onmouseover="show1()">河大要闻</div><div id="div10" class="bian1" style="width: 150px;height: 100%;background-color: #ffffff;float: left;text-align:center;line-height:50px;" onmouseover="show2()">综合新闻</div></div><div id="div1";style="display: block;"><div style="width: 520px;height: 180px;background-color: #ffffff;"><!--左边块图片--><div style="width: 520px;height: 160px;"><img src="hbu\123.jpg"style="width: 100%;height: 100%"></div><div style="width: 100%;height: 20px;margin-top: 55px">河北大学庆祝新中国成立70周年暨迎新生文艺晚会<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div></div></div><div style="width: 100%;height: 40px;margin-top: 62px;line-height:40px;font-size: 14px">学校党委常委会召开扩大会议传达学习贯彻省委九届九次全会...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校举办河北大学-中央兰开夏传媒与创意学院新教学楼启动仪式<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校学生在“2019高教社杯全国大学生数学建模竞赛”喜获佳绩<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校集中收听收看中央宣讲团党的十九届四中全会精神宣讲报...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">第三届京津冀协同发展与区域法治创新论坛在我校举行<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">【主题教育】省委第十二巡回指导组下沉指导我校基层党组织...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">省教育厅来校调研《河北大学章程》执行情况<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">【主题教育】党委书记郭健深入基层调研指导“不忘初心、牢...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校“青春美，夕阳红”青年爱老敬老项目入选全国大学生志...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div></div><div id="div2" style="display: none;"><div style="width: 520px;height: 180px;background-color: #ffffff;"><!--左边块图片--><div style="width: 520px;height: 160px;"><img src="hbu\222.jpg"style="width: 100%;height: 100%"></div><div style="width: 100%;height: 20px;margin-top: 55px">“我和我的祖国”河北大学庆祝中华人民共和国成立70周年师生歌咏比赛<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div></div></div><div style="width: 100%;height: 40px;margin-top: 62px;line-height:40px;font-size: 14px">河北大学-中央兰开夏传媒与创意学院举办第二届联合管理委...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校举办第三届计算机文化节开幕式暨首场专家报告会<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">河北司法警官职业学院一行来我校交流微电影教学工作<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">【主题教育】我校启动主题教育督查工作<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校召开“不忘初心、牢记使命”专项整治工作推进会<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校举办消防安全管理人员培训会<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">省教育厅关于破解政府会计制度实施过程中存在问题研讨会在...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">副校长李金善到历史学院、期刊社调研<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px">我校“青春美，夕阳红”青年爱老敬老项目入选全国大学生志...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div></div></div><div style="width: 520px;height: 350px;background-color:#ffffff;float: left"><!--左边块--><div class="bian3" style="width: 100%;height: 50px;background-color: #ffffff;float: left" ><!--左边块标题--><div id="div11"class="bian" style="width: 150px;height: 100%;background-color: #ffffff;float: left;text-align:center;line-height:50px;" onmouseover="show5()">通知公告</div><div id="div12" class="bian1" style="width: 150px;height: 100%;background-color: #ffffff;float: left;text-align:center;line-height:50px;" onmouseover="show6()">学习动态</div></div><div id="div7" style="width:520px;height:290px;background-color:#ffffff;display: block"><!--左边块--><div style="width: 100%;height: 20px;margin-top: 55px;margin-left: 15px">关于组织收看2019年全国科学道德和学风建设宣讲教育报告会...<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;margin-top: 10px;line-height:40px;font-size: 14px;margin-left: 15px">关于举行对口合作签约仪式的通知<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">关于组织开展河北大学第三届计算机文化节的通知<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 20px;margin-top: 10px;margin-left: 15px">关于2020年度因公临时出国（境）计划申报立项的通知<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;margin-top: 10px;line-height:40px;font-size: 14px;margin-left: 15px">关于2020年汉语教师志愿者报名的通知<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">关于组织开展2019年实验室安全培训及考试的通知<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">关于河北大学图书馆微信公众号上线“主题书柜”数字阅读产...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">关于召开临床医学专业认证专家反馈会的通知<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div></div><div id="div8" style="width:520px;height:290px;background-color:#ffffff;display: none"><!--左边块--><div style="width: 100%;height: 20px;margin-top: 55px;margin-left: 15px">学术讲座预告（社会语言学的研究对象、理论范畴与最新进展）<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;margin-top: 10px;line-height:40px;font-size: 14px;margin-left: 15px">学术讲座预告（中国文学在马来西亚的译介）<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">学术讲座预告（外语“金师”团队建设原则与途径）<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 20px;margin-top: 10px;margin-left: 15px">学术讲座预告（先进电子材料研究进展与发展趋势）<div style="width: 98%;height: 1px;margin-top: 10px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;margin-top: 10px;line-height:40px;font-size: 14px;margin-left: 15px">学术预告：基于“卓越研究框架”的英国大学科研质量评估机制<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;font-size: 14px" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">上海海事大学容新芳教授应邀来我校作讲座<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">学术报告（培养计算思维，迎接智能社会）<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 15px">学术讲座预告（翻译研究的新课题—以中译日为例）<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div></div></div><div style="width: 520px;height: 245px;background-color:#ffffff;float: left;margin-top: 30px"><!--左边块--><div class="bian3" style="width: 100%;height: 50px;background-color: #ffffff;float: left" ><!--左边块标题--><div class="bian" style="width: 150px;height: 100%;background-color: #ffffff;float: left;text-align:center;line-height:50px;" onmouseover="show5()">通知公告</div></div><div style="width: 520px;height: 180px;background-color: #ffffff;margin-top: 10px"><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 13px">中国人民大学等4高校“对口合作”河北大学签约<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top: -36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 13px;margin-top: 50px">河北大学与4高校签署协议，将在学科建...<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top:-36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 13px;margin-top: 0px">国内四所名校与河北大学签约“联姻”<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top:-36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div><div style="width: 100%;height: 40px;line-height:40px;font-size: 14px;margin-left: 13px;margin-top: 00px">河北大学举行思政课微电影大赛颁奖典礼<div style="width: 98%;height: 1px;margin-top: -7px"><hr style="height:1px;border:none;border-top:1px dashed #585858;" /></div><div style="width: 50px;height:32px;color: #990000;margin-top:-36px;margin-left: 467px;line-height:32px;font-size: 12px">[11-12]</div></div></div></div></div>
<div style="width: 100%;height: 250px;background-color: #e0e0e0;margin-top: 625px"><!--底栏--><div class="ce" style="background-color: #e0e0e0"></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 30px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">校务公开</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">书记信箱</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">校长信箱</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">信息公开</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">接待预约</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">教育教学</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">教务系统</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">精品课程</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">教学平台</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">e6平台</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">教师在线</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">图书资料</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">图书馆</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">档案馆</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">学术期刊</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">校园文化</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">航标网</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">红色战线</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">弘毅</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">学生管理</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">就业创业</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">学生事务</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">办公系统</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">OA系统</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">旧版系统</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">认证登陆</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">统一认证</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">密码找回</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">上网认证</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">VPN登陆</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">微信企业号</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">网络应用</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">财务系统</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">缴费平台</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">政策法规</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">网络党校</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">招标公告</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">大型仪器平台</div></div><div style="width: 100px;height: 100%;background-color: #e0e0e0;margin-left: 10px;float: left"><div style="width: 100%;height: 30px;background-color: #e0e0e0;margin-top: 40px;text-align:center;line-height:30px;font-size:15px;color: #22132d">后勤服务</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">安全平台</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">后勤服务</div><div style="width: 100%;height: 25px;background-color: #e0e0e0;text-align:center;line-height:25px;font-size:12px;color: #585858">餐饮服务</div></div></div>
<div style="width: 100%;height: 100px;background-color: #17479e;"><div style="width: 1040px;height: 100px;margin-left: 240px;position: absolute"><div style="width: 120px;height: 20px;margin-left: 50px;background-color: #17479e;margin-top: 28px;font-size:12px;color: #c8c8c8">版权所有：河北大学</div>
<div style="width: 200px;height: 20px;margin-left: 50px;background-color:#17479e;margin-top: 10px;font-size: 12px;color: #c8c8c8;float: left">地址：河北省保定市五四东路180号
</div><div style="width: 100px;height: 20px;margin-left: 0px;background-color: #17479e;margin-top: 10px;font-size: 12px;color: #c8c8c8;float: left">邮编：071002</div><div style="width: 96px;height: 20px;float: left;background-color:#17479e;margin-top: 13px;";><img src="hbu\333.png"></div>
<div style="height:20px;width: 200px;background-color: #17479e;float: left;margin-top: 10px;font-size: 12px;color: #c8c8c8; ">冀ICP备05007415号-1
</div><div style="width: 20px;height: 20px;background-color:#17479e;float: left;margin-top: 9px;"><img src="hbu\444.png"style="height: 100%;width: 100%"></div><div style="width: 200px;height: 20px;background-color: #17479e;margin-top: 10px;font-size: 12px;color: #c8c8c8;float: left">冀公网安备 13060602000986号</div><div style="width: 80px;height: 70px;background-color:#17479e;float: left;margin-top: -30px"><img src="hbu\555.png"></div></div></div>
<div id="div4" class="xuan1"onclick="show3()">
<img src="hbu\13.png"style="width: 100%;height: 100%">
</div>
<div id="div5" class="xuan2"onclick="close1()"><img src="hbu\14.png"style="width: 100%;height: 100%">
</div>
<div id="div3" class="xuan"><div style="width: 50px;height: 50px;"><img src="hbu\1.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\2.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\3.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\4.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\5.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\6.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\7.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\8.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\9.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\10.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\11.png"style="height: 100%;width: 100%"></div><div style="width: 50px;height: 50px;"><img src="hbu\12.png"style="height: 100%;width: 100%"></div></div></body>
<script type="text/javascript">function show1(){document.getElementById("div1").style.display = "block";document.getElementById("div2").style.display="none";document.getElementById("div9").style.borderColor='#000';document.getElementById("div10").style.borderColor='#ffffff';}function show2(){document.getElementById("div1").style.display = "none";document.getElementById("div2").style.display="block";document.getElementById("div9").style.borderColor='#ffffff';document.getElementById("div10").style.borderColor='#000';}function close1() {document.getElementById("div3").style.display = "none";document.getElementById("div4").style.marginRight="-50px"document.getElementById("div5").style.marginRight="-50px"}function show3() {document.getElementById("div3").style.display = "block";document.getElementById("div4").style.marginRight="0px"document.getElementById("div5").style.marginRight="0px"}function show5(){document.getElementById("div7").style.display = "block";document.getElementById("div8").style.display="none";document.getElementById("div11").className="bian";document.getElementById("div12").className="bian1";}function show6(){document.getElementById("div7").style.display = "none";document.getElementById("div8").style.display="block";document.getElementById("div11").className="bian1";document.getElementById("div12").className="bian";}function ch1() {document.getElementById("divt1").style.background="#3385ff";}function ch11() {document.getElementById("divt1").style.background="#ffffff";}function ch2() {document.getElementById("divt2").style.background="#3385ff";document.getElementById("diva").style.display="block"}function ch22() {document.getElementById("divt2").style.background="#ffffff";document.getElementById("diva").style.display="none"} function ch3() {document.getElementById("divt3").style.background="#3385ff";}function ch33() {document.getElementById("divt3").style.background="#ffffff";} function ch4() {document.getElementById("divt4").style.background="#3385ff";}function ch44() {document.getElementById("divt4").style.background="#ffffff";} function ch5() {document.getElementById("divt5").style.background="#3385ff";}function ch55() {document.getElementById("divt5").style.background="#ffffff";} function ch6() {document.getElementById("divt6").style.background="#3385ff";}function ch66() {document.getElementById("divt6").style.background="#ffffff";} function ch7() {document.getElementById("divt7").style.background="#3385ff";}function ch77() {document.getElementById("divt7").style.background="#ffffff";} function ch8() {document.getElementById("divt8").style.background="#3385ff";}function ch88() {document.getElementById("divt8").style.background="#ffffff";} function ch9() {document.getElementById("divt9").style.background="#3385ff";}function ch99() {document.getElementById("divt9").style.background="#ffffff";}function channge1() {document.getElementById("a").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge11() {document.getElementById("a").style.background="#3385ff";}function channge2() {document.getElementById("b").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge22() {document.getElementById("b").style.background="#3385ff";}function channge3() {document.getElementById("c").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge33() {document.getElementById("c").style.background="#3385ff";}function channge4() {document.getElementById("d").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge44() {document.getElementById("d").style.background="#3385ff";}function channge5() {document.getElementById("e").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge55() {document.getElementById("e").style.background="#3385ff";}function channge6() {document.getElementById("f").style.background=" #17479e";document.getElementById("divt2").style.background="#3385ff";}function channge66() {document.getElementById("f").style.background="#3385ff";}
</script>
</html>
页面访问链接
编写河北大学官网界面相关推荐
- 前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
- 由酷狗官网界面改造成的焦点新闻插件
焦点广告插件,之前最熟悉的莫过于FLASH制作的,结合JS调入数据,定时进行切换,同时也 能根据自己需要选择.而现在随着jquery的应用,类似焦点广告等插件都是使用JS来实现,相信大家也看到过很多类 ...
- 绝地求生官网界面网页（pc端）
绝地求生官网思路 1.实现效果 2.效果与功能显示 3.步骤 *搭建基本结构(3)* *工具条,导航条(1)* *工具条,导航栏内部渲染(1)* *第一屏全屏视频(5)* *菜单条(关联页面)(2)* ...
- 前端 学完HTML+CSS 自己动手写出QQ官网导航栏
HTML+CSS实现QQ头部栏 一.找到QQ官网界面 在浏览器搜索QQ,找到QQ官网 我们做的就是QQ官网的头部内容 二.准备 (一).创建一个index.html文件编写html代码 (二).建一个 ...
- Docker的官网在线--中文教程
1.官网界面:https://www.docker.com/tryit/ In this 10-minute tutorial, see how Docker works first-hand: Yo ...
- 在 KEIL 官网下载 Pcks
在 KEIL 官网下载 Pcks 直接单击,进入下载地址 如果想进一步熟悉怎么进入的,详细步骤如下 打开 KEIL 官网首页 在 Product Information 下,单击 Supported ...
- Linux 基于官网快速安装zabbix5.0图文教程
基于官网快速安装zabbix5.0图文教程 前言 1选择下载zabbix的版本和配置 访问官网下载地址 2.安装和配置zabbix 安装zabbix资源库 安装Zabbix server,Web前端, ...
- coppeliasim/vrep官网软件安装包（免费百度网盘链接）
2021年10月23日更新说明:增加了官网链接 增加了CoopeliaSim Edu V4.2.0的windows.ubuntu.macOS各系统的软件包@meng 2022年4月21日更新说明:增加 ...
- Match公链官网正式上线，链接Web3加速落地
区块链生态系统应为所有人服务,但有时候似乎传统互联网用户很难浏览DApps.此外,该空间还面临其他挑战,如流量迁移以及缺乏优先考虑用户体验并能吸引大量流量的重磅产品. 考虑到这一点,可以说Web3生态 ...
最新文章
- MySQL 语句整理 2019-5-3
- uniapp 的使用
- nginx rtmp 编码_基于Nginx的媒体服务器技术
- ICCV 2019 | 通过多标签相关性研究提升神经网络视频分类能力
- maven-settings.xml的那些事
- 家装强电弱电布线图_家装水电施工标准（图文版），装修小白一眼也能看懂。...
- geojson地图_Geojson地图pandas数据帧
- linux 系统文件目录颜色及特殊权限对应的颜色
- 吴恩达机器学习练习3：Logistic regression(Feedforward propagation neural networks)
- java http服务_springboot官方例子中文翻译--RESTful服务启用CORS支持
- Android 多媒体开发学习之加载大图片
- Windows 10 Install SQL Server 2005
- 基于微信小程序的考勤打卡系统
- 7-10 哈利·波特的考试
- mail企业邮箱登录入口有哪些？
- Unity 接入Apple登录
- 多个PDF文件怎么合并？PDF合并的方法教程
- 风潮唱片-远方的寂静;专辑
- C#腾讯地图Web端定位地址搜索及手机导航
- 计算机专业去支教学到什么,支教的收获及感悟4篇_大学生支教感想