Web大学生网页作业成品——心理健康教育介绍网页设计与实现(HTML+CSS+JS)(4个页面)

news2024/11/13 12:12:23

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。🎉🎉🎉

文章目录

  • 一、作品介绍 🔥
  • 二、作品演示 ☁️
  • 三、代码目录 🏠
  • 四、网站代码 👿
    • 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、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0046

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

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

相关文章

Redis Zset 类型:Score 属性在数据排序中的作用

Zset 有序集合 一 . zset 的引入二 . 常见命令2.1 zadd、zrange2.2 zcard2.3 zcount2.4 zrevrange、zrangebyscore2.5 zpopmax、zpopmin2.6 bzpopmax、bzpopmin2.7 zrank、zrevrank2.8 zscore2.9 zrem、zremrangebyrank、zremrangebyscore2.10 zincrby2.11 集合间操作交集 : zi…

自动化运维之SaltStack 部署应用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

009.数据库管理-数据字典动态性能视图

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

唯众发布职业院校信创实训室解决方案 助力职教数字化高质量发展

在数字化转型的大潮中&#xff0c;教育行业正迎来前所未有的变革机遇。为了积极响应国家关于自主可控、信息技术应用创新&#xff08;信创&#xff09;的战略部署&#xff0c;唯众近日发布了专为职业院校量身定制的信创实训室解决方案&#xff0c;旨在通过先进的技术平台和丰富…

摄影竞赛系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;教师管理&#xff0c;学生管理&#xff0c;辅导员管理&#xff0c;项目信息管理&#xff0c;作品信息管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#…

代码随想录刷题day21丨669. 修剪二叉搜索树,108.将有序数组转换为二叉搜索树,538.把二叉搜索树转换为累加树,二叉树总结

代码随想录刷题day21丨669. 修剪二叉搜索树&#xff0c;108.将有序数组转换为二叉搜索树&#xff0c;538.把二叉搜索树转换为累加树&#xff0c;二叉树总结 1.题目 1.1修剪二叉搜索树 题目链接&#xff1a;669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 视频…

bootstrap下拉多选框

1、引用(引用资源下载) <!-- Latest compiled and minified CSS --> <link rel"stylesheet" href"static/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src"static/js/bootstrap…

golang-开发工具及package

1. 开发工具 工欲善其事&#xff0c;必先利其器&#xff0c;我选择vscode&#xff0c;其它的工具比如goland也不错 下载地址&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我的环境是是debian linux&#xff0c;所以我下载deb包&#xff0c;下载完成后&am…

CTFHub技能树-备份文件下载-vim缓存

目录 方法一&#xff1a;直接浏览器访问 方法二&#xff1a;使用kali恢复vim缓存文件 方法三&#xff1a;直接使用curl访问 最后同样备份文件系列的都可用dirsearch扫描 当开发人员在线上环境中使用 vim 编辑器&#xff0c;在使用过程中会留下 vim 编辑器缓存&#xff0c;当…

江科大/江协科技 STM32学习笔记P30

文章目录 一、FlyMcu串口下载1、串口下载的流程2、串口烧录的选项字节区 二、STLINK Utility 一、FlyMcu串口下载 1、串口下载的流程 例如机器人给自己换电池&#xff0c;需要拆掉旧电池再装上新电池&#xff0c;为了实现这个步骤需要再做一个小机器人&#xff0c;需要换电池时…

WinCC Modbus TCP 通信

概述 从版本WinCC V7.0 开始&#xff0c;WinCC支持Modbus TCP通讯&#xff0c;WinCC中的Modbus TCP驱动主要是针对施耐德PLC开发的&#xff0c;支持的PLC类型如下&#xff1a; 图1 本文档以Quantum CPU651和 Premium P57为例&#xff0c;介绍WinCC V7.2 的Modbus TCP通讯的组…

随手记:小程序体积超出2M包大小如何优化

小程序的包体积限制是2M&#xff0c;超出包大小如何优化 先简单列出&#xff0c;最近比较忙&#xff0c;后续优化明细&#xff0c;有着急的先留言踢我 1.分包 留几个主要的页面体积小的&#xff0c;剩下的在page.json中拆到subpackages中&#xff0c;简单举个例子 "page…

总结一下windows电脑字体模糊的优化方案

问题&#xff1a;谷歌浏览器上页面显示的字体非常细&#xff0c;有点费眼睛了&#x1f47e; 解决方案&#xff1a; 方案1&#xff1a;手动调整ClearType文本。方案2&#xff1a;英伟达显卡控制面板->管理3d设置->关闭全局平滑FXAA&#xff08;如果某个软件需要使用平滑处…

《‌黑神话:‌悟空》‌游戏攻略‌

时光荏苒&#xff0c;岁月如梭&#xff0c;不知不觉已经来到了2024年的9月份了。 ‌突然想写一篇关于《‌黑神话&#xff1a;‌悟空》‌的游戏攻略‌。 在《‌黑神话&#xff1a;‌悟空》‌这款以中国古代名著《‌西游记》‌为背景的动作角色扮演游戏中&#xff0c;‌玩家将扮…

J.U.C Review - 阻塞队列原理/源码分析

文章目录 阻塞队列的由来BlockingQueue的操作方法BlockingQueue的实现类ArrayBlockingQueueLinkedBlockingQueueDelayQueuePriorityBlockingQueueSynchronousQueue 阻塞队列原理深入分析1. 构造器和监视器初始化2. put操作的实现3. take操作的实现4. 注意事项小结 线程池中的阻…

泰克THDP0100(Tektronix)thdp0100高压差分探头详情资料

泰克 THDP0100 高压差分探头具有较大的差分动态范围功能&#xff0c;为用户提供了安全的高压测量探头解决方案。每个探头都配有两种尺寸的钩尖&#xff0c;并具有超范围视觉和声音指示器&#xff0c;当用户超出探头的线性范围时会发出警告。泰克 THDP0100 探头配备 TEkVPI 接口…

【vue css】css字体设置渐变色

实现的效果&#xff1a; 添加的代码&#xff1a; h2 {background-image: -webkit-linear-gradient(bottom, #1bffff, #ffffff);background-clip: text;//背景被裁剪成文字的前景色。-webkit-text-fill-color: transparent;//指定了文本字符的填充颜色。若未设置此属性&#xf…

【Linux操作系统】:Linux生产者消费者模型

目录 生产者消费者模型的概念 生产者消费者模型的特点 生产者消费者模型优点 基于BlockingQueue的生产者消费者模型 基于 BlockingQueue 的生产者消费者模型的概念 模拟实现基于阻塞队列的生产消费模型 生产者消费者模型的概念 生产者消费者模式就是通过一个容器来解决生…

MySQL Email验证流程详解:从注册到激活!

MySQL Email通知系统搭建教程&#xff01;如何从MySQL发送邮件&#xff1f; MySQL Email验证是一个至关重要的环节&#xff0c;它确保了用户注册过程的安全性和有效性。AokSend将详细介绍从用户注册到MySQL Email激活的完整流程&#xff0c;帮助开发者更好地理解和实现这一功能…

东风汽车将出席第五届中国新能源汽车热管理创新国际峰会

2024第五届中国新能源汽车热管理创新国际峰会将于11月14-15日在上海召开。峰会将汇聚来自全球的行业专家、学者、企业领袖及技术精英&#xff0c;共同探讨新能源汽车热管理领域的最新技术成果和发展趋势。 本次峰会将涵盖整车热管理系统构建、新能源商用车热管理、智能热管理系…