我之前的公司主營(yíng)業(yè)務(wù)是會(huì)計(jì)，作為運(yùn)營(yíng)人員，就需要對(duì)會(huì)計(jì)有一個(gè)基本的了解。

因此，我也報(bào)名了今年的初級(jí)會(huì)計(jì)職稱考試，想通過刷題來鞏固知識(shí)，但網(wǎng)上的刷題系統(tǒng)太貴了，而且不能自定義題目。

我就想著，設(shè)計(jì)一個(gè)客觀題考試答題系統(tǒng)。

首先，我要考慮的就是，題目和界面分離。

由于之前有開發(fā)過 Excel 的知識(shí)，想著用 Excel 做一個(gè)系統(tǒng)。于是，就有了下面的這個(gè)軟件：

但由于使用 VBA，某些控件的可調(diào)整性實(shí)在是太差了，比如這里的題目描述部分，無法調(diào)整行距，所有的字都擠在了一起：

想著用 C# 開發(fā)吧，但還要用到 VS 這個(gè)大軟件，遂棄。

而我之前，也學(xué)過一些前端的知識(shí)，這篇文章中也有體現(xiàn)。因此，我想通過HTML+CSS+JS 來開發(fā)這樣一個(gè)考試系統(tǒng)。

開發(fā)這個(gè)系統(tǒng)，有很多需要注意的細(xì)節(jié)，這里，我會(huì)通過幾篇文章來敘述。

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

由于是自己使用，登錄界面就直接省略了，而結(jié)算界面，我會(huì)在后續(xù)章節(jié)寫到，這里，專注于考試答題界面的實(shí)現(xiàn)。

▌一、HTML界面結(jié)構(gòu)

由于設(shè)計(jì)能力有限，我參考了站酷的上作品的界面：

那么，有了參考，我們就來搭建我們的 HTML 頁(yè)面了。

HTML 結(jié)構(gòu)部分比較簡(jiǎn)單，這里直接把代碼放出來，可以簡(jiǎn)單看一下：

▌二、大部分簡(jiǎn)單元素

而對(duì)于大部分元素的 CSS 樣式，大部分都比較簡(jiǎn)單，無非是一些浮動(dòng)布局、盒模型等，這些你可以在菜鳥教程網(wǎng)站中免費(fèi)學(xué)習(xí)：

這里，我選擇幾個(gè)比較特殊的元素，分享一下它的設(shè)計(jì)思路。

首先，左側(cè)的每道大題的按鈕，我使用的是 button 按鈕，而對(duì)于 button，需要修改默認(rèn)的樣式，比如邊框顏色、背景透明、選中后的外框線等：

另外，我使用字符“-”模擬按鈕中的圖標(biāo)，而不做任何修改的情況下，字體顯示會(huì)會(huì)偏下：

于是我將字體調(diào)整為了黑體，這樣，就更像個(gè)按鈕了，而且，可以在后期的交互中，將其中的文本直接更改為+，就不用再添加圖片了。

丨如非必要，不用圖片，這是我開發(fā)系統(tǒng)的一個(gè)簡(jiǎn)單原則。

同理，對(duì)于右上角的暫停按鈕，我也采用了這樣的方法。

▌三、背景漸變色

第二個(gè)，就是左右兩部分之間的分隔漸變色：

如果沒有這個(gè)漸變，就會(huì)顯得兩側(cè)涇渭分明。

而一般的實(shí)現(xiàn)手法，可能是截取一個(gè) 1px 的橫條背景圖，縱向平鋪。但本著盡量不使用圖片的原則，我選擇了一個(gè)比較復(fù)雜的 css 屬性——漸變背景。

其中，第一個(gè)參數(shù) to right 是漸變的方向，之后的各個(gè)參數(shù)，是具體的顏色和位置，我只需要從原圖片中取出對(duì)應(yīng)的顏色即可。

關(guān)于漸變色的部分，你也可以從這里獲?。?/p>

▌四、背景使用svg
最后，我們看一下倒計(jì)時(shí)部分：

實(shí)現(xiàn)很簡(jiǎn)單，使用背景圖片即可。
但我不想引入圖片，于是想到了使用 base64 的方法，將圖片嵌入到 css 中，但由于base64 的方法，可能會(huì)用很多的字節(jié)：

于是想到，用體積更小的 svg 圖片，在網(wǎng)上找到了這樣的一份參考文檔：

最后，用這段代碼就搞定了：

好了，關(guān)于界面的配置，就先介紹到這里，HTML+CSS，還是比較容易弄的，只需要你有點(diǎn)耐心，調(diào)整一些參數(shù)。

后面的幾個(gè)部分，我將會(huì)講解一下 JS 實(shí)現(xiàn)用戶的交互。