一个前端练手作品--前端新人如何求职？_html/css_WEB-ITnose

前言

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

 

CSS布局方案：没用知乎的布局方式，全面使用了弹性盒子，之所以选择弹性盒子是因为他使用超级方便，而且跟HTML的结构更加匹配。之前说过，浮动和绝对定位实现自适应布局的关键在于width的auto，通常需要将子元素移出父元素之外（点此看布局方案的总结），这明显是不符合我们对结构的认知，弹性盒则不存在这种问题。

js：原生js，没使用库和框架。js目前写的很少也很烂，主要是做了一点动态交互效果，其实都是一些小控件的交互，作为个人积累吧。因为不懂后端所以目前后端相关的数据接口为0。。。

原本这个项目只是为了练习一下CSS的使用而做的，所以UI方面有点想法，想要做成可复用、可定制、可拆分的样子，但是目前看来做的还很差。另外，前端界很热的一些CSS预处理器我更是没有接触到。。。

最近也有去面试过几家公司，发现没人鸟这种模仿的东西，或许潜意识里面都认定这个是抄的、so easy吧，虽然我自己觉得学到了很多东西。web app 版的知乎是多页的，主页做的7788的样子，其他页面暂时还没怎么做。然而我已经不打算再多花时间在这个页面上了，以后学Nodejs的时候可能会用它来练习吧。接下来还是做些小游戏做些小动画吧，这个感觉更讨人喜欢。

如果你有更好的求职点子，请一定要通知我！拜谢！

如果你们公司缺前端（不是缺妹子），愿意培养新人，那一定请联系我～。～

 

关于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还是结构分明的，这个应该算基本的结构表现分离吧。

 

以上。。。

 

（图片出处：小周）