HTML-⼼理测试
⽤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>
这是⼀个很流⾏的⼼理测试。⼈们总在寻快乐，也试图将⾃⼰想象成⼀个乐观主义者，⽆奈⽣活中有很多压⼒，以致⼀些⼈不得不强颜欢笑。这些⼈从表⾯看，是⾮常快乐充满激情的，但实际上只是将⾃⼰的负⾯情绪隐藏起来，内⼼极其郁闷。这种现象，我们称之为阳光型抑郁症。那么，你会患上这种阳光型抑郁症吗？来做个⼼理测试吧！
</p>
<a href="01.html"><button>点击开始</button></a>
</div>
</body>
</html>
测试页HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9/12</title>
<link rel="stylesheet" type="text/css" href="css/csstyle.css"/> </head>
<body class="bball">
<div class="test">
<h2>测你的抑郁指数，超⽕的⼼理测试</h2>
<p>9/12：就算和热闹的⼈在⼀起，你也会感到孤单吗？</p>    <div><img src="img/09.jpg" height="300px"/></div>
<div class="test-cho">
<a href="10.html" class="test-cho1">不会</a>
<a href="11.html" class="test-cho2">有时</a>
<a href="12.html" class="test-cho3">是的</a>
</div>
</div>
</body>
</html>
测试结果页HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/csstyle.css"/>
</head>
<body >
<div class="res">
<h2 >测你的抑郁指数，超⽕的⼼理测试</h2>
<div><img src="img/16.jpg" height="250px"/></div>
<div class="res-ack">
<i >详细分析：</i>
<p >
你⼈前⼈后的表现实在是判若两⼈，甚⾄有⼀点精神分裂的嫌疑。不管遇到多⼤的⿇烦，受了多⼤的委屈，你都好像完全不在意，“如若不坚强，伤⼼给谁看”是你⼼⾥不断告诉⾃⼰的话，你不准⾃⼰随意依赖，不准⾃⼰表现脆弱，你只准⾃⼰向⼤家展⽰积极向上的⼀⾯。但实际上，你转⾝过去时那微笑收敛⼀刹那的隐痛，要⼀个⼈承受好久，真正的快乐也早就离你远去了。⼈⽣的旅途不会⼀直顺利，总会有失败，但不要因为怕受伤就伪装⾃⼰，及时的发泄，才能回前进的勇⽓和快乐。
</p>
</div>
<a href="index.html"><button >再测⼀次</button></a>
</div>
</body>
</html>
CSS代码
body{
margin: 0px;
padding: 0px;
}
.bball,.bbtest{
background-color: rgb(228,242,255); }
.all,.test,.res{
width: 1000px;
margin: 0 auto;
position: relative;
}
.all h1{
text-align: center;
color: dodgerblue;
}
.all img,.test img{
display: block;
margin: 0 auto;
}
.all p{
padding: 10px 100px;
color: #1E90FF;
font-size: 17px;
font-family: "微软雅⿊";
text-indent: 2em;
}
.all a{
text-decoration: none;
}
.all button,.res button{
color: white;
font-size: 16px;
width: 150px;
height: 40px;
border: none;
cursor: pointer;
}
.all button{
background-color: cornflowerblue;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.res button{
float: right;
margin-top: 90px;
}
.test h2{
text-align: center;
color: lightskyblue;
margin-bottom: 40px;
}
.test p{
color: rgb(30,144,210);
font-size: 20px;
font-family: "微软雅⿊";
padding-left: 200px;
html里的float是什么意思}
.test .test-cho{
margin-top: 50px;
margin-left: 210px;
}
.test .test-cho a{
text-decoration: none;
display: block;
color: rgb(30,144,210);
width: 580.5px;
height: 35px;
line-height: 35px;
font-size: 16px;
text-align: center;
}
.test .test-cho a:hover{
background-color: #fff;
color: #000;
}
.test .test-cho .test-cho1,.test .test-cho .test-cho3{ border: 1px solid #ccc;
}
.test .test-cho .test-cho2{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.res h2{
text-align: center;
margin-bottom: 100px;
}
.res img{
float: left;
margin-top: 30px;
margin-right: 80px;
}
.res .res-ack{
margin-top: 120px;
}