HTML-心理测试

最新推荐文章于 2025-03-19 23:40:06 发布

DDL_lalala

最新推荐文章于 2025-03-19 23:40:06 发布

阅读量4.9k

点赞数 4

分类专栏： HTML 文章标签： HTML CSS 心理测试抑郁测试

本文链接：https://blog.youkuaiyun.com/DDL_lalala/article/details/101351776

版权

本文介绍了一种使用HTML和CSS创建的简单抑郁心理测试。测试分为三个页面：主页、测试题和结果页。通过CSS的定位和浮动特性实现了交互效果，测试结果页会根据用户选择呈现不同背景和样式。虽然存在代码冗余问题，但整体设计直观易用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用HTML/CSS做的一个简单流行的抑郁小测试

描述：从手机上做了类似的心理测试后，突然想着可以用HTML实现啊，就做了这个，很简单很好玩，只用到了HTML和CSS。使用HTML和CSS对网页进行整体布局，利用CSS的定位和浮动特性将图片和文字正确显示，将CSS样式进行整合。

我是分成了三个页面做的，第一部分是主页（就是简单描述一下这个心理测试是什么），第二部分就是测试题（根据不同的问题，有其对应的图片，当鼠标移入选项时会出现与未移入鼠标不同的效果，清晰明了），第三部分是结果页（共有几个测试结果，根据测试结果的不同，页面背景、文字颜色、图片等整体效果都呈现不同，还加上了在这里插入图片描述的按钮，感觉自己胖胖哒~）

话不多说，直接上代码。

主页HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>抑郁测试</title>
		<link rel="stylesheet" type="text/css" href="css/csstyle.css"/>
	</head>
	<body class="bball">
		&l

最低0.47元/天解锁文章