需求
在之前的任務中，我們得到了一張這樣的頁面：
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：按鈕截圖出來貌似有些色差，請見諒！
