需求
在之前的任务中，我们得到了一张这样的页面：
UML
现在我们要在原来的基础上，添加CSS样式，修改为这样：
UML测试
这个时候，我才发现自己没有好好的为网页布局，仅仅是做好了页面而已。
这就很尴尬了
分析
- 首先是标题居中，可以用
text-align: center; - 然后考试信息变为一行并加了边框，可以放在一个
div内部，为div加边框 - 个人信息与考试信息类似
- 每道大题的题目加了边框和背景颜色（这里我使用了
lightgray颜色） - 每个小题的题目加粗并且增加了行距（行高自行设定），可以用
{line-height: 40px; font-weight: bold;} - 文本框的大小可以使用
textarea{height: 80px; width: 98%;}，当然具体的值要视情况而定 - 按钮的背景色/文字颜色等通过下面方式设定：
background-color: royalblue; color: white; padding: 5px 10px; - 还有重要的一部分就是“圆角/倒角”：使用
border-radus设置半径
需要设置的地方有div的边框还有按钮的边缘 - 当然还有很多细节需要注意，比如：页面的整体布局、外间距（margin）、内间距（padding）等等
编码
本人使用纯手工方式写的CSS样式表，有很多不足之处望指出：
*{margin:0 auto;}
div, section, footer{padding: 5px 15px; border-radius: 5px;}
.content{width: 960px;}
input[type=text]{width: 150px;}
/*header*/
form > .header h2{text-align: center;}
form > .header div{border: 1px solid darkgray; height: 40px; line-height: 40px; margin-top: 10px;}
form > .header div span{display: block; float: left; width: 295px; font-weight: bold;}
/*section*/
.center section{padding: 0; border: 1px solid darkgray; line-height: 30px; padding-bottom: 20px; margin-top: 10px;}
.center section header{background-color: lightgray; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.center section header h4{line-height: 45px; padding-left: 15px;}
.center section ol{margin-left: 15px;}
.center section span{line-height: 40px; font-weight: bold;}
#correct+span{color: green;}
#incorrect+span{color: red;}
textarea{height: 80px; width: 98%;}
/*footer*/
footer{text-align: center;}
footer input{background-color: royalblue; color: white; padding: 5px 10px; border-radius: 5px;}
效果
top
middle
bottom
详细的HTML和CSS，请点这里。
PS：按钮截图出来貌似有些色差，请见谅！
