前幾天用純 HTML 完成了一套試卷倦青，今天來使用 CSS 美化試卷站欺。
先看看需要實現(xiàn)成什么樣：
美化后的試卷樣式
一、先將標題居中
先使用 display: table; 定義一個塊級框。
再使用 width: auto; 設置寬度為自適應峭沦。
使用 margin-left: auto; margin-right: auto; 將左右外邊距設置為自適應。
css 代碼為：
.center {
display: table;
width: auto;
margin-left: auto;
margin-right: auto;
}
實現(xiàn)的效果：
標題居中
二吼鱼、美化標題底下第一大題上面部分
先使用 border-style 設置邊框樣式」剿啵可以將邊框設置為凹槽邊框，使用 border-style: groove; 來設置琐谤。這樣的邊框是直角的，我們可以使用 border-radius 來將直角改變成圓角。
還需要將 div 塊級元素換行屬性去掉旺聚，可以使用 display: inline; 來改變塊級元素的換行屬性。
使用 float 來調(diào)整邊框里面的位置砰粹，使用 float 后會出現(xiàn)浮動，我們可以使用 clear 來清除碱璃。
css 代碼：
.borderStyle {
border-style: groove; /*邊框樣式*/
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
border-radius: 10px; /*設置圓角*/
}
.divInline {
display: inline; /*塊級元素不換行*/
}
.floatLeft {
width: 33%;
float: left;
}
html 代碼：
<div class="borderStyle">
<div class="divInline floatLeft">考試科目： 統(tǒng)一建模語言</div>
<div class="divInline floatLeft" id="time">時間： 100分</div>
<div class="divInline floatLeft" id="grade">得分： </div>
<div style="clear: both"></div>
</div>
<div class="borderStyle">
<div class="divInline floatLeft">
<span>班級（必填）：</span>
<input type="text" id="class">
</div>
<div class="divInline floatLeft">
<span>學號（必填）：</span>
<input type="text" id="schoolNumber">
</div>
<div class="divInline floatLeft">
<span>姓名（必填）：</span>
<input type="text" id="name">
</div>
<div style="clear: both"></div>
</div>
效果如下：
效果
三嵌器、美化所有的題目
先給每道大題加一個大框，然后使用 background-color 設置背景圣拄，然后再給大題里的小題加一個框，這個框只需要顯示上邊框就可以庇谆。
css 代碼：
/*設置大邊框*/
.borderTopic {
border-style: groove;
margin-bottom: 20px;
border-radius: 10px;
background-color: beige; /*設置背景顏色*/
}
/*設置小題邊框*/
.borderTitle {
background-color: #ffffff;
padding-left: 60px;
padding-top: 20px;
padding-bottom: 20px;
border-top-style: groove; /*設置上邊框樣式*/
margin-bottom: 0px;
}
.moveRight {
padding-left: 20px;
}
html 代碼：
<div class="borderTopic">
<h3 class="moveRight">一、填空題（每空5分串述，共20分）</h3>
<ol class="borderTitle">
<li>
<span>UML的中文全稱是：</span>
<div><input type="text" id="1-1"></div>
</li>
<li>
<span>對象最突出的特性是：</span>
<div>
<input type="text" id="1-1-1">
<input type="text" id="1-1-2">
<input type="text" id="1-1-3">
</div>
</li>
</ol>
</div>
實現(xiàn)效果：
實現(xiàn)效果
四寞肖、美化提交按鈕和第五大題
先將按鈕居中，可以使用標題居中的 .center 新蟆。
實現(xiàn)效果如下：
實現(xiàn)效果
五、整體加上左右內(nèi)邊距
css 代碼 ：
body {
padding-right: 40px;
padding-left: 40px;
}
這樣就完成了用 css 美化試卷琼稻。因為不會滾動截屏大家最后整體結(jié)果可以看這里 css 美化考試試卷
