HTML-心理测试

最新推荐文章于 2024-08-22 08:30:55 发布

原创

最新推荐文章于 2024-08-22 08:30:55 发布 · 5.2k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #心理测试 #抑郁测试

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

用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">
		<div class="all">
			<h1>测你的抑郁指数，超火的心理测试</h1>
			<div><img src="img/00.jpg" height="350px"/></div>
			<p>
				这是一个很流行的心理测试。人们总在寻找快乐，也试图将自己想象成一个乐观主义者，无奈生活中有很多压力，以致一些人不得不强颜欢笑。这些人从表面看，是非常快乐充满激情

最低0.47元/天解锁文章