【练习】DIY青志协网站（html+css+js未分开）

南大科院青志协

主页面
毕业季页面
部门介绍
剩余页面省略
效果图
结语

主页面

 <!DOCTYPE html><html><head><meta charset="utf-8" /><title>南大科院青年志愿者协会</title><style>*{margin: 0;padding: 0;box-sizing: border-box;font-size: 0;font-family: "楷体";}body{height: 1000px;background-color: rgb(255,229,184);}#titlediv{height: 100px;width: 800px;background-color: white;/*    background-image: url(img/文创.jpg);background-size: 100%;background-repeat: no-repeat;background-position: 0 -200px; */margin: 0 auto;text-align: center;overflow: hidden;position: relative;text-align: center;}#logo{display: inline-block;}#search{position: absolute;bottom: 0rem;float: left;}#leftnav{width: 200px;height: 220px;background-color: rgb(255,229,184);position: fixed;left: 0;top: 120px;padding: 10px 10px;transform: translateX(-200px);transition-duration:0.5s;transition-timing-function:ease-in-out;}.erweima{width: 80px;height: 80px;display: inline-block;/* border: 1px solid #000000; */margin-bottom: 20px;}#weixin{margin-right: 15px;/* margin-bottom: 20px; */}#douyin{margin-right: 15px;}#weixinspan{display: inline-block;height: 20px;font-size: 14px; position: absolute;left: 15px;top: 90px;}#weibospan{display: inline-block;height: 20px;font-size: 14px; position: absolute;left: 130px;top: 90px;}#douyinspan{display: inline-block;height: 20px;font-size: 14px; position: absolute;left: 35px;top: 190px;}#qqspan{display: inline-block;height: 20px;font-size: 14px; position: absolute;left: 130px;top: 190px;}#leftnav img{width: 80px;height: 80px;display: inline-block;opacity: 0.7;}#jixiangwu img{width: 110px;height: 130px;position: fixed;right: 0;top: 150px;}#donghua{width: 20px;height: 220px;background-color: white;position: fixed;left: 0;top: 120px;font-size: 15px;}#donghua:hover #leftnav{transform:  translate(0px);}.erweima img:hover{transform: scale(1.2);}#nav{width: 800px;height: 35px;background-color: #00FFFF;margin: 0 auto;}#nav ul>li{color: black;}#nav ul li{display: inline-block;height: 35px;font-size: 16px;width: 200px;text-align: center;/* line-height: 35px; */position: relative;}a{text-decoration: none;}.seconddiv{position: absolute;top: 35px;width: 200px;overflow: hidden;/* background-color: #FFFFFF; *//* border: 0.5px solid #000000; */border-top: 0;border-bottom: 0;display: none;z-index: 2;}.seconddiv a{color: #000000;}#secondul li{/* border: 1px  solid #000000; *//* background-color: rgba(255,255,255,0.7); */}.firstli{line-height: 35px;}.secondli{vertical-align: top;display: inline-block;height: 35px;/* line-height: 35px; */border-bottom: 1px solid rgba(0,255,255,0.7);background-color: rgba(255,255,255,0.7);}.secondli:hover{background-color: rgba(0,255,255,0.7);}.firstli:hover .seconddiv{display: block;}.firstli:hover{background-color: antiquewhite;cursor: pointer;}#main{width: 800px;margin: 0 auto;overflow: hidden;position: relative;}#loop{width: 450px;height: 300px;background-color: white;margin: 0 auto;display: inline-block;position: relative;/* border: 1px solid cadetblue; */}#loop{}.button{/* width: 240px; */position: absolute;bottom: 10px;left: 110px;height: 20px;/* background-color: #000000; */}.button span{font-size: 14px;padding: 0 10px;line-height: 20px;color: #F0F8FF;margin: 9px;}.button span:hover{cursor: pointer;}.shown{display: block;}.hidd{display: none;}.shownspan{background-color: #5F9EA0;}.hiddspan{background-color: #00FFFF;}#logogif{/* display: none; */width: 350px;height: 150px;background-image: url(../img/logo/尾图6.gif) ;background-size: 100%;background-repeat: no-repeat;position: absolute;right: 0;top: 0;}#kuaisu{/* display: none; *//* border: 1px solid cadetblue; */width: 350px;height: 150px;background-color: rgb(230,230,230);position: absolute;right: 0;top: 150px;padding-bottom: 10px;padding-left: 10px;}#kuaisuspan{display: inline-block;font-size: 16px;color: #000000;/* margin: 10px 0; */height: 39px;margin-left: 30px;}#kuaisu a{font-size: 14px;color: #000000;display: inline-block;}#kuaisu table{font-size: 14px;}#kuaisu table td{text-align: center;font-size: 16px;height: 50px;width: 165px;background-color: rgb(242,242,242);}#kuaisu table td:hover{/* text-align: center;font-size: 16px;height: 55px;width: 175px; */background-color: rgb(230,230,230);}#kuaisu table td img{vertical-align: middle;}/* .icona{font-size: 16px;padding: 10px 100px;background-color: antiquewhite;} */#news{border: 1px solid cadetblue;width: 400px;height: 200px;background-color: rgb(230,230,230);display: inline-block;padding-left: 30px;/* position: absolute;left: 0;top: 450px; */}#news a {color: #000000}#news a:hover{color: cornflowerblue;}#gonggao a {color: #000000}#gonggao a:hover{color: cornflowerblue;}#gonggao{border: 1px solid cadetblue;border-left:0;width: 400px;height: 200px;background-color: rgb(230,230,230);/* position: absolute;right: 0;top: 450px; */display: inline-block;}#youqing{width: 800px;margin: 0 auto;background-color: white;padding-top: 30px;}#qingke{width: 400px;display: inline-block;text-align: center;}#xiaobai{text-align: center;width: 400px;display: inline-block;}#bottomdiv{width: 800px;height: 20px;background-color: rgba(0,255,255,0.7);}.text{font-size: 14px;}#gonggao{padding-left: 40px;}#newsul li{font-size: 14px;list-style-type: circle;margin-top: 15px;}#newsul{background-color: rgb(242,242,242);padding: 15px 10px;width: 340px;}#gonggaoul{background-color: rgb(242,242,242);padding: 15px 10px;width: 340px;}#newsul ul{margin-left: 20px;}#gonggaoul ul{margin-left: 20px;}#gonggaoul li{font-size: 14px;list-style-type: circle;margin-top: 15px;}.newstitle{display: inline-block;font-size: 16px;color: #000000;margin: 10px 0;}</style><script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 头部 --><div id="titlediv"><img src="img/logo/青志协.jpg" width="400px" height="100px" id="logo"></div><!-- 二维码 --><div id="donghua"><span style="line-height: 220p; font-size: 15px; display:inline-block ; margin-top: 50px;">不<br>要<br>点<br>我</span><div id="leftnav"><div class="erweima" id="weixin"><img src="img/logo/微信.jpg" ></div><span id="weixinspan">微信公众号</span><div class="erweima" id="weibo"><img src="img/logo/微博.jpg" ></div><span id="weibospan">微博</span><div class="erweima" id="douyin"><img src="img/logo/抖音.jpg" ></div><span id="douyinspan">抖音</span><div class="erweima"><img src="img/logo/QQ.jpg" ></div><span id="qqspan">QQ</span></div></div><!-- 吉祥物 --><div id="jixiangwu"><img src="img/jixiangwu.jpg" ></div><!-- 导航栏 --><div id="nav"><ul><a href="主页面.html"><li class="firstli">首页</li></a><li class="firstli">精彩推送<div class="seconddiv"><ul><a href="其他页面/青言青语.html"><li class="secondli">青言青语</li></a><a href="其他页面/毕业季.html"><li class="secondli">毕业季</li></a><a href="其他页面/换届大会.html"><li class="secondli">换届大会</li></a></ul></div></li><li class="firstli">活动介绍<div class="seconddiv"><ul id="secondul"><a href="其他页面/七彩课堂.html"><li class="secondli">七彩课堂</li></a><a href="其他页面/手语大赛.html"><li class="secondli">手语大赛</li></a><a href="其他页面/地球一小时.html"><li class="secondli">地球一小时</li></a><a href="其他页面/绿色出行.html"><li class="secondli">绿色出行</li></a></ul></div></li><li class="firstli">关于协会<div class="seconddiv"><ul><a href="其他页面/协会介绍.html"><li class="secondli">协会介绍</li></a><a href="其他页面/部门介绍.html"><li class="secondli">部门介绍</li></a></ul></div></li></ul></div><!-- 主体部分 -->    <div id="main"><!-- 轮播图 --><div id="loop" onmouseover="stopTime()" onmouseout="startTime()"><img src="img/loop/loop2.jpg"  width="450px" height="300px" class="shown"><img src="img/loop/IMG_2009.JPG"  width="450px" height="300px" class="hidd" ><img src="img/loop/IMG_5299.JPG"  width="450px" height="300px" class="hidd"><img src="img/loop/loop1.JPG"  width="450px" height="300px" class="hidd"><img src="img/loop/IMG_9992.JPG"  width="450px" height="300px" class="hidd" ></ul><div class="button"><span onmouseover="thisImg(0)" class="shownspan">1</span><span onmouseover="thisImg(1)" class="hiddspan">2</span><span onmouseover="thisImg(2)" class="hiddspan">3</span><span onmouseover="thisImg(3)" class="hiddspan">4</span><span onmouseover="thisImg(4)" class="hiddspan">5</span></div></div><!-- 动态图 --><div id="logogif"></div><!-- 快速访问 --><div id="kuaisu"><span id="kuaisuspan" style="padding-left: 10px; padding-top: 10px;">快速访问</span><table border="0px" cellspacing="0" cellpadding="0"><tr><td><img src="img/iconrenxiang.png" ><a href="#">我要报名</a></td><td><img src="img/tuichu_huaban1.png" ><a href="#">我要退会</a></td></tr><tr><td><img src="img/cangku.png" ><a href="#">协会仓库</a></td><td><img src="img/shouji54.png" ><a href="#">联系我们</a></td></tr></table></div><!-- 协会新闻 --><div id="news"><span class="newstitle">协会要闻</span><div id="newsul"><ul><a href="#"><li style="margin: 0;">无偿献血活动圆满结束<span style="float: right; font-size: 14px;">[6-10]</span></li></a><a href="#"><li>绿色出行活动火热报名<span style="float: right; font-size: 14px;">[6-10]</span></li></a>    <a href="#"><li>绿色出行活动火热报名<span style="float: right; font-size: 14px;">[6-10]</span></li></a> <a href="#"><li>绿色出行活动火热报名<span style="float: right; font-size: 14px;">[6-10]</span></li></a> </ul></div></div><!-- 协会公告 --><div id="gonggao"><span class="newstitle">协会公告</span><div id="gonggaoul"><ul><a href="#"><li style="margin: 0;">无偿献血活动圆满结束<span style="float: right; font-size: 14px;">[6-10]</span></li></a><a href="#"><li>爱我校园活动拉开帷幕<span style="float: right; font-size: 14px;">[6-10]</span></li></a>  <a href="#"><li>绿色出行活动火热报名<span style="float: right; font-size: 14px;">[6-10]</span></li></a> <a href="#"><li>绿色出行活动火热报名<span style="float: right; font-size: 14px;">[6-10]</span></li></a> </ul></div></div></div><!-- 友情链接 --><div id="youqing"><div id="xiaobai"><a href="#"><img src="img/logo/xiaobai.jpg"height="200px"></a></div><div id="qingke"><a href="#"><img src="img/logo/青科2.jpg" height="200px"></a></div><div id="bottomdiv"><span class="text" style="margin-left: 150px;">南大科院学生会</span><span class="text" style="margin-left: 300px;">南大科院团委</span></div></div></body><script type="text/javascript">var k=1;//控制下标//让图默认时，轮着换function showPic(){var lop=document.getElementById("loop");//lop下的通过标签名来取元素var imgs=   lop.getElementsByTagName("img");// alert(imgs.length)var spans=lop.getElementsByTagName("span");for(var i=0;i<imgs.length;i++){if(i==k){imgs[i].className="shown"; spans[i].className="shownspan"; }else{imgs[i].className="hidd"; spans[i].className="hiddspan"; }}//循环外if(k>=imgs.length-1){k=0;}else{k++;}     }//启动定时任务 timer=setInterval("showPic()",3000);function stopTime(){clearInterval(timer);//取消定时}function startTime(){timer=setInterval("showPic()",3000);}function thisImg(x){k=x;showPic();}    //          var index=1;//             var width=820;//           function move(){//              //动画开始时候把所有的选项卡设置为unchoose//                $("#option>a").attr("class","unchoose")//              //第一次取index的值为一即第二个按钮的类设为choose//               $("#option>a").eq(index).attr("class","choose");//                 //index++代表吧值取出来做运算 再自增//                 var distance = (index++*width)+"px";//                if(index==5)//                    index=0;//                 $("#loop").animate({"scrollLeft":distance},200);//          }//             //scrollLeft：distance移动滑块的距离 200ms代表滚动时间//           //设置一个定时器，过3000ms去调用move这个函数//           //周期性  动画三秒后开始  开始之前默认第一个 即index=0//           //将定时器付给一个变量//          var timer =setInterval(move,3000);//           //仅一次//             //setTimeout(move,3000);//          //鼠标悬停时 计时器停止 图片显示悬停处的图片//          $("#option>a").mouseover(function(){//                 //获取当前的index//              index=$(this).index();//               //以当前index的值 立即执行move//                 move();//               //关闭计时器//           });//            $("#loop").hover(function(){//   clearInterval(timer);//     },function(){//         move();//   })</script></html>

