網(wǎng)頁主要內(nèi)容

UX Team 主頁，訪問對象為公司內(nèi)部同事。主頁主要用來展示三個內(nèi)容入口：Project，Design， Resource。
頁面元素這么少，寫起來也應(yīng)該很簡單。但對于一只沒寫過完整Web 頁面的設(shè)計(jì)汪來說，還是有點(diǎn)額頭冒汗。

使用到的工具

Sketch＋Sublime Text3。兩個應(yīng)用安裝包加起來不到50M ?_?

在預(yù)覽和調(diào)整時(shí)，主要是 Chrome 瀏覽器，后來也開始用Github 來控制版本信息和方便在線預(yù)覽。

步驟

就三個按鈕嘛，不用畫圖，引用一下font icon 就直接搞定咯。好像有點(diǎn)單調(diào)，那就再加個hover 后blingbling 的動效，然后……就完成啦。

是的……你沒有看錯，這是Version 0.1（看了下圖不取關(guān)的都是真愛粉 0.0）

Version 0.1

－“是不是有點(diǎn)偷懶……？”
－“嗯，很有自知之明。”
－“嘿嘿……我只是嘗試一下這樣的效果……”

默默滾回位置上，打開Sketch 開始畫圖…

用Shadowman 的紅＋黑為主要顏色，背景使用icon 填充，中間的三個色塊分別對應(yīng) Project，Design， Resource。

Version 0.2

這厚重的顏色，終于有人看不下去了……于是就被改成了下面的Version 0.3 ：

總體居中對齊，顏色改為了紅＋白，但看起來還是不太順眼：

• 「Visit UX Mojo」放在正中，就像一些頁面的「Download」按鈕一樣，被視為了重點(diǎn)，但重點(diǎn)應(yīng)該是中間三個入口呀。嗯，應(yīng)該放到右上角這個相對最不容易被注意到的角落去…
• content 高低不齊，footer 背景高低不齊， 頁面背景也是花花的，看起來有些凌亂；
• footer 文字居中對齊，logo 卻偏到最左側(cè)，莫名其妙；
• 標(biāo)題＋段落＋button 占據(jù)了接近300px（不是響應(yīng)式頁面），整個頁面高度接近1000px了……在絕大多數(shù)電腦屏幕上都不能完整顯示。

Version 0.3

改改改，于是有了當(dāng)前版本：

• 標(biāo)題方面：
  • 修改長標(biāo)題，使視覺上更簡潔，同時(shí)將「PnT DevOps」作為子標(biāo)題，畢竟這是UX TEAM 的主頁…
  • 在標(biāo)題和小標(biāo)題處適當(dāng)使用大寫，視覺上更為整齊；
• 按鈕：
  • 「Mojo」按鈕放到右上角，突出中間三個入口；
  • 中間三幅圖水平且垂直居中，對齊到一條直線上；
• header 和 footer：
• 分別在屏幕中間700像素范圍內(nèi)兩端對齊。

Version 0.5

咦……元素全部錯位了，字體不對，大小也錯了，頁面也會水土不服嘛。原來小伙伴是用Firefox打開的，而我一直是用Chrome 來調(diào)試頁面的，看來還得來調(diào)整一下元素寫法，解決瀏覽器兼容的問題。

問題的解決

1. 在CSS 中，樣式的覆蓋規(guī)則:

• 外部樣式< 內(nèi)部樣式< 內(nèi)聯(lián)樣式
• 由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝
• 繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝
• 直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝

| CSS選擇器| 權(quán)值 |
| : -------------: |:-------------:|
| 標(biāo)簽選擇器 | 1 |
|類選擇器| 10|
| ID選擇器| 100|
| 內(nèi)聯(lián)樣式 |1000|
|偽元素(:first-child等)| 1|
|偽類(:link等)|10|

• 當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置
• !important的樣式屬性不被覆蓋

參考：
CSS 樣式覆蓋規(guī)則
如何和何時(shí)使用CSS 的 !important

2. 有關(guān)jQuery 加載方式

有時(shí)會看到在引入jQuery 時(shí)有這樣一段代碼：

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>

這樣的寫的話，就可以實(shí)現(xiàn)考第一種方式j(luò)Query 未能加載成功的情況下，自動加載本地jQuery 文件。

