console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>东华图协</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.touming {
background-color: #c9eefc;
font-size: 23px;
font-weight: 800;
font-family: cursive;
}
.dropdown-menu {
font-size: 20px;
}
.yingcang {
background-color: #c9eefc;
opacity: 0.3;
}
.light {
background-color: rgb(243, 243, 243);
}
</style>
<script>
$(function(){
$("#yingxing").mouseenter(function(){
$("#yingxing").removeAttr("style");
$("#yingxing").removeClass("yingcang");
$("#yingxing").addClass("touming");
$(".first_logo").fadeIn(1000);
});
$("#yingxing").mouseleave(function(){
$("#yingxing").removeClass("touming");
$("#yingxing").addClass("yingcang");
$(".first_logo").fadeOut(1000);
});
$(".lan a").mouseenter(function(){
$(this).css({"background-color":"white","box-shadow":"5px 5px 13px rgba(0,0,0,0.3) inset"});
});
$(".lan a").mouseleave(function(){
$(this).css({"background-color":"#c9eefc","box-shadow":""});
});
});
</script>
</head>
<body>
<div class="ding" id="No1"></div>
<div class="header">
<div class="logo"></div>
<p class="mingzi">图书馆协会</p>
</div>
<div class="beijin">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" id="yingxing" role="navigation" style="background-color: #c9eefc;opacity: 0.3;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-menu">
<span class="sr-only">qieh</span>
<span class="iconbar">��</span>
<span class="iconbar"></span>
<span class="iconbar"></span>
</button>
<a class="navbar-brand"><img class="first_logo" style="display: none;" src="https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="target-menu">
<ul class="nav navbar-nav">
<li class="act lan"><a href="#No1" style="color: black;">首页</a></li>
<li class="lan"><a href="#No2" style="color: black;">招新</a></li>
<li class="lan"><a href="#No3" style="color: black;">活动</a></li>
<li class="lan"><a href="#No4" style="color: black;">视频</a></li>
<li class="dropdown lan">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: black;background-color: #c9eefc;">联系我们
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: #c9eefc;">
<li><a href="#">图协公众号</a></li>
<li><a href="#">图书馆公众号</a></li>
<li class="divider"></li>
<li><a href="#">图书馆WiFi</a></li>
</ul>
</li>
<li class="lan"><a href="http://library.gzdhxy.com/" style="color: black;">图书馆</a></li>
</ul>
</div>
</nav>
<div class="content">
<div class="jianjie">
<div class="biaoti_border">
<div class="biaoti">协会简介</div>
</div>
<div class="neirong"><p>协会是在图书馆各成员的领导下，于2015年9月成立，以“品读书籍，丰富人生”为口号；充分利用图书馆资源开展丰富多彩的校园文化活动。以提高当代大学生信息素养为目的。在协会各届核心干部的团结携手下，整个协会历来以和谐活泼的形象活跃在校园中。</p></div>
</div>
<div class="huodonglianjie">
<div class="biaoti_border">
<div class="biaoti">历年活动</div>
</div>
<div class="neirong">
<p><a href="https://mp.weixin.qq.com/s/5LScFyVWLOKmuFnIRFYJYA">冬至｜温暖图协与你相伴</a></p>
<p><a href="https://mp.weixin.qq.com/s/nZSrgSdSiNvJzd467gf94Q">秋游，白云山登山之旅</a></p>
<p><a href="https://mp.weixin.qq.com/s/Vi7DTZU_OsWHmlVUoWtZ1g">书单推荐十四期 | 牢记历史，勿忘国耻</a></p>
<p><a href="https://mp.weixin.qq.com/s/geIUMHn5IbruIZN4pmv0SA">报告：学校后山有空投......</a></p>
<p><a href="https://mp.weixin.qq.com/s/2aVAmckcg-UfFJzpBoqi_w">对春天最起码的尊重是......</a></p>
</div>
</div>
<div class="dashu"></div>
</div>
</div>
<div class="content2" id="No2">
<div class="beijin2"></div>
<div class="zhaoxin_biaoti"><h1>招新</h1></div>
<div id="myCarousel" class="carousel slide lunbo">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a target="_blank" href="https://i.loli.net/2020/07/01/pc2tzSZdPHRADLa.jpg"><img src="https://i.loli.net/2020/07/01/pc2tzSZdPHRADLa.jpg" alt="First slide" style="height: 495px;"></a>
</div>
<div class="item">
<a target="_blank" href="https://i.loli.net/2020/07/01/iBORv3MEfCHA6je.jpg"><img src="https://i.loli.net/2020/07/01/iBORv3MEfCHA6je.jpg" alt="Second slide" style="height: 495px;"></a>
</div>
<div class="item">
<a target="_blank" href="https://i.loli.net/2020/07/01/qw4IX28UZzPt7Kv.jpg"><img src="https://i.loli.net/2020/07/01/qw4IX28UZzPt7Kv.jpg" alt="Third slide" style="height: 495px;"></a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="content3">
<div class="zhaoxin_haibao">
<a target="_blank" href="https://i.loli.net/2020/07/02/j7oNL68O3geAMdH.jpg"><img src="https://i.loli.net/2020/07/02/j7oNL68O3geAMdH.jpg" alt="招新海报"></a>
</div>
<div class="zhaoxin_wenan">
<h1>招新记录</h1>
<div class="zhaoxin_neirong">
<p>2019年9月23日，在后山开始摆摊招新</p>
<p>2019年9月26日，在教室<span class="mask">卧槽！忘记哪个教室了</span>展开了第一轮面试</p>
<p>2019年9月30日，在教室<span class="mask">你觉得我能忘记第一个记住第二个吗</span>展开了第二轮面试</p>
<p>2019年10月13日，面试通过<a href="https://mp.weixin.qq.com/s/j4KsYR507Ht7eP8GY7pEvQ">名单</a>公布</p>
</div>
<div class="shenqingjiaru">
<p>
<button type="button" class="btn btn-primary btn-lg"><a class="jiaruwomen" href="http://jsrun.net/ScvKp">加入我们</a></button>
</p>
</div>
</div>
</div>
<div class="content4" id="No3">
<div class="beijin4">
<h1>历年活动</h1>
</div>
</div>
<div class="content5">
<ul id="myTab" class="nav nav-tabs biaoqianye">
<li class="active">
<a style="margin-left: 20px;" href="#home" data-toggle="tab">
17级与18级
</a>
</li>
<li><a href="#ios" data-toggle="tab">18级与19级</a></li>
</ul>
<div id="myTabContent" class="tab-content huodongwenben">
<div class="tab-pane fade in active" id="home">
<table class="table table-hover" id="biaoge">
<thead>
<tr>
<th>时间</th>
<th>项目</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018年12月22日</td>
<td><a href="https://mp.weixin.qq.com/s/DYfaU5DZ6nEOkbRVXOeWAg">冬至</a></td>
</tr>
<tr>
<td>2019年4月4日</td>
<td><a href="https://mp.weixin.qq.com/s/2aVAmckcg-UfFJzpBoqi_w">春游：天麓湖公园</a></td>
</tr>
<tr>
<td>2019年4月23日</td>
<td><a href="https://mp.weixin.qq.com/s/geIUMHn5IbruIZN4pmv0SA">社团嘉年华</a></td>
</tr>
<tr>
<td>2019年6月22日</td>
<td><a href="https://mp.weixin.qq.com/s/Q7A4GZi2TY6HFvaHuGIEZw">换届大会</a></td>
</tr>
</tbody>
</table>
<div class="huodongtupian">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/NSYPC0BtxOicYclOj41B5knKlvDqIHGEe9icEz9eic
JibD5S0BpiaHsoeC5aJBQr6KVicbYGIYFUyT8mrnyINXfOBUmA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/NSYPC0BtxO9axK4tIh8dS6F5gdpqn93XZsRq9xapnchSKhlAAibDbdDtKMdcxYQ
Ddj3eZbk6KiaIdibfia5yOwUPhQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/NSYPC0BtxOicQIcvxADbVejwS8qNmvPxyX4tJnNZdzWoI3AgKDWMQ9xicduHX0PB5FXBA6V2d
jWouJgclkX8ccPA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="">
<img src="https://mmbiz.qpic.cn/mmbiz_png/NSYPC0BtxO9kVTSw227S6Hyw9wMco59kBZ2zCgfhcIMlKd5wyiaHXibU4dibhy83hP4MGi
chuQx3AtoiarpuyfiaCu5g/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="">
</div>
</div>
<div class="tab-pane fade" id="ios">
<p>555</p>
</div>
</div>
</div>
<div class="content6" id="No4">
<h1>视频</h1>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="https://v.qq.com/x/page/k0916evri13.html" type="video/mp4">
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</div>
</body>
</html>
body {
margin: 0px;
}
.header {
background-image: url("https://i.loli.net/2020/03/24/jSGie7wPzdQcFJl.jpg");
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.beijin {
background-color: #daf5ff;
width: 100%;
height: 600px;
}
.daohanglan {
background-color: rgb(87, 151, 224);
width: 1000px;
height: 60px;
margin: 0 auto;
margin-bottom: 10px;
}
.daohanglan a {
float: left;
padding: 40px;
margin-top: -28px;
margin-left: 20px;
font-size: larger;
font-size: 25px;
color: white;
}
a:link {
text-decoration: none;color: blue;
}
a:hover {
text-decoration: none;color: blue;
}
.header .logo {
background-image: url("https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png");
background-size: 100% 100%;
width: 70px;
height: 70px;
float: left;
margin-top: 40px;
margin-left: 50px;
}
.mingzi {
float: left;
margin-top: 55px;
font-size: 40px;
font-weight: 1000;
font-family: cursive;
color: white;
}
.content{
width: 100%;
height: 600px;
margin: 0 auto;
}
.dashu {
background-image: url("https://i.loli.net/2020/03/26/sIc2TzrnBmvFXZE.png");
background-size: 100% 100%;
width: 600px;
height: 400px;
float: left;
margin-left: 150px;
margin-top: 50px;
}
.jianjie {
border-style: solid;
border-color: rgb(79, 168, 209);
float: right;
margin-right: 300px;
border-width: 2px;
width: 395px;
height: 230px;
margin-top: 30px;
}
.jianjie .biaoti_border{
border-style: solid;
border-color: rgb(79, 168, 209);
border-width: 3px;
height: 30px;
margin-top: -2px;
}
.jianjie .biaoti_border .biaoti {
background-color: rgb(34, 120, 160);
width: 110px;
height: 100%;
font-size: 23px;
font-family: cursive;
font-weight: 800;
text-align: center;
color: white;
border-radius: 0px 5px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.jianjie .neirong p {
text-indent: 2em;
line-height: 25px;
letter-spacing: 2px;
margin: 8px 20px;
font-family: cursive;
font-weight: 1000;
font-size: 18px;
}
.huodonglianjie {
border-style: solid;
border-color: rgb(79, 168, 209);
float: right;
margin-left: 950px;
border-width: 2px;
width: 395px;
height: 215px;
position: absolute;
margin-top: 290px;
}
.huodonglianjie .biaoti_border {
border-style: solid;
border-color: rgb(79, 168, 209);
border-width: 3px;
height: 30px;
margin-top: -2px;
}
.huodonglianjie .biaoti_border .biaoti {
background-color: rgb(34, 120, 160);
width: 110px;
height: 100%;
font-size: 23px;
font-family: cursive;
font-weight: 800;
text-align: center;
color: white;
border-radius: 0px 5px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.huodonglianjie .neirong p {
margin-top: 13px;
}
.huodonglianjie .neirong p a {
line-height: 15px;
letter-spacing: 0.5px;
margin-left: 1em;
font-size: 15px;
text-decoration: none;
color: rgb(0, 0, 0);
}
.huodonglianjie .neirong p a:hover {
color: black;
background-color: white;
font-size: 17px;
}
.footer {
height: 150px;
background-color: rgb(76, 144, 223);
margin-top: -80px;
}
.footer .logo {
background-image: url("https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png");
background-size: 100% 100%;
width: 100px;
height: 100px;
float: left;
margin: 20px 250px;
}
.footer strong {
float: left;
margin-top: 20px;
font-size: 100px;
font-weight: 1000;
font-family: cursive;
color: white;
letter-spacing: 0.5em;
margin-left: -200px;
}
.footer .erweima {
background-image: url("https://i.loli.net/2020/03/28/7TGniW8Vzl4qLDx.jpg");
background-size: 100% 100%;
width: 100px;
height: 100px;
float: left;
margin: 25px;
margin-left: 150px;
}
.first_logo {
width: 50px;
height: 50px;
position: absolute;
margin-top: -15px;
margin-left: 180px;
}
.act {
margin-left: 600px;
}
.lan {
padding-left: 30px;
}
#yingxing {
font-family: cursive;
font-size: 23px;
}
.ding {
width: 100%;
height: 50px;
background-color: #7ac1ff;
}
@-moz-keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
50% {
transform: translateY(0);
}
60% {
transform: translateY(-15px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@-webkit-keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
50% {
transform: translateY(0);
}
60% {
transform: translateY(-15px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
50% {
transform: translateY(0);
}
60% {
transform: translateY(-15px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.dashu {
-moz-animation: bounce 2s linear 0.1s infinite alternate;
-webkit-animation: bounce 2s linear 0.1s infinite alternate;
animation: bounce 2s linear 0.1s infinite alternate;
}
.content2 {
width: 100%;
height: 700px;
background-color: rgb(255, 255, 255);
background-image: url("https://i.loli.net/2020/07/04/HPnm1d6tsVcbDBL.jpg");
background-size: 100%;
background-repeat: no-repeat;
margin-top: -20px;
}
.beijin2 {
background-color: rgb(0, 0, 0);
width: 100%;
height: 700px;
position: absolute;
opacity: 0.5;
}
.zhaoxin_biaoti h1 {
position: relative;
padding-top: 30px;
text-align: center;
letter-spacing: 1em;
font-family: "华文行楷";
font-size: 50px;
text-shadow: 2px 4px 5px rgba(0,0,0,0.7);
color: rgb(255, 255, 255);
margin-bottom: 40px;
}
.item img{
width: 800px;
}
.lunbo {
width: 800px;
height: 500px;
margin: 0 auto;
border: 2px solid rgb(73, 73, 73);
}
.content3 {
width: 100%;
height: 700px;
background-color: #b8ecff;
}
.zhaoxin_haibao img {
background-size: 100%;
margin-left: 300px;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
box-shadow: 3px 3px 8px rgba(0,0,0,0.7);
}
.zhaoxin_wenan {
text-align: center;
margin-top: -450px;
margin-left: 400px;
color: rgb(0, 0, 0);
}
.mask {
background-color: #252525;
color: #252525;
transition: color 0.5s;
}
.mask:hover {
color: #ffffff;
}
.zhaoxin_wenan h1 {
font-family: "楷体";
font-weight: bolder;
font-size: 40px;
text-shadow: 2px 2px 5px rgb(83, 83, 83);
}
.zhaoxin_neirong {
font-size: 18px;
letter-spacing: 2px;
margin-top: 30px;
text-align: left;
margin-left: 300px;
}
.shenqingjiaru {
margin-top: 80px;
margin-left: 20px;
}
.shenqingjiaru button {
width: 250px;
}
.jiaruwomen {
font-size: 30px;
letter-spacing: 2px;
color: white;
text-decoration: none;
}
.jiaruwomen:hover {
text-decoration: none;
color: white;
}
.content4 {
background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3164149273,1539855894&fm=26&gp=0.jpg");
width: 100%;
height: 800px;
background-repeat: no-repeat;
background-size: 100%;
margin-top: -20px;
}
.beijin4 {
width: 100%;
height: 100%;
}
.beijin4 h1 {
text-align: center;
color: white;
padding-top: 350px;
font-size: 60px;
letter-spacing: 0.5em;
font-family: "楷体";
font-weight: bolder;
}
.content5 {
background-color: #2b2b2b;
width: 100%;
height: 700px;
}
.biaoqianye {
padding-top: 50px;
}
.content5 li a {
color: white;
}
.content5 li a:hover {
color: #252525;
}
.huodongwenben {
color: white;
}
#biaoge {
width: 800px;
font-size: 20px;
margin-left: 350px;
margin-top: 30px;
}
.huodongtupian img {
margin-top: 100px;
margin-left: 180px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
.huodongtupian img:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.content6 {
width: 100%;
height: 700px;
background-color: white;
}
.content6 h1 {
font-size: 50px;
text-align: center;
padding-top: 50px;
font-family: "楷体";
font-weight: bolder;
letter-spacing: 1em;
}