前几天用纯 HTML 完成了一套试卷，今天来使用 CSS 美化试卷。
先看看需要实现成什么样：
美化后的试卷样式
一、先将标题居中
先使用 display: table; 定义一个块级框。
再使用 width: auto; 设置宽度为自适应。
使用 margin-left: auto; margin-right: auto; 将左右外边距设置为自适应。
css 代码为：
.center {
display: table;
width: auto;
margin-left: auto;
margin-right: auto;
}
实现的效果：
标题居中
二、美化标题底下第一大题上面部分
先使用 border-style 设置边框样式。可以将边框设置为凹槽边框，使用 border-style: groove; 来设置。这样的边框是直角的，我们可以使用 border-radius 来将直角改变成圆角。
还需要将 div 块级元素换行属性去掉，可以使用 display: inline; 来改变块级元素的换行属性。
使用 float 来调整边框里面的位置，使用 float 后会出现浮动，我们可以使用 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">考试科目： 统一建模语言</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>
实现效果：
实现效果
四、美化提交按钮和第五大题
先将按钮居中，可以使用标题居中的 .center 。
实现效果如下：
实现效果
五、整体加上左右内边距
css 代码 ：
body {
padding-right: 40px;
padding-left: 40px;
}
这样就完成了用 css 美化试卷。因为不会滚动截屏大家最后整体结果可以看这里 css 美化考试试卷
