文章关键字 ‘font-size’

常见纯CSS图标的代码分离与整理(持续更新)

2019年08月13日,星期二

这个周末做了个纯CSS图标的代码分离与整理页面,直接复制CSS代码,就可以使用小图标了,没有外链和图像处理,非常简单高效。

阅读全文…

基于vw等viewport视区单位配合rem响应式排版和布局

2016年08月8日,星期一

一般而言,屏幕越大,我们希望文字大小也越大,元素的尺寸也能等比例放大,尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果,目前主流的实现是通过设定根元素的font-size大小,具体元素或模块使用rem或em单位来实现。

使用vw配合calc计算,可以让我们的根元素的font-size大小动态化智能化,可以让我们的布局真正意义适配于各种设备尺寸。

阅读全文…

以20像素为基准的CSS网页布局实践分享

2016年03月22日,星期二

以20像素为基准进行CSS网页布局,说不定会让一些细节和潜能大放光彩,当然这需要体系的配合,还需要一些完整的解决方案在里面,本文就将分享这一实践心得,保证是其他地方都没有的。外甥点灯笼——照旧(舅),有demo有截图有必要的源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…

去除inline-block元素间间距的N种方法

2012年04月24日,星期二

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

拜拜了,浮动布局-基于display:inline-block的列表布局

2010年11月3日,星期三


对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。

阅读全文…

翻译 – CSS继承详解

2010年07月29日,星期四

老外的演示文档简单生动有趣,以前企鹅团队层翻译过一篇过于line-height的文档,很是不错,我是从中学到了不少东西。这两天,我也抽空翻译个风格类似的文档,是关于CSS继承的,虽然内容比较基本,但是看看还是会有不少帮助的。学习腾讯团队的做法,我也将翻译编辑好的PDF传到了slideshare上,以方便大家的分享与学习。

阅读全文…

jQuery之replace字符串替换实现不同尺寸图片切换

2009年08月30日,星期日

学习是需要积累的,即使是一个函数,只要肯想,会实现不少好的效果的。这里,就是活用了一个replace字符串替换实现了大小图片切换的效果。
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
这里重要的其实是图片大小切换效果,里面所蕴含的前端知识还是很多的,可以说将Google的picasa相册图片大小切换实现给提炼简化出来了。
提供实例页面和源文件打包下载,希望能对您有所帮助。

阅读全文…