SpriteMe 页面CSS图片工具
SpriteMe是Google的一个开源项目,可以用来方便地找出一个页面中所使用的图片,然后可以将所以图片合并到一个“Sprite”图片,然后再通过
CSS控制调用哪一个区域,其提供了一个网站来安装,演示使用方法,http://spriteme.org/ 。
安装方法很简单,按照上面那个页面上的提示,将一个链接拖到“书签工具栏”即可,然后再按照上面的“Demo”一步步的操作。
SpriteMe 提供的特性:
查找页面背景图片;
组织所有图片到一个 sprites;
生成 sprite;
将生成的 sprite 注到当前页面;
重新计算背景图片位置的CSS。
该工具很方便使用,对于网页开发者可以提高其页面设计的效率,很赞!!
相关文档:
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内 ......
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
2、无边框。推荐的写法是 border:none;,哈哈,我一直 ......
css圆角box备忘 <style type="text/css">
div.box{}
div.boxtitle{background-color:#888; height:24px; line-height:24px; vertical-align:middle; padding-left:10px;}
div.boxcontent{ padding:10px; border:1px #888 solid;}
b.r {display:block;background: #fff} ......
事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的。
外部调用样式表
在以前,我们通常采用2种方法使用样式表:
......
1.定义DIV
分析一个典型的定义div例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) # ......