用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