1 Unstar Star 3 Fork 0

15216142617 / HCJDemo2020HTML/CSSMulanPSL-1.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
南大科院计算机系网页前端设计实训作品 spread retract

Clone or download
index.html 18.23 KB
Copy Edit Web IDE Raw Blame History
温鑫 authored 2020-06-24 22:24 . 网页实训
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>南昌大学科学技术学院学生社团网站首页</title>
<!--图标库导入-->
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/act.css">
<link rel="stylesheet" href="css/lunbo1.css">
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<!--顶部-->
<div class="header">
<div class="header_left"><img src="images/logo2.png" width="700" height="100" alt="" />
</div>
<div class="header_right"> <h5 style="font-size: 12px; height: 17px;" id="myclock" align="right"></h5><br/>
<table style="width: 500px;">
<tr>
<td><a class="fa fa-user-o" href="about/login.html">用户登录</a></td>
<td><a class="fa fa-meetup">电子邮件</a></td>
<td><a class="fa fa-bell">考试日历</a></td>
<td><a class="fa fa-building" href="about/map.html">校园地图</a></td>
</tr>
</table>
<div style="text-align: center;width: 600px" >
<br/>
<div class="fdh">
<ul>
<li> <a>信息学科部</a> </li>
<li> <a>人文学科部</a></li>
<li> <a>财经学科部</a> </li>
<li> <a>理工学科部</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!--导航菜单-->
<div class="menu">
<div class="center">
<ul class="ul-list">
<li><a href="index.html">首页</a></li>
<li>
<a href="news/newsIndex.html">社团快讯</a>
<ol class="ol-list">
<li><a href="best/hdj.html">精选新闻</a></li>
<li><a href="best/qmgc.html">实时动态</a></li>
<li><a href="news/fls.html">往期精彩</a></li>
</ol>
</li>
<li>
<a href="act/actIndex.html">活动风采</a>
<ol class="ol-list">
<li><a href="news/sfxh.html">最新活动</a></li>
<li><a href="album/STalbum.html">社团相册</a></li>
</ol>
</li>
<li>
<a href="news/All.html">学院公告</a>
<ol class="ol-list">
<li><a href="news/xg.html">学工通知</a></li>
<li><a href="news/tw.html">团委公告</a></li>
<li><a href="news/All.html">教务文件</a></li>
<li><a href="news/All.html">就业创业</a></li>
</ol>
</li>
<li>
<a href="news/fyj.html">风雅节</a>
<ol class="ol-list">
<li><a href="act/fyjact.html">活动简介</a></li>
<li><a href="album/STalbum.html">社团光影</a></li>
</ol>
</li>
<li>
<a href="about/about.html">关于小社</a>
<ol class="ol-list">
<li><a href="asso/ST.html">社团简介</a></li>
<li><a href="about/about.html">联系我们</a></li>
<li><a href="about/liuyan.html">留言板</a></li>
</ol>
</li>
</ul>
</div>
</div>
<div class="main">
<!--轮播图-->
<div style="margin-top: 10px;margin-left: 150px;float: left;">
<div id="lunbobox">
<div id="toleft">&lt;</div>
<div class="lunbo">
<a><img src="images/002.jpg" /></a>
<a><img src="images/003.jpg" /></a>
<a><img src="images/001.png" /></a>
<a><img src="images/004.png" /></a>
<a><img src="images/005.png" /></a>
</div>
<div id="toright">&gt;</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
</div>
<!--新闻列表-->
<div class="news_list">
<a class="fa fa-arrows"></a>&nbsp;<span><b>社团快讯</b></span>
<hr>
<ul>
<li><a href="news/sfxh.html">迎新春!书法协会为您送春联</a></li>
<li><a href="news/fls.html">法林社举办“普法知识讲座”活动</a></li>
<li><a href="#">手工艺创作制作协会顺利换届</a></li>
<li><a href="#">我院社团文化风雅节圆满结束</a></li>
<li><a href="#">计算机协会海报设计大赛进行中</a></li>
<li><a href="#">桌游社举办“三国杀校园行”活动</a></li>
</ul>
<li align="right"><a href="news/newsIndex.html" style="color: rgba(196, 13, 156, 0.678);">More></a></li>
</div>
<div class="news_list">
<a class="fa fa-tasks"></a>&nbsp;<span><b>最新活动</b></span>
<hr>
<ul>
<li><a href="#">社团骨干培训班前往参观耀邦陵园</a></li>
<li><a href="best/hdj.html">手工艺“灯火阑珊”花灯节火热进行中</a></li>
<li><a href="#">院网摄影部开展雪地摄影活动</a></li>
<li><a href="#">计算机协会义务维修活动进行中</a></li>
<li><a href="#">计算机协会、轮滑社举办电子竞技大赛</a></li>
<li><a href="#">“风雅社韵,百年光影”风雅节启动</a></li>
</ul>
<li align="right"><a href="act/actIndex.html" style="color: rgba(196, 13, 156, 0.678);">More></a></li>
</div>
<!--专栏-->
<div class="splize_menu">
<div style="float: left;width: 500px;margin-left: 150px; margin-top: 15px;">
<a class="fa fa-rocket"></a>&nbsp;<span style="font-size: 20px;"><b>往期精选</b></span><br/>
<ul style="list-style-type: none;padding-top:5px ;line-height: 1.3;">
<li>
<div style="float: left;">
<div class="top_menu">
JUN
</div>
<div class="bottom_menu">
19
</div>
</div>
<div style="float: left; padding-top:15px; padding-left: 10px;">
<a style="font-size: 19px;" href="best/qmgc.html">第九期“青马工程”大学生骨干培训班正式开班</a><br/><br/>
<span style="padding-left: 10px;"><a class="fa fa-qrcode"></a>&nbsp;<a style="font-size: 16px;">2020/06/19</a></span><span style="padding-left: 10px;font-size: 15px;">来源:团委新媒体中心</span>
</div>
</li>
<li>
<div style="clear:both;float: left;">
<div class="top_menu">
APR
</div>
<div class="bottom_menu">
20
</div>
</div>
<div style="float: left; padding-top:15px; padding-left: 10px;">
<a style="font-size: 19px;" href="best/kjfy.html">我院社团学干踊跃参与疫情防控志愿服务工作</a><br/><br/>
<span style="padding-left: 10px;"><a class="fa fa-qrcode"></a>&nbsp;<a style="font-size: 16px;">2020/04/20</a></span><span style="padding-left: 10px;font-size: 15px;">来源:团委新媒体中心</span>
</div>
</li>
<li>
<div style="clear:both;float: left;">
<div class="top_menu">
MAR
</div>
<div class="bottom_menu">
23
</div>
</div>
<div style="float: left; padding-top:15px; padding-left: 10px;">
<a style="font-size: 19px;" href="best/hdj.html">"灯火传承,文化暖冬"社团文化风雅节圆满结束</a><br/><br/>
<span style="padding-left: 10px;"><a class="fa fa-qrcode"></a>&nbsp;<a style="font-size: 16px;">2019/03/23</a></span><span style="padding-left: 10px;font-size: 15px;">来源:院学生会社团部</span>
</div>
</li>
</ul>
</div>
<div class="xyg">
<a class="fa fa-random"></a>&nbsp;<span style="font-size: 20px;"><b>学院公告</b></span><br/>
<ul class="notice">
<li><a target="_blank" href="" >南昌大学科学技术学院2020年推荐优秀高职高专...
</a></li>
<li><a target="_blank" href="">关于2020年“端午”节放假期间教学安排的通知...
</a></li>
<li><a target="_blank" href="" >理工学生会疫情防控学生干部线上培训会顺利召开...
</a></li>
<li><a target="_blank" href="" >我院2020年春季返校工作顺利完成,我院领导前往...
</a></li>
<li><a target="_blank" href="" >信息学科部第十六届校园歌手大赛圆满结束...
</a></li>
<li><a target="_blank" href="" >热血战疫 青春担当,无偿献血活动圆满结束...
</a></li>
<li><a target="_blank" href="" >我院组织开展“爱我校园”劳动日活动,各学科部...
</a></li>
<li><a target="_blank" href="" >南昌大学科学技术学院抗疫系列文创产品征集启事...
</a></li>
<li align="right"><a href="news/All.html" style="color: rgba(196, 13, 156, 0.678);">More></a></li>
</ul>
</div>
<div class="right_bottom">
<a class="fa fa-desktop"></a>&nbsp;<span style="font-size: 20px;"><b>社团光影</b></span><br/>
<div style="width: 340px; height: 80px; background: url('images/p3.png');background-repeat:no-repeat;margin: 12px;text-align: center;padding: 25px;">
<a style="font-size: 26px;color: #f1f1f1;" href="asso/ST.html"><b>社团简介</b></a>
</div>
<div style="width: 340px; height: 80px; background: url('images/p2.png');background-repeat:no-repeat;margin: 12px;text-align: center;padding: 25px;">
<a style="font-size: 26px;color: #f1f1f1;" href="act/actIndex.html"><b>活动风采</b></a>
</div>
<div style="width: 340px; height: 80px; background: url('images/p1.png');background-repeat:no-repeat;margin: 12px;text-align: center;padding: 25px;">
<a style="font-size: 26px;color: #f1f1f1;"><b>荣誉殿堂</b></a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
<a href="http://www.ncu.edu.cn/">南昌大学</a> |
<a href="http://ndkj.ncu.edu.cn/">科技学院</a> |
<a href="https://weibo.com/u/2114287912?nick=%E5%8D%97%E5%A4%A7%E7%A7%91%E9%99%A2%E5%9B%A2%E5%A7%94&noscript=1&sudaref=www.baidu.com&display=0&retcode=6102">团委新媒体</a> |
<a href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF/663582?fr=aladdin&fromtitle=%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF%E4%B8%93%E4%B8%9A&fromid=2632289">计算机科学与技术172班</a> |
<a href="https://fontawesome.dashgame.com/">网页设计实训</a>
</div>
<p>
©Copyright 2020 南昌大学科学技术学院版权所有 | 江西省九江市五四大道199号南昌大学科学技术学院
</p>
</div>
<script>
//时间
function show_time() {
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth()+1;
var day=time.getDate();
var hour=time.getHours();
if(hour<10){
hour='0'+hour;
}
var min=time.getMinutes();
if(min<10){
min='0'+min;
}
var sec=time.getSeconds();
if(sec<10){
sec='0'+sec;
}
document.getElementById("myclock").innerHTML="<h3>"+year+"-"+month+"-"+day+"&nbsp;&nbsp;" +hour+":"+min+":"+sec;
}
//serInterval:以相同的时间间隔执行某个操作
setInterval("show_time()",1000);
</script>
<script>
///轮播
$(function () {
//$("#toright").hide();
//$("#toleft").hide();
$('#toright').hover(function () {
$("#toleft").hide()
}, function () {
$("#toleft").show()
})
$('#toleft').hover(function () {
$("#toright").hide()
}, function () {
$("#toright").show()
})
})
var t;
var index = 0;
/////自动播放
t = setInterval(play, 3000)
function play() {
index++;
if (index > 4) {
index = 0
}
// console.log(index)
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc",
"border": ""
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
};
///点击鼠标 图片切换
$("#lunbobox ul li").click(function () {
//添加 移除样式
//$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式 可以在样式中 用hover 来对li 实现
$(this).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
// console.log(index);
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己)
});
/////////////上一张、下一张切换
$("#toleft").click(function () {
index--;
if (index <= 0) //判断index<0的情况为开始点击#toright index=0 再点击 #toleft 为负数了 会出错
{
index = 4
}
console.log(index);
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己)必须要写
}); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换
$("#toright").click(function () {
index++;
if (index > 4) {
index = 0
}
console.log(index);
$(this).css({
"opacity": "0.5"
})
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己)
});
$("#toleft,#toright").hover(function () {
$(this).css({
"color": "black"
})
},
function () {
$(this).css({
"opacity": "0.3",
"color": ""
})
})
///
///////鼠标移进 移出
$("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
////////鼠标移进
function () {
$('#toright,#toleft').show()
clearInterval(t);
},
///////鼠标移开
function () {
//$('#toright,#toleft').hide()
//alert('aaa')
t = setInterval(play, 3000)
function play() {
index++;
if (index > 4) {
index = 0
}
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
}
})
</script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

HTML/CSS
1
https://gitee.com/wx623623/HCJDemo2020.git
git@gitee.com:wx623623/HCJDemo2020.git
wx623623
HCJDemo2020
HCJDemo2020
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542