• 基于HTML+CSS+JavaScript大学生心理测试网毕业设计毕业论文源码

    🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
    💂 作者主页: 【进入主页—🚀获取更多源码】
    🎓 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>《大学生心理健康》是心理学术用语。指的是大学生的心理具有青年中期的许多特点，但作为一个特殊群体，大学生又不能完全等同于社会上的青年。心理是否健康一般采用量表测量，其标准不是固定不变的。心理健康标准随着时代变迁、文化背景变化而变化。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模板 、等!

    📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

  • 相关阅读:
    解决Java异常java.sql.SQLException: Unexpected exception encountered during query.
    Total Software Deployment为您的企业网络管理软件部署
    狂神。SpringBoot员工管理系统项目练习。
    多线程编程的基础用法
    【VIO】第1讲 IMU 传感器
    第二章：jQuery基本操作
    前后端分离不可忽视的陷阱，深入剖析挑战，分享解决方案，助你顺利实施分离开发。
    JNDI 、C3P0 、DBCP、JDBC、ODBC的区别
    redis高可用的哨兵模式实现
    魔功心法-枚举篇
  • 原文地址：https://blog.csdn.net/qq_38517811/article/details/127117112