海屿文章列表

sass与compass

之前总是想找到一个能自动完成浏览器兼容的工具,今天终于发现了这个compass工具。
如果你有sass基础,再学会了compass,你的开发效率会有一个极大的提升!
关于compass的使用,官网上讲的非常详细也很简单,可以去看看哦~
而且,有国人开发了一个叫Koala的可视化编译工具,作为小白的我们最喜欢这种了,是不是~

记不住这些命令啊,只好在这里把几个常用命令手打一遍:
创建项目文件:compass create myproject
编译:compass compile
监视文件变化自动编译:compass watch
编译压缩版本:compass compile --output-style compressed

compass分为五个模块
reset:重置默认样式
css3:这里就是完成厂商前缀的模块
layout:布局模块(比如页脚)
typography:版式模块(比如链接、文字等)
utilities:(不属于以上模块的功能)
其中还有特殊的browser support模块是,顾名思义这是浏览器支持模块,其中最常用估计也就这一个了$browser-minimum-versions:('ie','8'),表示对浏览器支持到哪个版本。
其中css3模块不用说肯定是最常用了,去官网看看都有什么吧~

伪元素

所有伪元素

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

伪元素的作用就是能允许在不添加额外声明的情况下为文档的某些部分添加样式。

一开始上来就想原理啊,文档啊,什么都先摆上,但是都不如来几个例子看着舒服。

<p data-height="250" data-theme-id="0" data-slug-hash="GpVbzR" data-default-tab="result" data-user="zhangchen915" class='codepen'>See the Pen 伪类 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

上面的效果是不是很有意思,其是这个方括号就是用伪元素加上的,最后为伪元素加上了一些渐变效果。看完这个例子你就应该大致了解了伪元素的作用,就是利用它来装饰真正的元素 (无论是装饰图片还是其他一些效果) 而不需要更改 HTML 的内容。

此外以往我们在清除 float 的时候,会使用"div style="clear: both">或是br clear="all",但是会产生过多无意义的容器,为了避免这种情况,我们可以使用::before以及::after来优雅地清除float。

关于前端的学习

现在前端挺火,但是前端并不是一件简单的工作,市面上有各种各样的培训课程几千的几万的都有,但是其实作为“过来人”其是这些培训的作用其实不大,最好的方法还是自学,也许参加培训班你会写出一些简单的页面,确实少走了一些弯路,但是正因为你没有走过弯路,所以你以后再遇到弯路你还是不会走出来。现在免费的教程那么多,自学的成本也不是那么高,像网易云课堂,慕课网有好多优秀的视频课程。
给大家推荐一个学习网站FreeCodeCamp,这是虽然是一个英文网站,但是有高中英语水平你就能看懂,大不了还有翻译插件。这个网站没有视频,就是一个一个的小项目,对于新手而言动手很重要,一步一步跟着做最后你会发现自己提高了不少。最后晒一晒我在这个网站得到的证书!freecodecamp.jpg

开始写博客

其实前几个月就已经用wordpress建了这个博客,但是一直没有写几篇,都是图方便用oneNote在写东西,最近看到Typecho这个轻量级的博客系统,终于要决定要好好开始写博客了,作为一个前端学习者,专业的博文产量不会很高,但是我绝不会去抄袭或者仅仅复制转载,做人做技术一定要有所追求,要创造一些价值,我想我可以作为学习者这个天然优势写一些文章为后来者铺路、填坑,也是我这个博客的意义所在吧。background-Weather.jpg