🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
R44LW 大学生心理咨询
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>大学生心理测试网</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-plugin-slide.js"></script>
<script >
window.onload = function() {
var text = document.querySelector(".text");
var btn = document.querySelector(".btn");
btn.addEventListener("click", function() {
var inputValue = text.value; //获取输入的文本
if(inputValue == "首页") {
window.location.href = "index.html";
}
else if(inputValue == "资讯") {
window.location.href = "meiju.html";
}
else if(inputValue == "招聘") {
window.location.href = "meiwen.html";
}
else if(inputValue == "旅游") {
window.location.href = "suibi.html";
}
else if(inputValue == "论坛") {
window.location.href = "zheli.html";
}
else {
alert("您所输入的内容不合法！");
}
}, false);
};
</script>
</head>
<body>
<div class="ww"><a href="#"><img src="images/a.gif" /></a></div>
<div id="header">
<div class="ss">
<div class="logo">
<a href="index.html"><img src="images/logo.png" /></a>
</div>
<div class="kk"><input type="text" class="text">
<button type="button" class="btn">搜索</button></div>
</div>
<div id="nav">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="wenda.html">心里问答</a></li>
<li><a href="ceshi.html" target="_blank">开始测试</a></li>
<li><a href="denglu.html">登录</a></li>
<li><a href="zhuce.html">注册</a></li>
<li><a href="xinxi.html">人员信息</a></li>
<li><a href="zixun.html">咨询辅导</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="ar">
<div id="content">
<div class="iright">
<h3>相关书籍</h3>
<dl>
<dt><a href="#"><img src="images/img1.jpg"></a></dt>
<dd>大学生人际交往心理学</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/img2.jpg"></a></dt>
<dd>大学生心里危机干预</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/img3.jpg"></a></dt>
<dd>大学生心理健康教程</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/img4.jpg"></a></dt>
<dd>大学心理健康教育</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/img5.jpg"></a></dt>
<dd>青少年心理健康</dd>
</dl>
</div>
<div class ='Homeslide' >
<div class ='Homeslide_bigwrap'>
<div class='Homeslide_hand0'></div>
<div class='Homeslide_hand1'></div>
<a target='_blank' class='Homeslide_bigpicdiv_mask'>loading...</a>
<div class='Homeslide_bigpicdiv'>
<a href='#' target='_blank'><img src=""></a>
</div>
<div class='Homeslide_detail'>
<p>loading...</p>
</div>
</div>
<div class='Homeslide_thumb'>
<ul>loading...</ul>
</div>
</div></center>
<script type="text/javascript">
//data
var home_slide_data =
[{
"title": "5分钟心理小游戏",
"subtitle": "5分钟心理小游戏",
"image": "images\/img12.jpg",
"thumb": "images\/img12.jpg",
"summary": "“《5分钟心理小游戏》该书主要通过心理游戏在娱乐中了解自己，“认识自己、了解自己”，是一个古老而永恒的话题……",
"mark": "0"
}, {
"title": "青少年心理健康",
"subtitle": "青少年心理健康",
"image": "images\/img6.jpg",
"thumb": "images\/img6.jpg",
"summary": "《青少年心理健康》是盛秋鹏于2008年1月1日由人民卫生出版社出版的一本图书。该书是全国中等卫生职业教育卫生部“十一五”规划教材选修课，是中等卫生职业教育开设的一门新课程.....",
"mark": "0"
}, {
"title": "人际交往心理学",
"subtitle": "人际交往心理学",
"image": "images\/m1.jpg",
"thumb": "images\/m1.jpg",
"summary": "《人际交往心理学》是首都师范大学出版社2003年2月出版的图书，作者是刘晓新和毕爱萍。本书的主要内容是对人们在人际交往中遇到的烦恼和困惑进行指导，以帮助人们构建良好的人际关系....",
"mark": "0"
}, {
"title": "5分钟心理小游戏",
"subtitle": "5分钟心理小游戏",
"image": "images\/img12.jpg",
"thumb": "images\/img12.jpg",
"summary": "“《5分钟心理小游戏》该书主要通过心理游戏在娱乐中了解自己，“认识自己、了解自己”，是一个古老而永恒的话题……",
"mark": "0"
}, {
"title": "青少年心理健康",
"subtitle": "青少年心理健康",
"image": "images\/img6.jpg",
"thumb": "images\/img6.jpg",
"summary": "《青少年心理健康》是盛秋鹏于2008年1月1日由人民卫生出版社出版的一本图书。该书是全国中等卫生职业教育卫生部“十一五”规划教材选修课，是中等卫生职业教育开设的一门新课程.....",
"mark": "0"
}, {
"title": "人际交往心理学",
"subtitle": "人际交往心理学",
"image": "images\/m1.jpg",
"thumb": "images\/m1.jpg",
"summary": "《人际交往心理学》是首都师范大学出版社2003年2月出版的图书，作者是刘晓新和毕爱萍。本书的主要内容是对人们在人际交往中遇到的烦恼和困惑进行指导，以帮助人们构建良好的人际关系....",
"mark": "0"
}];
//console.log(home_slide_data);
//实例化...................................
$('.Homeslide').homeslide(home_slide_data,true,3000);
</script>
<div class="wcontent">
<div class="jianjie">
<h3>什么是大学生心理健康？</h3>
<p><img src="images/1.jpg" width="310" align="left" / style="padding-right:14px;">《大学生心理健康》是心理学术用语。指的是大学生的心理具有青年中期的许多特点，但作为一个特殊群体，大学生又不能完全等同于社会上的青年。心理是否健康一般采用量表测量，其标准不是固定不变的。心理健康标准随着时代变迁、文化背景变化而变化。</p>
<p>大学生群体，一个看似轻松，事实上却承担巨大压力的群体，学业、生活、情感、就业多重大山的压迫下，大学生的心理健康已经告急。一个个血淋淋的事实，在不断警示我们，要关注大学生心理健康。2000年，由北师大心理系团总支、学生会倡议，十多所高校响应，并经北京市团委、学联批准，确定每年的5月25日为全国大学生心理健康日，目的是呼吁大学生关注自己的心理健康，并以此掀起社会关注心理健康热潮。</p>
</div>
<div class="b-box">
<h3>健康标准描述</h3>
<dl>
<a href="#"><img src="images/m4.jpg" /></a>
<dt><a href="#">标准界限</a></dt>
<dd class="tz">大学生心理健康与不健康也并无明显界限，而是一个连续化的过程，如将正常比作白色，将不正常比作黑色，那么在白色与黑色之间存在着...</dd>
</dl>
<dd class="lb"><a href="#">①有适度的安全感，有自尊心，对自我的成就有价值感。</a></dd>
<dd class="lb"><a href="#">②适度地自我批评，不过分夸耀自己也不过分苛责自己</a></dd>
<dd class="lb"><a href="#">③在日常生活中，具有适度的主动性，不为环境所左右</a></dd>
<dd class="lb"><a href="#">④理智，现实，客观，与现实有良好的接触，能容忍生活中挫折的打击，无过度的幻想。</a></dd>
<dd class="lb"><a href="#">⑤适度地接受个人的需要，并具有满足此种需要的能力。</a></dd>
<dd class="lb"><a href="#">⑥有自知之明，了解自己的动机和目的，能对自己的能力作客观的估计。</a></dd>
<dd class="lb"><a href="#">⑦能保持人格的完整与和谐，个人的价值观能适应社会的标准，对自己的工作能集中注意力</a></dd>
<dd class="lb"><a href="#">⑧有切合实际的生活目标。</a></dd>
</div>
<div class="b-box">
<h3>问题集锦</h3>
<dl>
<a href="#"><img src="images/m5.jpg" /></a>
<dt><a href="#">问题集锦</a></dt>
<dd class="tz">目前大学生的心理状况让人担忧。近几次心理健康调查结果显示，大学生现已成为心理弱势群体，心理处于不健康或亚健康状态的学生约占五成。</dd>
</dl>
<dd class="lb"><a href="#">1、智力正常。智力正常是人正常生活最基本的心理条件。</a></dd>
<dd class="lb"><a href="#">2、了解自我，悦纳自我。</a></dd>
<dd class="lb"><a href="#">3、接受他人，善与他人相处。</a></dd>
<dd class="lb"><a href="#">4、热爱生活，乐于参加工作与学习。</a></dd>
<dd class="lb"><a href="#">5、能协调与控制情绪，心境良好。</a></dd>
<dd class="lb"><a href="#">6、心理行为符合年龄特征。</a></dd>
<dd class="lb"><a href="#">7、人格和谐完整。心理健康的人，人格结构包括气质、能力</a></dd>
<dd class="lb"><a href="#">8、心理健康的人能够面对现实、接受现实，并能够主动地去适应现实，进一步地改造现实，而不是逃避现实。</a></dd>
</div>
</div>
<div class="hot">
<h3>影响因素</h3>
<ul>
<li><img src="images/hot.gif" /><a href="#">环境变迁</a></li>
<li><img src="images/hot.gif" /><a href="#">学业期望 </a></li>
<li><img src="images/hot.gif" /><a href="#">人际关系</a></li>
<li><img src="images/hot.gif" /><a href="#">自我认知</a></li>
<li><img src="images/hot.gif" /><a href="#">心理冲突</a></li>
<li><img src="images/hot.gif" /><a href="#">生活事件</a></li>
<li><img src="images/hot.gif" /><a href="#">家庭环境</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<p>
首页 | 心里问答 | 开始测试 |登录 | 注册 | 人员信息</p>
<p>© Copyright 2019 大学生心理测试网</p>
</div>
</div>
</body>
</html>
🏠CSS样式代码
*{padding:0px;margin:0px;}
a{text-decoration:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
ul,li{list-style:none;}
body{auto;font:12px "Microsoft YaHei", 微软雅黑, "Hiragino Sans GB", "Hiragino Sans GB W3", tahoma, arial, simsun, 宋体;color: #5d5d5d;background: url(../images/main_bg.jpg);background-size:cover;background-position: center top;background-attachment: fixed;}
.clear{clear:both;}
#header{height:200px;width:100%;}
#nav{width:100%;background:#08534f;border-bottom:1px solid rgb(85, 151, 101);height:50px;line-height:50px;text-align:center;}
#nav ul{width:770px;margin:auto;}
#nav ul li{float:left;text-align:center;}
#nav ul li a{display:block;font-size:16px;color:#ffffff;padding:0 20px;}
#nav ul li a:hover{background: #FFFFFF;border-radius:50px 0; color:#0099FF;}
#nav ul .active a{background: #FFFFFF;border-radius:50px 0; color:#0099FF;}
#main{width:100%;}
#content{width:1000px;height:auto;margin:20px auto;}
.ss{ width:1000px; height:120px; margin: 0 auto;}
.logo{ width:200px; float:left;}
.logo img { margin-left:20px; margin-top:40px;}
.kk { width:500px; float:right; }
.kk input { width:400px; height:30px; margin-top:40px; float:left;}
.kk button { width:50px; height:34px; border:1px solid #999999; float:left; margin-top:40px;background:#FFFFFF; text-align:center; line-height:30px;}
.sum{border-bottom:#ffffff 1px solid;font-size:12px;height:40px;line-height:40px;margin: auto;width:1000px;}
.sum span{float:right;color:#ffffff;}
.sum a{display:block;width:100px;color:#ffffff;float:left;text-align:center;}
.n2{background:#27918d;}
.bloglist{width:1000px;margin:auto;}
.bloglist ul li a{color:#333;font-size:15px;display:block;margin-bottom:10px;font-weight:700;}
.rr{ width:900px; }
.mainbox{background:#ffffff;width:400px;padding:20px 0;margin:40px 0;float:left; margin-left:30px; }
.mainbox img{float:left;margin:0 20px;}
.bloglis{width:1000px;margin:auto;background:url(../images/line_bg.jpg) repeat-y 764px 0;}
.bloglis ul li a{color:#333;font-size:15px;display:block;margin-bottom:10px;font-weight:700;}
.mainbo{background:#ffffff;width:730px;border-radius:5px;position:relative;padding:20px 0;margin:40px 0;height:190px;}
.mainbo::before{content:"";width:0px;height:0px;border-style:solid;border-width:0px 0 20px 22px;border-color:transparent transparent transparent #ffffff;position:absolute;left:730px;top:23px;}
.mainbo::after{content:"";width:10px;height:10px;border-radius:50%;position:absolute;left:758px;top:16px;background:#CCCCCE;border:2px solid #fff;transition:all 0.5s;}
.mainbo img{float:left;margin:0 20px;}
.mainb{background:#ffffff;width:730px;border-radius:5px;position:relative;padding:20px 0;margin:40px 0;}
.mainb::before{content:"";width:0px;height:0px;border-style:solid;border-width:0px 0 20px 22px;border-color:transparent transparent transparent #ffffff;position:absolute;left:730px;top:23px;}
.mainb::after{content:"";width:10px;height:10px;border-radius:50%;position:absolute;left:758px;top:16px;background:#CCCCCE;border:2px solid #fff;transition:all 0.5s;}
.mainb img{float:left;margin:0 20px;}
.boximg{width:60px;position:absolute;left:-50px;top:-10px;border-radius:100%;}
.sy img{width:150px;height:190px;float:left;margin:0 20px;}
.sy p{padding: 0 20px 20px;font-size: 13px;}
.sy p a{color:#333;}
.yy p { padding-left:50px; padding-right:30px; font-size:15px; line-height:26px;}
.yy a { padding-left:40px;}
.dateview{position:absolute;left:788px;top: 20px;width: 125px;line-height: 30px;background:#27918d;border-radius: 0px 40px;text-align: center;color: #ffffff;}
#footer{width:100%;height:130px;background:black;margin-top:100px;}
#footer p{line-height:50px;text-align:center;}
.ar{width:100%;}
.article{width:1000px;height:auto;margin:20px auto;}
.pic{width:1000px;height:auto;margin:auto;}
.arleft{margin-top:20px;width:198px;height:400px;background:white;float:left;border-right:1px solid #e2e2e2;}
.arright{width:750px;background:white;float:left;}
.arright ul{padding:60px 40px;}
.arright img{margin:0 auto;display:block;height:auto;padding-bottom:20px;max-width:600px;}
.arright h1{font-size:25px;height:50px;line-height:50px;text-align:center;border-bottom:1px solid #e2e2e2;margin-bottom:20px;}
.arright p{line-height:35px;font-size:16px;text-indent:2em;}
.pic ul{width:1000px;margin:auto;}
.pic ul li{float:left;width:224px;height:320px;margin:30px 20px 30px 0;background:#ffffff;}
.pic ul li em{ width:100%; overflow:hidden; text-align:center; padding:30px 0; display:block; border-bottom:1px dashed #CCCCCC;}
.pic ul li h1{ font-size:16px; color:#000; padding:20px 10px 0 14px;}
.pic img{width:140px;height:140px;border:1px solid #bdb9b9;}
.pic ul li p{padding:12px 10px 0 14px;line-height:20px; font-size:14px;}
.pic ul li h2{ font-size:16px; color:#000; padding:10px 10px 0 14px;}
.duanyu{text-align:center;}
/*幻灯片*/
.Homeslide{width:730px;height:425px;color:#666565;overflow: hidden;position:relative;background:#fff;padding:10px;}
.Homeslide_hand0{width: 37px;height:53px;position:absolute;left: 0;top:93px;background:url(../images/home_slide.png) 0 -53px;cursor: pointer;}
.Homeslide_hand0:hover{background-position: 0 0;}
.Homeslide_hand1{width: 37px;height:53px;position:absolute;right: 0;top:93px;background:url(images/home_slide.png) -37px -53px;cursor: pointer;}
.Homeslide_hand1:hover{background-position: -37px 0}
.Homeslide_bigwrap{width:730px;height:318px;position:relative;}
.Homeslide_bigpicdiv{width:730px;height:248px;}
.Homeslide_bigpicdiv_mask{display:block;width: 100%;height:40px;line-height: 40px;font-size: 16px;text-indent:15px;position:absolute;left: 0;top: 209px;color:#fff;background: url(../images/home_slide.png) 0 74px;}
.Homeslide_bigpicdiv img{width:100%;height:248px;}
.Homeslide_detail{height:70px;border-left: 1px solid #d2d2d2;border-right: 1px solid #d2d2d2;line-height:2em;}
.Homeslide_detail p{width:690px;padding:10px 25px 0 15px;float:left;height: 52px;overflow: hidden;background: #fff;}
.Homeslide_ralate{height: 36px;border-left: 1px solid #d2d2d2;line-height:1;float: left;padding-left: 26px;margin-top: 16px;}
.Homeslide_ralate a{color:#ff6600;}
.Homeslide_thumb{height: 106px;border:1px solid #d2d2d2;border-top: none;background:#f2f2f2;position:relative;}
.Homeslide_angle{width:13px; height:7px; position:absolute;left:55px;top:-7px; overflow:hidden;display:none;background:url(../images/angle.gif) -1px -1px;}
.Homeslide_thumb ul{position:absolute;left:0;top:0;width:10000px;}
.Homeslide_thumb li{width:122px;height:95px;float:left;text-align: center;line-height:12px;cursor:pointer;position:relative;padding-top: 11px;color:#474747}
.Homeslide_thumb li.this{background:#d2d2d2;}
.Homeslide_thumb li.this .Homeslide_angle{display:block;}
.Homeslide_thumb li img{width:100px;height:59px;display:block;margin:0 auto;margin-bottom:13px;}
.iright{width:240px;height:445px;float:right;background-color:#fff;}
.iright h3,.hot h3{padding:10px;border-bottom:#26938e 2px solid;}
.iright dl{padding:10px;height:60px;}
.iright dl dt{float:left;}
.iright dl dt img{width:90px;height:60px;}
.iright dl dd{font-size:14px;width:110px;float:right;}
.wcontent{width:750px;background:#fff;float:left;margin-top:10px;}
.b-box{width:375px;float:left;margin-bottom:20px;}
.b-box h3{padding:10px;border-bottom:#26938e 2px solid;border-top:#dedede 1px solid;}
.b-box dl{padding:10px;width:370px;height:110px;}
.b-box dl img{width:150px;height:110px;float:left;margin-right:10px;}
.b-box dt a{display:block;margin:10px;font-size:15px;color:#333;}
.b-box dd.tz{width:200px;height:64px;overflow:hidden;}
.b-box dd.lb{margin-left:10px;line-height:25px;}
.b-box dd.lb a{display:block;height:25px;width:340px;padding-left:10px;color:#333;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;}
.hot{width:240px;background-color:#fff;margin-top:10px;float:right;}
.hot ul{padding:10px;}
.hot img{margin-right:10px;}
.hot ul li{height:30px;line-height:30px;}
.hot ul li a{color:#333;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;}
.jianjie{ width:100%; overflow:hidden;}
.jianjie h3{padding:10px;border-bottom:#26938e 2px solid;border-top:#dedede 1px solid; margin-bottom:10px;}
.jianjie p{ padding:0 10px 6px 10px; font-size:14px; color:#333; line-height:24px;}
.ww { width:50px; height:50px; position:fixed; right:0; bottom: 0px; text-align:center; line-height:40px;}
.b-box dd.lb a:hover{ color:#26938e;}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
扫一扫
5123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
