HTML静态网页成品作业(HTML+CSS+JS)——心理健康教育介绍网页(4个页面)

news2024/10/5 16:44:19

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码使用下拉菜单的实现以及首页图片的轮播,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>

	<div class="header-wrapper">
		
		<div class="header">
			<div class="logo">
				<img src="./images/logo.png">
			</div>


			<ul class="nav">
				<li><a href="index.html">首页</a></li>
				<li  onmouseover="overnav(this)" onmouseout="outnav(this)"><a href="zhishi.html">心理知识</a>

					<div class="sub">
						<a href="">知识点1</a>
						<a href="">知识点2</a>
					</div>
				</li>
				<li  onmouseover="overnav(this)" onmouseout="outnav(this)"><a href="shuji.html">心理书籍</a>


					<div class="sub">
						<a href="">书籍1</a>
						<a href="">书籍2</a>
					</div>
				</li>
				<li><a href="reg.html">我要注册</a></li>
			</ul>
		</div>
	</div>

	<div class="banner-wrapper">
		
		<div class="banner">
			<img id="banner1" src="./images/b1.jpg" class="active banner_img">
			<img id="banner2" src="./images/b2.jpg" class="banner_img">
			<img id="banner3" src="./images/b3.jpg" class="banner_img">
		</div>
		<div class="index-list">
			<div id="index1" class="index active" onclick="changeIndex(1)"></div>
			<div id="index2" class="index"  onclick="changeIndex(2)"></div>
			<div id="index3" class="index" onclick="changeIndex(3)"></div>
		</div>
	</div>


	<div class="content-wrapper">
		<div class="content">
			<div class="content-title">
				<div class="content-title-name">心理健康名词解释</div>
				<div class="content-title-line"></div>
			</div>

			<div class="content-detail">
				<div class="content-detail-p">
					<p>
						个体能够适应发展着的环境,具有完善的个性特征;且其认知,情绪反应,意志行为处于积极状态,并能保持正常的调控能力。在生活实践中,能够正确认识自我,自觉控制自己,正确对待外界影响,从而使心理保持平衡协调,就已具备了心理健康的基本特征。
					</p>
					<p>
						心理健康的基本含义是指心理的各个方面及活动过程处于一种良好或正常的状态。心理健康的理想状态是保持性格完美、智力正常、认知正确、情感适当、意志合理、态度积极、行为恰当、适应良好的状态。与心理健康相对应的是心理亚健康以及心理病态。心理健康从不同的角度有不同的含义,衡量标准也有所不同。
					</p>
					<p>
						心理健康,是现代人健康不可分割的重要方面,那么什么是人的心理健康呢?人的生理健康是有标准的,人的心理健康也是有标准的。不过人的心理健康标准不及人的生理健康标准具体与客观。了解与掌握心理健康的定义对于增强与维护人们的健康有很大的意义。当人们掌握了衡量人的心理健康标准,以此为依据对照自己,进行心理健康的自我诊断。发现自己的心理状况某个或某几个方面与心理健康标准有一定距离,就有针对性地加强心理锻炼,以期达到心理健康水平。如果发现自己的心理状态严重地偏离心理健康标准,就要及时地求医,以便早期诊断与早期治疗。
					</p>
				</div>
				<div class="content-detail-img">
					<img src="./images/1.jpg">
				</div>
			</div>




			<div class="content-title">
				<div class="content-title-name">文章列表</div>
				<div class="content-title-line"></div>
			</div>


			<ul class="content-news-list">
				<li class="content-news-item">
					<a href="">研究生心理素质拓展训练营——自助助人,共同成长</a>
					<span>2022-11-29</span>
				</li>
				<li class="content-news-item">
					<a href="">“心海扬帆”辅导员心理沙龙——辅导员谈心谈话工作专题培训</a>
					<span>2022-11-28</span>
				</li>
				<li class="content-news-item">
					<a href="">心理健康教育重在“对症下药”</a>
					<span>2022-11-26</span>
				</li>
				<li class="content-news-item">
					<a href="">找准新时代学生心理健康教育突破口</a>
					<span>2022-11-23</span>
				</li>
				<li class="content-news-item">
					<a href="">学校组织全体辅导员参加全省高校辅导员心理健康教育专题培训</a>
					<span>2022-11-11</span>
				</li>
				<li class="content-news-item">
					<a href="">新生心理测评工作专题培训举办</a>
					<span>2022-11-10</span>
				</li>
				<li class="content-news-item">
					<a href="">新生“心理第一课”开讲</a>
					<span>2022-11-06</span>
				</li>
			</ul>
		</div>
	</div>

	<div class="footer-wrapper">
		<div class="footer">
			心理健康版权所有
		</div>
	</div>