毕业季页面

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>南大科院青年志愿者协会</title><link rel="stylesheet" type="text/css" href="../css/main.css"/><style type="text/css">#main{width: 800px;/* height: 600px; */background-color: #FFFFFF;}#bigdiv{width: 740px;margin: 0 auto;margin-top: 20px ;}.little1div{font-size: 14px;width: 350px;height: 200px;border: 1px solid #00FFFF;display: inline-block;margin-right: 40px;margin-bottom: 10px;}.little2div{font-size: 14px;width: 350px;height: 200px;border: 1px solid #00FFFF;display: inline-block;margin-bottom: 10px;}.little1div img{width:348px;height: 148px;}.little2div img{width:348px;height: 148px;}.title{font-size: 16px;padding-left: 15px;margin-top: 10px;display: inline-block;}/* .decrition{font-size: 14px;padding-left: 15px;} */</style></head><body><!-- 头部 --><div id="titlediv"><img src="../img/logo/青志协.jpg" width="400px" height="100px" id="logo"></div><!-- 二维码 --><div id="donghua"><span style="line-height: 220p; font-size: 15px; display:inline-block ; margin-top: 50px;">不<br>要<br>点<br>我</span><div id="leftnav"><div class="erweima" id="weixin"><img src="../img/logo/微信.jpg" ></div><span id="weixinspan">微信公众号</span><div class="erweima" id="weibo"><img src="../img/logo/微博.jpg" ></div><span id="weibospan">微博</span><div class="erweima" id="douyin"><img src="../img/logo/抖音.jpg" ></div><span id="douyinspan">抖音</span><div class="erweima"><img src="../img/logo/QQ.jpg" ></div><span id="qqspan">QQ</span></div></div><!-- 吉祥物 --><div id="jixiangwu"><img src="../img/jixiangwu.jpg" ></div><!-- 导航栏 --><div id="nav"><ul><a href="../主页面.html"><li class="firstli">首页</li></a><li class="firstli">精彩推送<div class="seconddiv"><ul><a href="青言青语.html"><li class="secondli">青言青语</li></a><a href="毕业季.html"><li class="secondli">毕业季</li></a><a href="换届大会.html"><li class="secondli">换届大会</li></a></ul></div></li><li class="firstli">活动介绍<div class="seconddiv"><ul id="secondul"><a href="七彩课堂.html"><li class="secondli">七彩课堂</li></a><a href="手语大赛.html"><li class="secondli">手语大赛</li></a><a href="地球一小时.html"><li class="secondli">地球一小时</li></a><a href="绿色出行.html"><li class="secondli">绿色出行</li></a></ul></div></li><li class="firstli">关于协会<div class="seconddiv"><ul><a href="协会介绍.html"><li class="secondli">协会介绍</li></a><a href="部门介绍.html"><li class="secondli">部门介绍</li></a></ul></div></li></ul></div><!-- 主体部分 -->    <div id="main"><div id="bigdiv"><div class="little1div"><img src="../img/毕业/毕业季1.jpg" ><span class="title">毕业季 | 愿前程可奔赴，亦有岁月可回首</span></div><div class="little2div"><img src="../img/毕业/毕业季2.jpg" ><span class="title">毕业季 | 愿此去前程似锦，再相逢仍是故人</span></div><div class="little1div"><img src="../img/毕业/毕业季3.jpg" ><span class="title">毕业季 | 光阴的故事</span></div><div class="little2div"><img src="../img/毕业/毕业季4.jpg" ><span class="title">毕业季 | 愿君历经千帆，归来仍是少年</span></div><div class="little1div"><img src="../img/毕业/毕业季5.jpg" ><span class="title">毕业季 | 青春不留白，毕业季留爱</span></div><div class="little2div"><img src="../img/毕业/毕业季6.jpeg"" ><span class="title">毕业季 | 愿君历经千帆，归来仍是少年</span></div></div></div></body></html>

