我之前的公司主营业务是会计，作为运营人员，就需要对会计有一个基本的了解。

因此，我也报名了今年的初级会计职称考试，想通过刷题来巩固知识，但网上的刷题系统太贵了，而且不能自定义题目。

我就想着，设计一个客观题考试答题系统。

首先，我要考虑的就是，题目和界面分离。

由于之前有开发过 Excel 的知识，想着用 Excel 做一个系统。于是，就有了下面的这个软件：

但由于使用 VBA，某些控件的可调整性实在是太差了，比如这里的题目描述部分，无法调整行距，所有的字都挤在了一起：

想着用 C# 开发吧，但还要用到 VS 这个大软件，遂弃。

而我之前，也学过一些前端的知识，这篇文章中也有体现。因此，我想通过HTML+CSS+JS 来开发这样一个考试系统。

开发这个系统，有很多需要注意的细节，这里，我会通过几篇文章来叙述。

此次是第一篇——界面搭建。

由于是自己使用，登录界面就直接省略了，而结算界面，我会在后续章节写到，这里，专注于考试答题界面的实现。

▌一、HTML界面结构

由于设计能力有限，我参考了站酷的上作品的界面：

那么，有了参考，我们就来搭建我们的 HTML 页面了。

HTML 结构部分比较简单，这里直接把代码放出来，可以简单看一下：

▌二、大部分简单元素

而对于大部分元素的 CSS 样式，大部分都比较简单，无非是一些浮动布局、盒模型等，这些你可以在菜鸟教程网站中免费学习：

这里，我选择几个比较特殊的元素，分享一下它的设计思路。

首先，左侧的每道大题的按钮，我使用的是 button 按钮，而对于 button，需要修改默认的样式，比如边框颜色、背景透明、选中后的外框线等：

另外，我使用字符“-”模拟按钮中的图标，而不做任何修改的情况下，字体显示会会偏下：

于是我将字体调整为了黑体，这样，就更像个按钮了，而且，可以在后期的交互中，将其中的文本直接更改为+，就不用再添加图片了。

丨如非必要，不用图片，这是我开发系统的一个简单原则。

同理，对于右上角的暂停按钮，我也采用了这样的方法。

▌三、背景渐变色

第二个，就是左右两部分之间的分隔渐变色：

如果没有这个渐变，就会显得两侧泾渭分明。

而一般的实现手法，可能是截取一个 1px 的横条背景图，纵向平铺。但本着尽量不使用图片的原则，我选择了一个比较复杂的 css 属性——渐变背景。

其中，第一个参数 to right 是渐变的方向，之后的各个参数，是具体的颜色和位置，我只需要从原图片中取出对应的颜色即可。

关于渐变色的部分，你也可以从这里获取：

▌四、背景使用svg最后，我们看一下倒计时部分：

实现很简单，使用背景图片即可。但我不想引入图片，于是想到了使用 base64 的方法，将图片嵌入到 css 中，但由于base64 的方法，可能会用很多的字节：

于是想到，用体积更小的 svg 图片，在网上找到了这样的一份参考文档：

最后，用这段代码就搞定了：

好了，关于界面的配置，就先介绍到这里，HTML+CSS，还是比较容易弄的，只需要你有点耐心，调整一些参数。

后面的几个部分，我将会讲解一下 JS 实现用户的交互。