一个前端练手作品
前言
最近在求职，作为一名项目经历很少的转行汪，结果相当悲催。没实战经历→公司不要→没实战经历，妥妥的鸡蛋相生无限循环。上万能的知乎求大神帮助，却发现没实战经验的妹子很受欢迎，没实战经验的汉子狗都不理。只能感叹，时代再变，处女情结依旧。知乎上也有很多大神建议先模仿，我觉得很有道理，决定模仿知乎，于是就有了下面这个东西（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
