CSS 美化试卷

前几天用纯 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 美化考试试卷