前言
最近在求職，作為一名項目經曆很少的轉行汪，結果相當悲催。沒實戰經曆→公司不要→沒實戰經曆，妥妥的雞蛋相生無限循環。上萬能的知乎求大神幫助，卻發現沒實戰經驗的妹子很受歡迎，沒實戰經驗的漢子狗都不理。隻能感歎，時代再變，處女情結依舊。知乎上也有很多大神建議先模仿，我覺得很有道理，決定模仿知乎，于是就有了下面這個東西（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