.box128{
width:128px;
height:128px;
text-align: center;
vertical-align:middle;
display:table-cell !important;
display:block;
border:1px solid #DDD;
white-space:nowrap;
overflow:hidden;
}
.box128 i {
line-height: 128px;
width:0px;
display:inline-block;
}
.box128 img {
text-align: center;
vertical-align: middle;
display: inline;
}
html结构
<div class="box128"><i></i><img src"" /></div>
注意:图片的高和宽不能大于128,否则会撑开,对于大于的可在服务器端进行处理。 ......
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
3、慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
5、样式放头上,脚本放脚下。不内嵌,只外链。
6、坚决不用 CSS 表达式。
7、使用 引用样式表,而不是通过 @import 导入。
8、一般来说,PNG 比 GIF 要小,小得多。再者,GIF  ......
1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
临时解决方法:选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image,而不是list-style-image。
6、IE分不清继承关系和父子关系的差别,全部都是继承关系。
7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意 ......
今天看了外国一篇文章,觉得很有意思,于是在这里记录一下。彩色图转换成黑白照。在ps 要是将彩色的图转换黑白照的方式只是需要简单的动作。而在flash 处理起来也非常简单。
先选择一张喜欢的图片,然后进行处理。例如这张照片,图片中的是一个很不错的靓女。呵呵
现在通过一段代码:就可以进行转换成黑白的照片:
在这个过程中,其实对每一个像素点进行修改,才会产生这种效果。我们通过扫描来获取每一个像素点的值。然后利用位图的API修改每一个值产生这种结果。
test();
function test():void
{
trace(0xff);
trace(0xffffff);
var bit:Bitmap=new Bitmap(new Myclass(0,0));
addChild(bit);
bit.width=225;
bit.height=336;
for (var i:uint=0; i<bit.bitmapData.height; i++)
{
for (var j:uint=0; j<bit.bitmapData.width; j++)
{
var pixelValue:uint = bit.bitmapData.getPixel(j, i);
bit.bitmapData.setPixel(j,i,(pixelValue &0xff)<<16 | (pixelValue &0xff)<<8 |(pixelValue & 0xff));
}
}
}
当中的关键地方,在于对
var pixelValue:u ......
注意:本机必须连接互联网
效果图:
源码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="init()">
<mx:Panel width="620" height="455" layout="absolute" title="天气预报" fontSize="12">
<mx:HRule x="10" y="78" width="570"/>
<mx:Label x="44" y="50" text="今 天" width="67" fontWeight="bold" color="#030303"/>
<mx:Label x="474" y="50" text="后 天" width="67" fontWeight="bold" color="#030303"/>
<mx:Label x="247" y="50" text="明 天" width="67" fontWeight="bold" color="#030303"/>
<mx:Canvas x="10" y="88" width="168" height="315" borderStyle="solid" borderColor="#111AC6">
<mx:Label x="10" y="10" width="146" id="lblDate"/>
<mx:Label x="10" y="38" width="146" height="24" id="lblwd"/>
<mx:Label x="10" y="70" id="lblfl" width="146" height="29"/>
<mx:Image x="10" y="120" width="70" height="65" id="imgToday"/ ......
Ctrl-F11: 执行(Run)
F11: 除错(Debug)
Ctrl-Alt-Down: 重复目前所在编辑列(Repeat current line )
Alt-Up: 移动本列,或选择列往上移动(Move line (or selection) up )
Alt-Down: 移动本列,或选择列下往移动(Move line (or selection) down )
Ctrl-Click: 移至定义区(Go to definition (also F3) )
Ctrl-D: 删除本列(Delete line )
Alt-/: 文字自动完成(Word completion (cycles through possible matches))
Ctrl-Up: 捲轴向上(Scroll up )
Ctrl-Down: 捲轴向下(Scroll Down )
(组合键) Ctrl+Shift+L
(Activate Editor) F12
(Align Baselines) Ctrl + Alt + 8
(Align Bottom) Ctrl + Alt + 6
(Align Horizontal Centers) Ctrl + Alt + 5
(Align Left) Ctrl + Alt + 1
(Align Right) Ctrl + Alt + 3
(Align Top) Ctrl + Alt + 4
(Align Vertical Centers) Ctrl + Alt + 2
(Backward History) Alt + Left
(Breakpoints) Alt + Shift + Q,B
(Build All) Ctrl + B
(Cheat Sheets) Alt + Shift +Q,H
(Close) Ctrl + F4
(Close All) Ctrl + Shift + F4
(Console) Alt + Shift + Q,C
(Cont ......