作為大部分中國人都要使用的網站，12306肩負起了龐大的用戶和數據壓力。每年的那么幾段時間，數以億計的用戶會同時涌向這個網站。尤其是春節、十一長假，買不上票成了家常便飯。

雖然很多時候都在吐槽這個網站，但也要承認，為了讓全國人民更好地回家，12306也一直在努力。比如去年下半年整體網站UI改版，也給我們展示了滿滿的誠意，盡管還有很大的優化空間。

2018年11月以后的新版本

2018年11月之前的舊版本

并且也和其他大型互聯網企業的產品一樣緊跟最新動態和潮流。比如為了迎接70年國慶，12306首頁現在換上了具有節日感的紅色主題，估計大家買票的時候都見到過。

需要注意的是，這次主題更換只在首頁，其他頁面還是標志性的藍色默認主題。

那么有設計師會好奇了：這個主題是怎么實現的？如果自己公司的官網首頁也要換主題，作為設計師要怎么做？這次國慶主題隱藏了哪些設計秘密呢？下面就一起來深入了解下12306首頁的主題實現方式，從中我們會學習很多設計相關的css代碼知識。

對css樣式不了解的同學可以趁此機會學習一些最最基本的css樣式屬性。本文使用的瀏覽器為Chrome。

開始前有個疑問，雖然是國慶主題，但看著導航欄頂部一條白色的棉狀物……確定不是春節主題么？

頂部搜索區域

先從頭部開始，看頂部的搜索區域。

搜索框底部的小火車從原先的灰色換成了金黃色，鼠標右鍵-檢查，就可以調用Chrome的開發模式查看網頁代碼。

.header-right就是搜索的區塊名字，這個塊使用了background-image屬性，即背景圖片。后面一大堆藍色的字符就是調用的圖片路徑。之所以有三個background-image是因為做了瀏覽器兼容和高清屏適配，-webkit-前綴就是Chrome和Safari這兩款瀏覽器內核使用的。由于使用的是Chrome瀏覽器，因此第二個屬性會優先生效。

12306整體使用的background-image背景圖片都對高清屏做了適配，用了image-set方法，瀏覽器會在普通屏下顯示1x的圖像，Retina屏幕下顯示2x的圖像。可見12306做的還是比較細心的……

右側搜索按鈕search-btn直接更改background為紅色，替換了原先的藍色。

background是一個綜合屬性，可以拆分為background-color（背景顏色）、background-image（背景圖片）、background-size（背景圖像尺寸）等等，分別寫也是可以的。

左側的12306logo有個小bug。因為logo是白底不透明的，導致和底部的漸變背景起沖突，形成貼膏藥一樣的不融合效果，需要仔細看才能發現。不過在我們設計師的像素眼前，這些bug都無處遁形。建議logo做成png透明的，一勞永逸。

logo圖片還有個小問題，1x是jpg，2x是png。

這兩個圖下載本地后，在Mac上都可以正常預覽，但是當我用PS打開jpg這個圖的時候顯示下圖這個提示。

估計大家都會遇到這樣的問題，原因是本來jpg的圖被強制改成了png后綴。瀏覽器雖認識，但是專業的PS就會報錯。改成png就可以正常打開了。

主導航區域

終于看清了這條白色的棉狀物圖片位置代碼。

.header這塊使用了背景圖片，background-repeat：repeat-x表示背景X軸橫向重復，因為背景圖只是一塊小的header.png，這樣可以減少圖片體積。把背景圖下載后放大，看看奇怪的白色到底是什么。

這沒跑了，肯定是雪。十一國慶大喜的日子為什么會用到雪的素材呢？。

導航中每個功能hover和選中的狀態也使用了background-image背景圖片，是中國傳統古典花紋樣式。

banner功能區域

這塊區域的紅色主題也是使用了background-image背景圖片，比如左側的常用查詢和訂餐費選中狀態，以及查詢按鈕背景。

這里我們需要注意的是圖標的實現方式。12306的圖標沒有使用傳統的png，而是使用了比較流行的iconfont，這里點個贊，比一些設計網站都超前。尤其是在這種換主題的需求中，iconfont只需要更改圖標顏色代碼即可，而不像png圖一樣需要重新制作和上傳，并且是矢量高清的。

其中的實現方式使用了:before偽元素，這個偽元素允許在元素內容的最前面插入生成內容。比如在車票前面插入iconfont圖標。顏色的更改是通過父級的a鏈接來實現的。

這里面可以更改color文字顏色，車票的iconfont會被當成改文字處理，因此這里的color同時負責定義圖標和文字的顏色。

border-left左描邊，右側的屬性中3px代表描邊寬度，solid代表實線而不是虛線，最后一個代表描邊顏色。實際上我們在Sketch中也是這么做描邊屬性的，只是Sketch目前不支持單描邊，雖然可以通過內陰影來實現單描邊，但是沒有css靈活。

中部金剛區和廣告功能區

看著這些可愛的圖標，12306的設計師真的是用心了，非常喜慶……

并不是所有的圖標都要做成iconfont，需要根據圖標的特點來進行格式選擇。金剛區圖標也是使用了background-image背景圖片，不過并不是7個圖標單獨切圖，而是使用了css雪碧圖，很熟悉的名字是吧。

雪碧圖是根據CSS sprite音譯過來的，就是將很多很多的小圖標放在一張圖片上，稱之為雪碧圖。目的是為了減少服務器請求、提高訪問速度，尤其是對12306這種巨量用戶的網站來說，速度很重要。

這么大的圖每個功能需要占用一個小圖標，是需要通過background-position背景定位來實現的，比如后面的-140px 0 就是位置數值。

整個金剛區的切圖資源是這個樣子，其中有些圖片沒有被調用，估計后面會用到吧……

再下面的廣告功能區域實際上就是圖片，這個沒什么可說的，很簡單直接替換圖片。

footer頁面區域

最下面的頁腳區域整體使用了一張1920的大背景，體積有31k，實際上切成小條水平平鋪就可以了。還是那句話，對于巨型流量訪問的網站應該盡量減少圖片占用的體積，提升流量峰值時的用戶體驗。

下圖就是1920的切圖資源預覽。

上文講了background這個屬性，那么留個問題，footer這里的background代表什么意思呢？

右側導航區域

最后我們看下右側的浮動導航。

頂部的70年logo原本是沒有的，這次也是使用了:before偽元素實現，直接在頂部加背景圖片。屬性上使用了position: absolute絕對定位，top: -20px 代表距頂部的距離，可以是負值，left: 0代表距左側的距離。

圖標上也是使用了iconfont，直接改成了金黃色，整個導航背景使用了紅色。





天津市犀思科技有限公司是專業從事web應用定制開發的一家公司，主營業務包括定制功能型網站建設開發、微信小程序開發、微信公眾號開發、APP定制開發、天津企業微信開發、ERP、CRM、OA等企業應用場景信息化解決方案等服務，致力于成為中國領先的IT服務及行業解決方案的提供商。