部门介绍

 <!DOCTYPE html><html><head><meta charset="utf-8" /><title>南大科院青年志愿者协会</title><link rel="stylesheet" type="text/css" href="../css/main.css"/><style type="text/css">#main{width: 800px;/* height: 600px; */background-color: #FFFFFF;}#bigdiv{width: 740px;margin: 0 auto;margin-top: 20px ;}#bigdiv img:hover{cursor: pointer;}.little1div{font-size: 14px;width: 350px;height: 300px;border: 1px solid #00FFFF;display: inline-block;margin-right: 40px;margin-bottom: 10px;}.little2div{font-size: 14px;width: 350px;height: 300px;border: 1px solid #00FFFF;display: inline-block;margin-bottom: 10px;}.little1div img{width:348px;height: 200px;}.little2div img{width:348px;height: 200px;}.title{text-indent: 2em;font-size: 14px;padding-left: 15px;margin-top: 10px;display: inline-block;}/* .decrition{font-size: 14px;padding-left: 15px;} */</style></head><body><!-- 头部 --><div id="titlediv"><img src="../img/logo/青志协.jpg" width="400px" height="100px" id="logo"></div><!-- 二维码 --><div id="donghua"><span style="line-height: 220p; font-size: 15px; display:inline-block ; margin-top: 50px;">不<br>要<br>点<br>我</span><div id="leftnav"><div class="erweima" id="weixin"><img src="../img/logo/微信.jpg" ></div><span id="weixinspan">微信公众号</span><div class="erweima" id="weibo"><img src="../img/logo/微博.jpg" ></div><span id="weibospan">微博</span><div class="erweima" id="douyin"><img src="../img/logo/抖音.jpg" ></div><span id="douyinspan">抖音</span><div class="erweima"><img src="../img/logo/QQ.jpg" ></div><span id="qqspan">QQ</span></div></div><!-- 吉祥物 --><div id="jixiangwu"><img src="../img/jixiangwu.jpg" ></div><!-- 导航栏 --><div id="nav"><ul><a href="../主页面.html"><li class="firstli">首页</li></a><li class="firstli">精彩推送<div class="seconddiv"><ul><a href="青言青语.html"><li class="secondli">青言青语</li></a><a href="毕业季.html"><li class="secondli">毕业季</li></a><a href="换届大会.html"><li class="secondli">换届大会</li></a></ul></div></li><li class="firstli">活动介绍<div class="seconddiv"><ul id="secondul"><a href="七彩课堂.html"><li class="secondli">七彩课堂</li></a><a href="手语大赛.html"><li class="secondli">手语大赛</li></a><a href="地球一小时.html"><li class="secondli">地球一小时</li></a></ul></div></li><li class="firstli">关于协会<div class="seconddiv"><ul><a href="协会介绍.html"><li class="secondli">协会介绍</li></a><a href="部门介绍.html"><li class="secondli">部门介绍</li></a><a href="报名面试.html"><li class="secondli">报名面试</li></a></ul></div></li></ul></div><!-- 主体部分 -->   <div id="main"><div id="bigdiv"><div class="little1div"><img src="../img/部门介绍/办公室.jpg" ><span class="title"><b style="font-size: 16px;">办公室</b>嘴皮子666的美批组，常常穿梭于老师与各协会间，批借物资场地游刃有余。面面俱到的上级组。严谨踏实的wep组，活动人员的组织安排少不了他们的统筹规划。就是这些小组构成了办公室，他们的努力付出让每次活动都能出色完成。</span></div><div class="little2div"><img src="../img/部门介绍/宣传.jpg" ><span class="title"><b style="font-size: 16px;">宣传部</b>作为院青志协对外进行组织和开展活动的窗口，致力于将志愿服务的观念带给广大学生，负责运营协会的官方新媒体账号、维护协会形象、扩大志愿服务活动的影响力、制作宣传材料海报喷绘、剪辑协会重大活动的视频、以及撰写各种活动新闻稿。</span></div><div class="little1div"><img src="../img/部门介绍/人力.jpg" ><span class="title"><b style="font-size: 16px;">人力资源部</b>负责制定方案并牵头组织志愿者的招募工作，负责青年志愿者注册组织工作和成员信息管理工作，负责完成志愿者月考核，学期考核及其他评优考核工作，负责协会副部以上团干部的人事任免、离职申请、审批工作。</span></div><div class="little2div"><img src="../img/部门介绍/实践.jpg" ><span class="title"><b style="font-size: 16px;">实践拓展部</b>的职能是：玩转手语、素质拓展、拉赞助。对内，我们积极组织各种素拓活动，为弘扬协会家文化努力耕耘。对外，我们开设手语课堂，积极宣传手语文化。我们也会与商家企业进行洽谈协商，为协会活动的开展提供经费支持。</span></div><div class="little1div"><img src="../img/部门介绍/文教.jpg" ><span class="title"><b style="font-size: 16px;">文教帮扶中心</b>在协会中负责七彩课堂、礼仪培训、主持人选拔等活动。其中，七彩课堂是本部门最为核心和重要的常规活动。其主要是要面向留守儿童，对留守儿童进行支教帮扶活动。</span></div><div class="little2div"><img src="../img/部门介绍/爱心.jpg"" ><span class="title"><b style="font-size: 16px;">爱心服务中心</b>在这里，你可以心系"红丝带"，感受到我们抗击艾滋的决心；也能看到同学们传递书籍的喜悅；还能在献血活动中感受到浓浓爱意的传递；更能在敬老院活动中倾听老人们的心声。</span></div><div class="little1div"><img src="../img/部门介绍/绿色.jpg" ><span class="title"><b style="font-size: 16px;">绿色环保中心</b>是宣传环保理念的人，绿色不仅是一种环保理念，更是一种可贵的生活态度，而我们就是坚持环保理念，推崇绿色生活态度的绿色战士，绿色环保中心负责军训服设计大赛、地球一小时、绿色出行等大型活动。我的手机 2020/6/23 20:37:36</span></div></div></div></body></html>