</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1695789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ESP32烧录AT固件并进行MQTT通讯

首先下载AT固件 发布的固件 - ESP32 - — ESP-AT 用户指南 latest 文档 下载烧录工具 下载指导 - ESP32 - — ESP-AT 用户指南 latest 文档 烧录后注意usb的串口是不能发AT指令的 需要用16和17脚 用AT指令确认OK后连WIFI ATCWMODE1 //设置客户端模式 ATCWLAP …

CV大作业28期-使用TensorFlow快速实现图像风格迁移系统

使用TensorFlow快速实现图像风格迁移系统 资源地址&#xff1a;待更新 视频地址&#xff1a;待更新 随着GPT的横空出世&#xff0c;生成式网络也越来越活&#xff0c;现在的大语言模型除了能回答文字上面的内容&#xff0c;并且在图像和视频创作中也表现除了巨大的潜力&#xf…

Websocket助手

功能介绍 WS助手是WebSocket调试的开发工具&#xff0c;该客户端工具可以帮助开发人员快速连接到测试/生产环境&#xff0c;它可以帮助您监视和分析 Websocket 消息&#xff0c;并在开发过程中解决问题&#xff1b;可以模拟客户端实现与服务器的数据交互&#xff0c;并完成批量…

【DZ模板】克米设计APP手机版本地化+完美使用

模版介绍 【DZ模板】价值288克米设计APP手机版DZ模板 数据本地化完美使用 腾讯官方出品discuz论坛DIY的后台设置&#xff0c;功能齐全&#xff0c;论坛功能不亚于葫芦侠&#xff0c;自定义马甲&#xff0c;自定义认证&#xff0c;自定义广告&#xff0c;完全可以打造出自己想…

面试大杂烩之kafka

面试这个领域最近环境不行&#xff0c;所以卷起来流量挺大 关于K8s 其实看我之前的博客&#xff0c;k8s刚有点苗头的时候我就研究过&#xff0c;然后工作的时候间接接触 也自己玩过 但是用的不多就忘记了&#xff0c;正苦于不知道写什么&#xff0c;水一篇 用来面试应该是够了…

【设计模式】JAVA Design Patterns——Static Content Hosting(静态内容托管模式)

&#x1f50d;目的 将静态内容部署到基于云的存储服务&#xff0c;该服务可以将它们直接交付给客户端。 这可以减少对昂贵计算实例的需求。 &#x1f50d;解释 真实世界例子 全球性的营销网站&#xff08;静态内容&#xff09;需要快速的部署以开始吸引潜在的客户。为了将托管…

Weblogic XML反序列化漏洞 [CVE-2017-10271]

漏洞环境搭建请参考 http://t.csdnimg.cn/i11e2 漏洞原理 Weblogic的wls security组件对外提供webservice服务&#xff0c;wls security组件使用了xmldecoder来解析用户传入的xml数据&#xff0c;如果用户进行xml恶意数据的构造&#xff0c;即可触发反序列化漏洞 漏洞版本 O…

LLMs之PEFT之Llama-2:《LoRA Learns Less and Forgets LessLoRA学得更少但遗忘得也更少》翻译与解读

LLMs之PEFT之Llama-2&#xff1a;《LoRA Learns Less and Forgets LessLoRA学得更少但遗忘得也更少》翻译与解读 导读&#xff1a;该论文比较了LoRA与完全微调在代码与数学两个领域的表现。 背景问题&#xff1a;微调大规模语言模型需要非常大的GPU内存。LoRA这一参数高效微调方…

Leetcode | 5-22 | 每日一题 | 找出输掉零场或一场比赛的玩家

&#x1f525;博客介绍&#xff1a; EvLast &#x1f3a5;系列专栏&#xff1a; 数据结构与算法 , 算法入门 , C项目 , Leetcode_DayCode &#x1f3a5; 当前专栏: Leetcode_DayCode 专题 : 数据结构帮助小白快速入门算法 &#x1f44d;&#x1f44d;&#x1f44d;&#x1…