參考：
加載jQuery 的正確方式

3. display: block 、inline、 inline-block 的作用

display: block 將元素顯示為塊級元素。對<div>這樣的塊元素，display 屬性默認(rèn)值為block，沒必要再定義（除非之前對display 屬性進(jìn)行過修改 ，如：display:hidden;）；常用于<a> <span>這兩個標(biāo)簽，因?yàn)閷τ诜菈K級元素，定義width height 等和長寬相關(guān)的CSS 屬性時(shí)會發(fā)現(xiàn)完全不生效。

栗子：

<li><a href="#">超鏈接</a></li>
<!--默認(rèn)，鼠標(biāo)移動到文字區(qū)域有效-->

<li><a href="#"  style:{width:100px;height:100px; display:block; color:red; text-decoration:none;} >超鏈接</a></li>
<!--鼠標(biāo)移動到100*100范圍內(nèi)都有效-->

display: inline 內(nèi)聯(lián)元素，和其他元素都在同一行；高、行高、頂和底邊距不可改變，寬度就是文字或者圖片內(nèi)容的寬度，不可自定義。

display: inline-block內(nèi)聯(lián)對象，并可以控制對象內(nèi)容的高、寬等。

參考：
display:inline、block、inline-block的區(qū)別

4. 不同瀏覽器兼容性問題

這次我主要考慮 Chrome、Firefox 和Safari 三種瀏覽器（IE 瀏覽器比較麻煩，所幸公司里沒同事用IE…）。

頁面里面出現(xiàn)的問題：
1 . 引入的字體無法在Firefox 上正常顯示
－ “你好大的膽子…只引一種格式的字體文件”
－ “我去加上…”

對于字體格式，不同瀏覽器支持情況都不同：

我只引用了 .ttf 格式的字體，這三種瀏覽器應(yīng)該是支持的呀，但在Firefox 上還是出了問題，于是乖乖加上其他幾種格式字體……

@font-face{
font-family: 'overpass';
src:url(fonts/Overpass.ttf) format("truetype");/* 最初我只寫了這一種 */
src:url(fonts/Overpass.eot) format("eot");/* IE4＋ */
src:url(fonts/Overpass.svg) format("svg");/* iOS Safari 3.2+ */
src:url(fonts/Overpass.woff) format("woff");/* Modern Browser */
}

2 . 元素位置出現(xiàn)偏差
Firefox 和Safari 中的字體明顯小了幾號，后來發(fā)現(xiàn)是em 單位的問題。

em單位有如下特點(diǎn)：
1 . em的值并不是固定的;
2 . em會繼承父級元素的字體大小（嗯，問題就出在這）。栗子：

#content{
font-size = 1.2em;
}
#p{
font-size = 1em;
}/* 這里p 的字體大小就是 1.2*16px 啦 */

這次如果再加上 IE 瀏覽器舊版本的兼容性問題，一定會頭大0.0

參考：
在線字體格式轉(zhuǎn)換工具

此外，分享一下最近發(fā)現(xiàn)的幾個自認(rèn)為有趣的網(wǎng)站：
Free online IDE and Terminal
馬克飛象（Markdown for Evernote）

小結(jié)

邊學(xué)邊寫，大約花了一周的時(shí)間。這個頁面不需要任何復(fù)雜的框架，也不需要引入JavaScript 和jQuery ，但心境卻和之前看頁面源代碼、臨摹時(shí)完全不一樣了，畢竟這次是在沒有參照的情況下，自己來設(shè)計(jì)和實(shí)現(xiàn)。同時(shí)我也感覺流程和想象中的不太一樣…看著不對、或者不會寫了，就回去改設(shè)計(jì)稿（噓）。這個問題，還是慢慢用技術(shù)來改變吧…

善用Google，解決問題的同時(shí)也可以發(fā)現(xiàn)不少充滿小驚喜的資源；第一次使用Github ，現(xiàn)在真后悔沒有早點(diǎn)親身體驗(yàn)這么實(shí)用的工具；發(fā)現(xiàn)了不少干貨滿滿的前端技術(shù)博客，還發(fā)現(xiàn)了同學(xué)院校友一枚2333。

不懂前端的產(chǎn)品不是好設(shè)計(jì)師，哈哈。期待做下一項(xiàng)產(chǎn)品。