html以及 js代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/css/hbfu.css">
</head>
<body><!--页面顶部开始--><a name="yy"></a><div class="top"><div class="left"><img src="/img/logo.png"><div class="sublogo"><img src="/img/yinxin.png"><h4>Newcomer'Session</h4></div></div><div class="right"><a href="#">河大主页</a> |<a href="#">学信网</a></div></div><!-- 页面菜单开始 --><div class="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网上报告</a></li><li><a href="#">入学指南</a></li><li><a href="#">走进河大</a></li><li><a href="#">学在河大</a></li><li><a href="#">家在河大</a></li><li><a href="#">联系我们</a></li><li><a href="#">河大易班</a></li></ul></div><!-- 中间 --><div class="main"><div class="left"><h3><span>快捷方式</span></h3><ul><li><a href="#"><img src="/img/1.png"><h4>学院简介</h4></a></li><li><a href="#"><img src="/img/2.png"><h4>辅导员风评</h4></a></li><li><a href="#"><img src="/img/3.png"><h4>防控疫情</h4></a></li><li><a href="#"><img src="/img/4.png"><h4>咨询留言</h4></a></li></ul></div><div class="middle"><h3><span>通知公告</span></h3><ul><li><a href="#"><div class="time"><h4>27</h4><p>2024.08</p></div><div class="text"><h4>2021级新生网上预报到流程来了</h4><span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span></div></a></li><li><a href="#"><div class="time"><h4>27</h4><p>2024.08</p></div><div class="text"><h4>2021级新生网上预报到流程来了</h4><span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span></div></a></li><li><a href="#"><div class="time"><h4>27</h4><p>2024.08</p></div><div class="text"><h4>2021级新生网上预报到流程来了</h4><span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span></div></a></li><li><a href="#"><div class="time"><h4>27</h4><p>2024.08</p></div><div class="text"><h4>2021级新生网上预报到流程来了</h4><span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span></div></a></li></ul></div><div class="right"><h3><span>视频河大</span><a href="#">more+</a></h3><img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg"><h4>河大学习深情演唱《不忘初心》</h4><ul><li><a href="#">一流征程</a></li><li><a href="#">河北大学校歌</a></li><li><a href="#">坤舆全图</a></li><li><a href="#">钟灵顶秀 翰墨土方</a></li><li><a href="#">梦开始的地方</a></li></ul></div></div><!-- 军训模块 --><div class="exer"><div class="hezi"><div class="top1"><div>军训专题</div><div class="r">more+</div></div><div class="tu"><div class="pho"><span>2024.08.27</span><img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg"><h4>军训小贴士-生活片</h4><p class="image-caption">军训期间体力消耗较大，军训后应保证充足的睡眠，让身体得到充分的休息。每天尽量保证 7-8 小时的睡眠时间，养成良好的作息习惯。可以适当增加午休时间，缓解身体的疲劳感。</p></div><div class="pho"><span>2024.08.27</span><img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg"><h4>军训小贴士-生活片</h4><p class="image-caption">补充营养：军训后，身体需要补充足够的能量和营养。多吃富含蛋白质、碳水化合物和维生素的食物，如鸡肉、鱼肉、蛋类、牛奶、新鲜蔬菜和水果等。注意饮食均衡：避免暴饮暴食和过度节食，保持饮食的均衡和规律。合理搭配食物，确保摄入各种营养素。多喝水：军训期间出汗较多，身体容易缺水。军训后要及时补充水分，每天至少喝 1500-2000 毫升的水。可以适量饮用一些运动饮料，补充电解质。</p></div><div class="pho"><span>2024.08.27</span><img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg"><h4>军训小贴士-生活片</h4><p class="image-caption"> 拉伸运动：军训后进行适当的拉伸运动，可以缓解肌肉紧张和酸痛。重点拉伸腿部、腰部、肩部等部位的肌肉，每个动作保持 15-30 秒，重复 2-3 次。按摩：可以自己进行简单的按摩，或者找专业的按摩师进行按摩。按摩可以促进血液循环，缓解肌肉疲劳。热水浴：泡个热水澡可以放松身心，缓解肌肉酸痛。水温不宜过高，时间不宜过长，一般控制在 15-20 分钟左右。</p></div><div class="pho"><span>2024.08.27</span><img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg"><h4>军训小贴士-生活片</h4><p class="image-caption">军训期间可能会面临一定的压力和挑战，军训后要及时调整心态，缓解压力。可以通过听音乐、看电影、阅读书籍等方式放松心情。与家人和朋友交流：分享军训的经历和感受，听取他们的建议和支持，有助于缓解心理压力。</p></div></div></div><!-- 结尾 --><div class="jiewei"><div class="left"><img src="/img/logo2.png"><div class="sub"><h4>河北大学迎新网</h4><h4>Newcomer'Session</h4></div></div><div class="right"><img src="/img/yxwerweima.png"><div class="sub"><p>邮箱：hbdxxsc@126.com</p><p>版权所有：河北大学党委学生工作部 管理登录</p></div></div><div class="botton"><img src="/img/top.png"><div class="zi">TOP</div></div></div></div>
<script>document.querySelector('.botton').addEventListener('click', function () {window.scrollTo({top: 0,behavior: 'smooth'});});</script>
</body>
</html>CSS
*{padding: 0;margin: 0;
}
a{text-decoration: none;
}
li{list-style: none;
}
/* 页面顶部样式开始 */
.top{width: 80%;margin: 20px auto;display: flex;justify-content: space-between;align-items: center;
}
.top .left{display: flex;align-items: end;
}
.top .left>img{width: 250px;
}
.top .left .sublogo img{width: 55px;margin-left: 4px;margin-bottom: 4px;
}.top .left .sublogo h4{width: 55px;color:firebrick;font-size: 14px;margin-bottom: 4px;
}
.top .right a{color: firebrick;font-size: 14px;text-decoration: none;
}
/* 页面顶部样式结束 */
/* 页面菜单样式开始 */
.menu{background: rgb(165,41,31);
}
.menu ul{width: 80%;margin: 0 auto;display: flex;justify-content: space-between;
}
.menu ul li{list-style: none;/* padding: 10px 13px; */
}
.menu ul li a{display: block;text-decoration: none;color: #fff;padding: 10px 13px;
}
.menu ul li a:hover{color: rgb(165,41,31);background: #fff;
}/* 页面菜单样式结束 */
/* Main */
.main img{width: 50px;
}
.main{width: 80%;margin: 40px auto;display: flex;justify-content: space-between;
}
.main h3 {margin-bottom: 10px;display: flex;justify-content: space-between;border-bottom: 1px solid rgb(221,221,221);
}
.main .left{width: 18%;
}
.main .left ul li{background-color: #333;align-content: center;margin: 11px 0;padding: 10px;
}
.main .left ul li img{width: 50px;
}
.main .left h3{font-size: 14px;font-weight: 500;
}
.main h3 span{font-size: 15px;font-weight: 500;border-bottom: 2px solid rgb(165,41,31);
}
.main h3 a{color: rgb(170,170,170);font-size: 12px;
}
.main h3 a:hover{color: rgb(165,41,31);
}
.main .left ul li a{align-content: center;
}
.main .left ul li a h4{color: #fff;align-content: center;
}
.main .left ul li:nth-child(2){background: yellow;
}
.main .left ul li:nth-child(3){background: blueviolet
}
.main .left ul li:nth-child(4){background: green;
}
.main .left ul li:hover{opacity: 0.7;
}
.main .middle{width: 55%;
}
.main .middle ul{}
.main .middle ul li{margin-bottom: 20px;border-bottom: 1px dashed rgb(228,228,228);padding-bottom: 20px;
}
.main .middle ul li:last-child{border: none;
}
.main .middle ul li a{display: flex;justify-content: space-between;
}
.main .middle ul li a .time{width: 12%;
}
.main .middle ul li a .text{width: 80%;color: yellow;
}
.main .middle ul li a .time h4{font-size: 28px;color: rgb(165,41,31);background: rgb(228,228,228);text-align:center;padding: 7px;
}
.main .middle ul li a .time p{font-size: 12px;color: #fff;background: red;text-align:center;padding: 3px;
}
.main .middle ul li a .text h4{font-size: 15px;font-weight: 500;color: rgb(165,41,31);margin-bottom: 10px;
}
.main .middle ul li a .text span{font-size: 12px;font-weight: 500;color: grey;margin-bottom: 10px;
}
.main .middle ul li a:hover .text span{color: rgb(165,41,31);
}
.main .right{width: 23%;
}
.main .right img{width: 100%;filter: brightness(80%);
}
.main .right img:hover{width: 100%;filter: brightness(100%);
}
.main .right h4{background: rgb(165,41,31);color: #fff;font-size: 14px;
}
.main .right ul li {background: rgb(228,228,228);font-size: 12px;padding: 8px 10px;
}
.main .right ul li a{color:rgb(119,119,119);
}
.main .right ul li:nth-child(even){background: rgb(221,221,221);
}
.main .right ul li:hover a{color: red;
}
.main .right ul li:hover {padding: 30px;
}
/* 军训模块 */
.exer{background-image:url("/img/bg.jpg");
}
.exer .r{font-size: 13px;color: gray;font-weight: 600;
}
.exer .hezi{width: 80%;margin: 0 auto;
}
.exer .hezi .tu{margin-top: 10px;display: flex;justify-content: space-between;
}
.exer .top1{
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
}
.exer .pho{width: 220px;position: relative;flex-direction: column;
}
.exer .pho img{width: 220px;
}
.tu .pho h4{font-size: 14px;font-weight: 400;color: firebrick;
}
.tu .pho span{
position: absolute;
top: 0;
left: 0;
font-size: 14px;
background: firebrick;
color: #fff;
}
.tu .pho p{text-align: left; font-size: 12px;color: #333;
}
/*结尾 */
.jiewei{padding-left: 100px;padding-top: 20px;padding-bottom: 20px;padding-right: 100px;display: flex;background: red;justify-content: space-between;align-items: center;
}
.jiewei .left{display: flex;align-items: end;}
.jiewei .left>img{margin: auto;width: 300px;
}
.jiewei .left .sub h4{color: #fff;font-weight: 500;
}
.jiewei .right{display: flex;align-items: end;
}
.jiewei .right>img{margin: auto;width: 100x;
}
.jiewei .right .sub p{color: #fff;font-weight: 500;
}
.botton{background-color: firebrick;
}
.botton img{width: 30px;
}
.botton .zi {color: #fff;font-size: 15px;
}
.botton .zi:hover{color: #333;
}
 开发记录)
