需求

在之前的任务中，我们得到了一张这样的页面：

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：按钮截图出来貌似有些色差，请见谅！