Fork me on GitHub

一个前端练手作品

前言

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

posted @ 2016-05-12 17:35  茄果  阅读(8594)  评论(58编辑  收藏  举报