<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="网页关键字"/>
<meta name="description" content="网页简短描述"/>
<meta name="author" content=""/>
<title>紫金主页面</title>
<link rel="stylesheet" href="css/homepage.css">
<script src="js/homepage.js" type="text/javascript"></script>
<style type="text/css">
p{
animation: name 20s linear 0s;
}
</style>
</head>
<body>
<div class="div1">
<div class="d1-h1">
<h1>
<img src="img/29381f30e924b8993f5a3b4661061d950a7bf66e.jpg.png" alt="" id="d1-img">
南京理工大学紫金学院
</h1>
<ul>
<li>(学生|</li>
<li>教职工|</li>
<li>教师|</li>
<li>校友|</li>
<li>访客)<a href="登陆页面.html">登陆</a></li>
</ul>
</div>
<div id="d1-ul2">
<ul>
<li><a href="学校概况.html#学校概况">学校概况</a></li>
<li><a href="学校概况.html#学校概况">机构设置</a></li>
<li><a href="学校概况.html#学校概况">招生就业</a></li>
<li><a href="学校概况.html#学校概况">人才培养</a></li>
<li><a href="学校概况.html#学校概况">科学研究</a></li>
<li><a href="学校概况.html#学校概况">合作交流</a></li>
<li><a href="学校概况.html#学校概况">校园服务</a></li>
<li><a href="学校概况.html#学校概况">信息公开</a></li>
</ul>
</div>
</div>
<div class="add">
<div id="add-1">
<ul>
<li><a href="学校概况.html#学校概况">学校概况</a></li>
<li><a href="学校概况.html#学校概况">机构设置</a></li>
<li><a href="学校概况.html#学校概况">招生就业</a></li>
<li><a href="学校概况.html#学校概况">人才培养</a></li>
<li><a href="学校概况.html#学校概况">科学研究</a></li>
<li><a href="学校概况.html#学校概况">合作交流</a></li>
<li><a href="学校概况.html#学校概况">校园服务</a></li>
<li><a href="学校概况.html#学校概况">信息公开</a></li>
</ul>
</div>
<div id="add-2">
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
<ul>
<a href="学校概况.html#学校概况"><li>学校概况</li></a>
<a href="学校概况.html#学校概况"><li>机构设置</li></a>
<a href="学校概况.html#学校概况"><li>招生就业</li></a>
<a href="学校概况.html#学校概况"><li>人才培养</li></a>
<a href="学校概况.html#学校概况"><li>科学研究</li></a>
<a href="学校概况.html#学校概况"><li>合作交流</li></a>
<a href="学校概况.html#学校概况"><li>校园服务</li></a>
<a href="学校概况.html#学校概况"><li>信息公开</li></a>
</ul>
</div>
</div>
<div class="div2">
<img src="img/d2-1.jpg" alt="" width="100%" height="100%">
</div>
<div class="div3">
<div id="d3-img" height="200px" width="100%" style="bottom: -220px;">
<p><img src="img/d3-img-图1.jpg" alt="" width="100%" height="200px"></p>
<p><img src="img/d3-img-图2.jpg" alt="" width="100%" height="200px"></p>
<p><img src="img/d3-img-图3.jpg" alt="" width="100%" height="200px"></p>
<p><img src="img/d3-img-图4.jpg" alt="" width="100%" height="200px"></p>
<p><img src="img/d3-img-图5.jpg" alt="" width="100%" height="200px"></p>
</div>
<div id="d3-ul1">
<ul>
<option><a href="紫金新闻页面.html"style="color: red;">新闻动态</a></option>
<li><a href="紫金新闻页面.html">我校开展电影《重生》观影...2019-11-27</a></li>
<li><a href="紫金新闻页面.html">我校龙狮队在全国舞龙舞狮...2019-11-26</a></li>
<li><a href="紫金新闻页面.html">展教师风采 扬紫金精神，在...2019-11-25</a></li>
<li><a href="紫金新闻页面.html">我校学子在2019年“外研社...2019-11-22</a></li>
<li><a href="紫金新闻页面.html">我校理论学习中心组召开集...2019-11-20</a></li>
<li><a href="紫金新闻页面.html">我校人文学子斩获外研社杯英...2019-11-19</a></li>
<li><a href="紫金新闻页面.html">召开“不忘初心，牢记使命”...2019-11-18</a></li>
</ul>
</div>
<div id="d3-ul2">
<ul>
<option><a href="紫金新闻页面.html"style="color: red;">院系风采</a></option>
<li><a href="紫金新闻页面.html">第一党支部在“四重四亮”中... 2019-11-29</a></li>
<li><a href="紫金新闻页面.html">经济管理学院召开期中教学检... 2019-11-28</a></li>
<li><a href="紫金新闻页面.html">机械学院期中教学检查专项工... 2019-11-27</a></li>
<li><a href="紫金新闻页面.html">经济管理学院参加第五届中国... 2019-11-25</a></li>
<li><a href="紫金新闻页面.html">计算机学院教师第二党支部开... 2019-11-22</a></li>
<li><a href="紫金新闻页面.html">机械学院党总支“牢记初心不... 2019-11-22</a></li>
<li><a href="紫金新闻页面.html">机械学院党总支“牢记初心不... 2019-11-22</a></li>
</ul>
</div>
<div id="d3-ul3">
<ul>
<option><a href="紫金新闻页面.html"style="color: red;">通知公告</a></option>
<li><a href="紫金新闻页面.html">紫金学院图书馆期刊招标公告补充通知 2019-11</a></li>
<li><a href="紫金新闻页面.html">紫金学院图书馆期刊招标公告<br> 2019-11</a></li>
<li><a href="紫金新闻页面.html">南京理工大学紫金学院国际交流中心和<br>实训楼地质勘察工程项目招标公告<br> 2019-11</a></li>
<li><a href="紫金新闻页面.html">南京理工大学紫金学院2019年经管学院实验室采购招标公告 2019-11</a></li>
</ul>
</div>
</div>
<div class="div4">
<div id="d4-ul1">
<ul>
<li>
党建专题
<img src="img/d4-图1.png" alt="">
</li>
</ul>
</div>
<div id="d4-ul2">
<ul>
<li>
紫金荣誉
<img src="img/d4-图2.png" alt="">
</li>
</ul>
</div>
<div id="d4-ul3">
<ul>
<li>
媒体聚焦
<img src="img/d4-图3.png" alt="">
</li>
</ul>
</div>
<div id="d4-ul4">
<ul>
<li>
校园亮点
<img src="img/d4-图4.png" alt="">
</li>
</ul>
</div>
</div>
<div class="div5">
<div id="d5-left">
联系方式:12345678
<br>邮编：5646277
<br>版权所有：某某某有限公司
</div>
<div id="d5-center" >
诚实 勤奋 求实 创新
</div>
<div id="d5-right">
<a href="http://zj.njust.edu.cn/">友情连接</a>
</div>
<br /><br /><br><br>
<div id="d5-bottom">
某ICP备456789号某公网安备 12345678901号
</div>
</div>
</body>
</html>
// CSS部分
body{
margin: 0;
padding: 0;
font-family:仿宋;
background-color: #871685;
}
a{
color: white;
text-decoration: none;
}
li{
list-style-type: none;
}
.div1{
width: 100%;
height: 170px;
display: inline-block;
background: url(../img/headerbg.jpg) repeat fixed center;
}
#d1-img{
max-height: 80px;
}
.div1 h1{
font-size: 45px;
color: lightgoldenrodyellow;
position: absolute;
left: 70px;
}
.div1 ul li{
color: white;
float:left;
}
.d1-h1 ul{
position: absolute;
top: 90px;
right: 5px;
float: right;
}
#d1-ul2{
position: relative;
top:130px;
}
#d1-ul2 ul li{
align: center;
font-size: 20px;
padding-left: 90px;
}
.add{
width: 100%;
opacity: 0;
background-color: gray;
}
#add-1{
position: relative;
}
#add-1 ul{
position: absolute;
top: -44px;
}
.add ul li{
float:left;
align: center;
font-size: 20px;
padding-left: 90px;
}
#add-2{
position: absolute;
}
#add-2 ul li{
color: black;
font-size: 15px;
letter-spacing: 2px;
word-spacing: 90px;
padding-left: 100px;
}
#add-2 li:hover{
color: yellow;
}
.add:hover{
opacity: 1;
height: 300px;
}
.div2{
height: 470px;
}
.div3{
width: 100%;
height: 250px;
background-color: #edeadf;
}
#d3-img{
max-height: 200px;
overflow: hidden;
width: 24%;
float: left;
}
.div3 option{
font-weight: 900;
font-size: 25px;
color: red;
}
#d3-ul1,#d3-ul2{
line-height: 25px;
float: left;
}
#d3-ul3{
line-height: 18px;
width: 24%;
float: left;
}
#d3-ul1 a,#d3-ul2 a,#d3-ul3 a{
color: black;
}
#d3-ul1 a:hover,#d3-ul2 a:hover,#d3-ul3 a:hover{
color: #73116F;
}
#d3-ul1 li{
list-style-type: disc;
}
#d3-ul2 li{
list-style-type: circle;
}
#d3-ul3 li{
list-style-type: square;
}
@keyframes name{
from{
position: relative;
transform: translateY(0);
}
19.9%{
transform: translateY(0);
}
20%{
transform: translateY(-220px);
}
25%{
transform: translateY(-220px);
}
44.9%{
transform: translateY(-220px);
}
45%{
transform: translateY(-440px);
}
50%{
transform: translateY(-440px);
}
69.9%{
transform: translateY(-440px);
}
70%{
transform: translateY(-660px);
}
75%{
transform: translateY(-660px);
}
94.9%{
transform: translateY(-660px);
}
95%{
transform: translateY(-880px);
}
to{
transform: translateY(-880px);
}
}
.div4{
position: relative;
float:left;
width: 100%;
height: 170px;
background-color: #f2f2f0;
}
.div4 ul{
font-size: 20px;
text-align: center;
}
.div4 ul:hover{
font-size: 25px;
color: #871685;
}
#d4-ul1,#d4-ul2,#d4-ul3,#d4-ul4{
width: 24%;
float: left;
}
#d5-left{
font-size: 20px;
color: white;
margin-left: 40px;
margin-top: 90px;
float: left;
}
#d5-center{
word-spacing: 130px;
margin-left: 100px;
color: white;
font-size: 70px;
}
#d5-right{
font-size: 20px;
margin-right: 70px;
float: right;
}
#d5-right a{
font-size: 20px;
}
#d5-right a:hover{
font-size: 25px;
color: lightblue;
}
#d5-bottom{
text-align: center;
position: relative;
pos-bottom: 0px;
clear: both;
background-color: #73116f;
}
// js部分
/*
var d3-img = document.getElementById("d3-img");
var timer;
var outTimer;//延时定时器
var x = 0;
function move(){
x -= 2;
if(x % 300 == 0){ //清定时器
clearInterval(timer); //等个1s重新打开
clearTimeout(outTimer);
outTimer = setTimeout(function(){
timer = setInterval(move,16);
},500);
}
x = x <= -1500 ? 0 : x;
d3-img.style.left = x + 'px';
}
timer = setInterval(move,16);
*/
window.onload=function(){
var lik=document.getElementsByTagName("");
function fun(i,j){
lik[i].style.opacity=1;
lik[j].style.opacity=0;
}
fun(0,1);
var i=0;
setInterval(function(){
if(++i>=5){
i=0;
fun(0,4);
}
else fun(i,i-1);
},2000);
}
京公网安备 11010502036488号