一個前端練手做品

前言

最近在求職，做爲一名項目經歷不多的轉行汪，結果至關悲催。沒實戰經歷→公司不要→沒實戰經歷，妥妥的雞蛋相生無限循環。上萬能的知乎求大神幫助，卻發現沒實戰經驗的妹子很受歡迎，沒實戰經驗的漢子狗都不理。只能感嘆，時代再變，處女情結依舊。知乎上也有不少大神建議先模仿，我以爲頗有道理，決定模仿知乎，因而就有了下面這個東西（Demo & 源碼）：

 

CSS佈局方案：沒用知乎的佈局方式，全面使用了彈性盒子，之因此選擇彈性盒子是由於他使用超級方便，並且跟HTML的結構更加匹配。以前說過，浮動和絕對定位實現自適應佈局的關鍵在於width的auto，一般須要將子元素移出父元素以外（點此看佈局方案的總結），這明顯是不符合咱們對結構的認知，彈性盒則不存在這種問題。

js：原生js，沒使用庫和框架。js目前寫的不多也很隨意，主要是作了一點動態交互效果，其實都是一些小控件的交互。目前精力有限因此目先後端相關的數據接口爲0，有打算用node作後臺，如今先這樣吧。。。

本來這個項目只是爲了練習一下CSS的使用而作的，因此UI方面有點想法，想要作成可複用、可定製、可拆分的樣子，可是目前看來作的還不好。另外，前端界很熱的一些CSS預處理器我都沒有用，由於如今顯然是直接用chrome結合Alloy Designer來直接修改css文件會更快。。。

關於github

以前註冊了個github，但做爲一個新人，除了複製別人的代碼就是自擼，很想試試 pull request 是怎樣的，但卻找不到一個能夠插手的項目。這種感受，跟看了不少啓蒙教育片卻找不到一個實戰partner，是同樣同樣的。我想有這種感受的不止我一個吧（喂喂，不是看教育片的感受啊），因此想發出來看看有沒有想練手的同窗。

若是你有github帳戶，但還沒試過 pull request 的話，來吧 fork 我而後追加你的內容推給我吧（github源碼）。對照 m.zhihu.com，一個小模塊，一個動態效果，甚至一個錯別字的修正均可以。

 

說說知乎的設計

我對藍天白雲愛到無以復加，天然也很是喜歡知乎的藍色色調。知乎給人的感受很清爽，界面也很是的精緻。爲了製造出立體感，裏面大量使用了漸變和陰影。

1）好比說這樣的：

 

搜索框有淡淡的內外陰影，看出來了嗎？反正我是沒看出來。。。CSS：

box-shadow: inset 0 1px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1);

效果調重一點： 

哦，立體效果，知乎的參數也太含蓄了吧。看了一下其餘地方，幾乎全部輸入框都被設置成了這種陰影樣式。

2）看看陰影+漸變：

這是搜索欄的背景，我眼神很差，看出陰影已花光我全部視力，實在看不到漸變。。。。

background: linear-gradient(to bottom,#086ed5,#055db5);
border-bottom: 1px solid #044e97;
box-shadow: 0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15);

這個陰影跟上面的恰好相反，漸變的兩個顏色相差無幾，很難看出來。話說，知乎前端都是處女座的嗎? 這就是知乎的簡練風格吧，這些效果太濃反而會分散用戶對內容的注意力，過猶不及啊。

順帶溫習一下常見的發光和漸變：  

3）漸變還能這樣

漸變？寶寶看不到啊！

.zm-noti7-frame-border {
    height: 1px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right,rgba(250,250,250,.1) 0,rgba(240,240,240,.8) 1%,#ddd 4%,#ddd 96%,rgba(240,240,240,.8) 99%,rgba(250,250,250,.1) 100%);
}

也就是說，在列表下面竟然還加了個div，專門用來顯示線條兩端的漸變效果。。。

4）顏色方面

知乎將內容分紅了兩類，與問題相關的信息用了純黑色，其餘都用灰色表示。這樣的區分還蠻有意思的，這裏用到UI設計中一個褪色的原則，突出了重點信息。另外灰色元素看起來蠻有書生意氣的淡雅feel，配合上面的漸變和陰影，總體都很協調。

 

一些注意點

1）命名規範

開始的時候沒注意這個問題，雖然知道要規範化，可是殊不知道如何去作。CSS越寫越多，感受愈來愈亂，而後去找編碼規範好好看了一下，接着就是痛苦的重寫。不一樣公司組織有不一樣的編碼規範，規範並沒有優劣之分，萬萬不可混雜着各類規範，那真不叫規範了，另外也不要太死板局部能夠靈活簡化。我看的是這個： 前端編碼規範

知乎的命名規則是這樣子的： zu-top-nav-link，也就是【命名空間-模塊-內容-內容】， 模塊化的時候注意保證前兩位一致，這樣的話咱們在寫CSS的時候基本不用管HTML了，並且後面看CSS文件時也能一會兒區分開不一樣的模塊。另外，我多數採用了 class 直接命中樣式，極少部分使用告終構僞類。

2）順手的工具

一款順手的工具能夠減小不少磨刀的時間，說到這裏你們確定看過某些吹牛皮說的「用記事本就行，純淨」，我就呵呵不說話。寫CSS的裝備推薦：順手的編輯器 + Chrome + AlloyDesigner。以前在慕課網看到過一個視頻，裏面一個老師用截圖工具測量尺寸的手法之嫺熟令我無比震驚。固然，能讓你震驚的東西通常來講都會有改進的餘地，因此這個時候你應該停下來，先去找塊好的磨刀石吧。這裏的主力是 Chrome + AlloyDesigner，能夠實現可視化的編輯效果，你在 Chrome 上修改的樣式能夠直接反應到頁面上。這裏記得要單獨寫一個 CSS 文件，在source找到它而後 save as 就能夠了，以後的修改都會直接保存到文件裏面去的，固然也能夠設置工做空間。AlloyDesigner 是一個設計稿工具，簡單來講就是把設計稿放在重疊在頁面上，你們注意下面有重影的地方就是跟設計稿對不上，修改到重疊便可。這裏比較奇怪的是設計稿的尺寸常常不對，須要本身設置一下。文檔教程：AlloyDesigner文檔教程。

3）先動腦再動手

要先動腦再動手，先分析出骨架，而後再構思佈局方案，當你對頁面的佈局有了一個大致上的解決方案時，再動手寫代碼。這裏我作的仍是比較差，老是急急忙忙動手，仍是要總體把握好，把要點記下來才行。

另一個就是全局意識，應該先搭起一個大致骨架再往內部填充內容（HTML），最後纔是 CSS 樣式的調整。這樣作的好處是沒有樣式你的HTML仍是結構分明的，這個應該算基本的結構表現分離吧。

 

以上。。。

 

（圖片出處：小周）

原創文章，轉載請註明出處！本文連接：http://www.cnblogs.com/qieguo/p/5475348.html