Tag Archives: CSS

一种很酷的文字提示效果

You can change the code before run.

在图标后加文字居中的问题解决办法

一直以来有一个问题困扰着我,就是在文字前插入一个小图标,结果发现图标与文字总不在一条水平线上,一般表现为图片总比文字高一点。
虽然也有一些解决办法:
1、最简单的就是用 table 来控制图片和文字的居中,不过每次都要加许多代码,挺烦的。
2、就是用图片的 Align 属性设置为 align=”absmiddle” ,但也存在一个问题就是在标准的 W3C 中定义的 img 属性是不支持 Align 属性的。

今天看了一篇关于如何控制图标与文字居中的文章,是用 CSS 来解决这个问题的,在 CSS 中有一个关键的属性:margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来。做法是把这个值设置为负数。例如我们把下面的 19X19 的图片设置它的 style=”margin-bottom:-5px” 这样文字和图片就居中了,这个值随着图片的大小不同而改变。

只能输入英文和数字

You can change the code before run.

用 div+css 做一行两列表格

You can change the code before run.

15 个 CSS 常识

1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40,000 次,占用资源。
2、无边框。推荐的写法是 border:none,border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
3、慎用*通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
5、样式放头上,脚本放脚下。不内嵌,只外链。
6、坚决不用 CSS 表达式。 More »