Flash CSS Box Model

对于 CSS 的初学者来说,理解 CSS 盒模型可能是很困难,但却是重要的事情. Ajie 曾经用 3D 图形 展示过盒模型.

可是,图形毕竟是图形, Douglas 便做了一件造福人类的事情,它做了一个 FLASH 的 CSS 盒模型 ,相信对于任何一个人来说,都会立刻理解 margin,background-color,background-image,padding ,border 以及他们之间的关系.

Flash动画
分类:Web Design | 固定链接 | 评论: 1 | 引用: 1 | 查看次数: 6079

一个超强的小游戏(想得偶头大了)

呵呵,挺有意思的.
Flash动画
分类:Web Design | 固定链接 | 评论: 9 | 引用: 2 | 查看次数: 9210

缺少alt???

今天抽点时间修正了pblog2的一些网页标准验证的错误
结果发现有几个地方居然无法通过... 察看需要验证的网页
页面上总是提示 required attribute "alt" not specified (img标签缺少alt属性)
同样是图片,为什么由UBB代码生成的三个小图标有这样的问题呢。其实我都写有alt标签了的,w3c却认不出来。其他图片却没有这个问题。
郁闷,找不出问题了

查看更多...

分类:Web Design | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4373

我的CSS心得(4) - 关于IE上透明PNG的显示

曾经很个惊讶Mozilla能正确显示带Alpha通道的PNG图片. 后来才发现其实IE也可以做到.
演示地址: http://www.pjhome.net/web/PNGDemo/PNGDemo.htm
           这个演示原来是用来测试Mozilla的.我修改了他的兼容性.让它能运行于IE和Mozilla.

其实IE5.5的滤镜 progid:DXImageTransform.Microsoft.AlphaImageLoader(src=图片地址, sizingmethod=scale) 可以用来读取透明的PNG图象.

查看更多...

分类:Web Design | 固定链接 | 评论: 6 | 引用: 3 | 查看次数: 10286

我的CSS心得(3) - 在文字前加上与文字居中的图标

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点,如下图)
 文字文字
虽然解决的办法有很多.比如.
  1. 用table来控制图片和文字居中对齐 (这样会因为一个小图片写多很多代码)
  2. 使用图片的Align属性 设置为align="absmiddle" (但是要知道,标准的W3C中定义的img标签是不支持Align属性的)

以上的方法都不是解决问题最好的办法.后来我无意中发现可以用CSS来解决这个问题.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

 文字文字

分类:Web Design | 固定链接 | 评论: 10 | 引用: 0 | 查看次数: 11354

IE地址栏的小图标

一个郁闷了我很久的小问题.
按照网页标准,地址栏图标可以用
[color=#0000ff]<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />[/color]

来表示.可以对于IE无论我怎么修改路径,图标都是显示不出来. 只有收藏夹能反映出图标.

查看更多...

分类:Web Design | 固定链接 | 评论: 7 | 引用: 1 | 查看次数: 14169

当电脑不听话的找不到出气的的时候...

你是否为你好帮手但是又常常不听话的电脑而感到恼怒,却又没有办法呢?那试试玩玩这个游戏,看看能否为你消消气吧.[mrgreen]
Flash动画

查看更多...

分类:Web Design | 固定链接 | 评论: 10 | 引用: 1 | 查看次数: 6657

我的CSS心得(2) - 关于长度自适应

嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

    


当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

查看更多...

分类:Web Design | 固定链接 | 评论: 2 | 引用: 2 | 查看次数: 5410

我的CSS心得(1) - 在超链接上加图标

以前在不懂用CSS的时候,在超链接上加图标,往往得到的效果都不是很如意。其实CSS可以帮助我们实现很多超链接样式,这样不仅避免了使用Javascript的麻烦,也加快了运行速度。
  举个例子,大家可以看到 PL-Blog2的模版 中有个更多的链接样式,在前面的图标就是用
CSS定义的。鼠标移动到上面的时候图片的切换也是用CSS控制的。它的样式如下
 .more:link,.more:visited{font-weight:bold;background:url(bullet-arrow.gif) no-repeat 0px 0px;padding-left:18px;margin:5px;text-decoration:none;}
 .more:hover{background:url(bullet-arrow.gif) no-repeat 0px -15px;}

查看更多...

分类:Web Design | 固定链接 | 评论: 8 | 引用: 0 | 查看次数: 7813

SWF统计图表显示

提供了基于XML/SWF和PHP/SWF的图表显示,可以免费下载使用。
点击查看全图
访问:
[ XML/SWF ] 简单易用
[ PHP/SWF ] 可定制性强

查看更多...

分类:Web Design | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6355