避免锁表:为Update语句中的Where条件添加索引字段

最近在灰度环境中遇到一个问题&#xff1a;某项业务在创建数据时耗时异常长&#xff0c;但同样的代码在预发环境中并未出现此问题。起初我们以为是调用第三方接口导致的性能问题&#xff0c;但通过日志分析发现第三方接口的响应时间正常。最终&#xff0c;我们发现工单表的数据…

VTK 数据处理:特征边提取

VTK 数据处理&#xff1a;特征边提取 VTK 数据处理&#xff1a;特征边提取原理实例 1&#xff1a;边界边提取实例 2&#xff1a;模型特征边提取实例 3&#xff1a;利用 vtkFeatureEdges 提取的边界补洞实例 4&#xff1a;利用 vtkFillHolesFilter 补洞 VTK 数据处理&#xff1a…

cs与msf权限传递以及mimikatz抓取win2012明文密码

简单的介绍 cs与msf的简单介绍 我查找过资料得出&#xff0c;Cobalt Strike 的前身是 Armitage&#xff0c;而 Armitage 又可以理解为 Metasploit Framework 的图形界面版&#xff0c;因此 Cobalt Strike 与 Metasploit Framework 在很多地方都是兼容的&#xff0c;所以我们便…

开源免费绘画软件—Krita

一、前言 Krita是一款自由开源的数字绘画软件&#xff0c;适用于Windows、macOS和Linux操作系统。它被广泛用于制作漫画、接景、材质和插画等多种类型的数字艺术作品。Krita的主要目标是提供合适的工具&#xff0c;让画师可以从头到尾完成一幅数字绘画作品的创作。 Krita具备强…

5. C++网络编程-UDP协议的实现

UDP是无连接的。 UDP Server网络编程基本步骤 创建socket&#xff0c;指定使用UDP协议将socket与地址和端口绑定使用recv/send接收/发送数据 由于UDP是无连接的&#xff0c;直接侦听就行使用close关闭连接 这个UDP接收数据的时候用的API是recvfrom,发送数据是sendto 客户端 …

检测头篇 | YOLOv8改进之添加小目标检测头 / 添加大目标检测头 / 减少检测头

前言:Hello大家好,我是小哥谈。本文首先给大家展示原始YOLOv8的网络结构图,然后再对其进行改变,即增加小目标检测头、增加大目标检测头和减少检测头。🌈 目录 🚀1.网络结构图

pikachu靶场中的CSRF、SSRF通关

目录 1、CSRF介绍 2、CSRF&#xff08;get&#xff09; 3、CSRF&#xff08;post&#xff09; 4、CSRF Token 5、SSRF介绍 6、SSRF&#xff08;curl&#xff09; 7、SSRF&#xff08;file_get-content&#xff09; 8、CSRF与SSRF的区别 最近在学习CSRF、SSRF漏洞&#…

ASP+ACCESS酒店房间预约系统设计

摘要 随着国内经济形势持续发展&#xff0c;国内酒店业进入难得的发展高峰期&#xff0c;使得中外资本家纷纷将目光投向中低端市场。然而&#xff0c;中国酒店业的区域结构不合理、竞争手段不足和市场对经济型酒店的需求日益显露&#xff0c;以及2008年北京奥运会、2010年上海…

【全网最全】2024电工杯数学建模A题成品论文+前三题完整解答matlab+py代码等(后续会更新成品论文)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 【全网最全】2024电工杯数学建模A题成品论文前三题完整解答matlabpy代码等&#xff08;后续会更新成品论文&#xff09;「首先来看看目前已有的资料&am…

Python | Leetcode Python题解之第112题路径总和

题目&#xff1a; 题解&#xff1a; class Solution:def hasPathSum(self, root: TreeNode, sum: int) -> bool:if not root:return Falseif not root.left and not root.right:return sum root.valreturn self.hasPathSum(root.left, sum - root.val) or self.hasPathSum…

微信小程序预览图片和H5使用canvas实现图片+蒙层+文字

1、效果 2.H5实现 <!--* Author: limingfang* Date: 2024-05-20 10:26:51* LastEditors: limingfang* LastEditTime: 2024-05-21 16:31:11* Description: --> <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8&q…