css中的!important及版本迭代的前因后果

css的!important该如何使用,何时使用,坦白说,时至今日,我也没有很深刻的认识,这个提升css属性权重的写法,在关键时候很有用,不过,需要明白的是,这个权重的提升,事实上是覆盖了其他的同名写法,提升了权限;往往,你需要提权的地方,可能只是一个唯一的,或者临时需要用到的地方。

所以,要慎重使用[……]

Read more……

CSS之column-count

这是个css3的属性,语法很简单,对类似瀑布流的分栏效果很有用,但某些标签会被截断。

例如容器box分了4栏,里面包含了若干个ul>lili就会被截断,应该显示在第一栏的,尾端的一部分可能因为内容多少的原因换到第二栏显示了。

解决方法也简单,给ul写个display:inline[......]

Read more……

CSS之calc()再续……

应用场景:
首先,响应式设计。
宽100%的情况下,例如一整行文字,文字属性为超长溢出隐藏显示三点省略号,这个场景就要求定义这行文本的宽度,绝对值或百分比都可以。另外,需要在右侧预留点空间放一个小图标或者图片。
如果按百分比,给文本一个百分比,右侧图标或图片一个百分比,在不同设备下,都有单独去[……]

Read more……

CSS之calc()

之前有看过CSS3的calc()用法,当时没有怎么注意,也没有认真去看,最多就是标记了一下,当作是已经关注了。

最近有个项目,要实现的是footer无论页面内容是否大于屏幕,始终在最底部,且不能浮动或覆盖任何内容。
网上搜了一下,找到了这个calc()的方法。
例如,如下结构的代码:
&[……]

Read more……

关于css的模块化思路

前提是在不考虑前端工程构建工具的情况——
总的来说,就是要简单、灵活、稳定。
class的命名,属性的权重及先后顺序,都决定了使用的灵活性。
参考bootstrap的命名方式,先有全局,然后针对不同功能的模块或尺寸或颜色,覆写不同样式。

个人认为,要做到bootstrap那样的具备全局观[……]

Read more……

零基础学习WEB前端的思路

我打算教某人学习web前端了(某人零基础),确切的说是学习前端中的HTML+CSS部分。

目前还没有时间去做成PPT课件,只是有大概的思路。
讲的时候对着电脑一边操作一边讲解。

其实,主要的思路也很简单,就是认识到网页是什么,然后如何以HTML+CSS去实现。

首先,网页从大的范[……]

Read more……