作為大部分中國人都要使用的網(wǎng)站，12306肩負(fù)起了龐大的用戶和數(shù)據(jù)壓力。每年的那么幾段時(shí)間，數(shù)以億計(jì)的用戶會(huì)同時(shí)涌向這個(gè)網(wǎng)站。尤其是春節(jié)、十一長(zhǎng)假，買不上票成了家常便飯。

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

2018年11月以后的新版本

2018年11月之前的舊版本

并且也和其他大型互聯(lián)網(wǎng)企業(yè)的產(chǎn)品一樣緊跟最新動(dòng)態(tài)和潮流。比如為了迎接70年國慶，12306首頁現(xiàn)在換上了具有節(jié)日感的紅色主題，估計(jì)大家買票的時(shí)候都見到過。

需要注意的是，這次主題更換只在首頁，其他頁面還是標(biāo)志性的藍(lán)色默認(rèn)主題。

那么有設(shè)計(jì)師會(huì)好奇了：這個(gè)主題是怎么實(shí)現(xiàn)的？如果自己公司的官網(wǎng)首頁也要換主題，作為設(shè)計(jì)師要怎么做？這次國慶主題隱藏了哪些設(shè)計(jì)秘密呢？下面就一起來深入了解下12306首頁的主題實(shí)現(xiàn)方式，從中我們會(huì)學(xué)習(xí)很多設(shè)計(jì)相關(guān)的css代碼知識(shí)。

對(duì)css樣式不了解的同學(xué)可以趁此機(jī)會(huì)學(xué)習(xí)一些最最基本的css樣式屬性。本文使用的瀏覽器為Chrome。

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

頂部搜索區(qū)域

先從頭部開始，看頂部的搜索區(qū)域。

搜索框底部的小火車從原先的灰色換成了金黃色，鼠標(biāo)右鍵-檢查，就可以調(diào)用Chrome的開發(fā)模式查看網(wǎng)頁代碼。

.header-right就是搜索的區(qū)塊名字，這個(gè)塊使用了background-image屬性，即背景圖片。后面一大堆藍(lán)色的字符就是調(diào)用的圖片路徑。之所以有三個(gè)background-image是因?yàn)樽隽藶g覽器兼容和高清屏適配，-webkit-前綴就是Chrome和Safari這兩款瀏覽器內(nèi)核使用的。由于使用的是Chrome瀏覽器，因此第二個(gè)屬性會(huì)優(yōu)先生效。

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

右側(cè)搜索按鈕search-btn直接更改background為紅色，替換了原先的藍(lán)色。

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

左側(cè)的12306logo有個(gè)小bug。因?yàn)閘ogo是白底不透明的，導(dǎo)致和底部的漸變背景起沖突，形成貼膏藥一樣的不融合效果，需要仔細(xì)看才能發(fā)現(xiàn)。不過在我們?cè)O(shè)計(jì)師的像素眼前，這些bug都無處遁形。建議logo做成png透明的，一勞永逸。

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

這兩個(gè)圖下載本地后，在Mac上都可以正常預(yù)覽，但是當(dāng)我用PS打開jpg這個(gè)圖的時(shí)候顯示下圖這個(gè)提示。

估計(jì)大家都會(huì)遇到這樣的問題，原因是本來jpg的圖被強(qiáng)制改成了png后綴。瀏覽器雖認(rèn)識(shí)，但是專業(yè)的PS就會(huì)報(bào)錯(cuò)。改成png就可以正常打開了。

主導(dǎo)航區(qū)域

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

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

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

導(dǎo)航中每個(gè)功能hover和選中的狀態(tài)也使用了background-image背景圖片，是中國傳統(tǒng)古典花紋樣式。

banner功能區(qū)域

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

這里我們需要注意的是圖標(biāo)的實(shí)現(xiàn)方式。12306的圖標(biāo)沒有使用傳統(tǒng)的png，而是使用了比較流行的iconfont，這里點(diǎn)個(gè)贊，比一些設(shè)計(jì)網(wǎng)站都超前。尤其是在這種換主題的需求中，iconfont只需要更改圖標(biāo)顏色代碼即可，而不像png圖一樣需要重新制作和上傳，并且是矢量高清的。

其中的實(shí)現(xiàn)方式使用了:before偽元素，這個(gè)偽元素允許在元素內(nèi)容的最前面插入生成內(nèi)容。比如在車票前面插入iconfont圖標(biāo)。顏色的更改是通過父級(jí)的a鏈接來實(shí)現(xiàn)的。

這里面可以更改color文字顏色，車票的iconfont會(huì)被當(dāng)成改文字處理，因此這里的color同時(shí)負(fù)責(zé)定義圖標(biāo)和文字的顏色。

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

中部金剛區(qū)和廣告功能區(qū)

看著這些可愛的圖標(biāo)，12306的設(shè)計(jì)師真的是用心了，非常喜慶……

并不是所有的圖標(biāo)都要做成iconfont，需要根據(jù)圖標(biāo)的特點(diǎn)來進(jìn)行格式選擇。金剛區(qū)圖標(biāo)也是使用了background-image背景圖片，不過并不是7個(gè)圖標(biāo)單獨(dú)切圖，而是使用了css雪碧圖，很熟悉的名字是吧。

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

這么大的圖每個(gè)功能需要占用一個(gè)小圖標(biāo)，是需要通過background-position背景定位來實(shí)現(xiàn)的，比如后面的-140px 0 就是位置數(shù)值。

整個(gè)金剛區(qū)的切圖資源是這個(gè)樣子，其中有些圖片沒有被調(diào)用，估計(jì)后面會(huì)用到吧……

再下面的廣告功能區(qū)域?qū)嶋H上就是圖片，這個(gè)沒什么可說的，很簡(jiǎn)單直接替換圖片。

footer頁面區(qū)域

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

下圖就是1920的切圖資源預(yù)覽。

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

右側(cè)導(dǎo)航區(qū)域

最后我們看下右側(cè)的浮動(dòng)導(dǎo)航。

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

圖標(biāo)上也是使用了iconfont，直接改成了金黃色，整個(gè)導(dǎo)航背景使用了紅色。





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