分类: HTML/CSS/XML

玩转嘀咕网的嘀咕秀(Widget)

一直郁闷嘀咕网没有开发JS的博客插件,今天终于看到这款APP出来啦,嘀咕秀:http://www.digushow.com
一共提供了三种Widget,Flash版的,图片版,以及JS版。
图片版一般是用于论坛签名,效果如下:

Foxling's digu

其实,任何支持HTML代码,或者支持图片的地方,都可以加上你的图片签名,如果你要在你的网页中插入图片签名,只需要添加如下代码:

<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />

其中,foxling改为你的用户名,alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名,使用下面的代码:

[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]

阅读全文 »

YSlow 13条网站速度优化准则

Yahoo!曾经针对网站速度体验提出了34条准则《Best Practices for Speeding Up Your Web Site》(中文译文)。
YSlow在这些准则的基础上精简为更加直观的13条,针对每一条从A-F评分,得出一个总分,来评估一个网站的优化程度,你可以很方便地从YSlow的测试结果中看到你得不足的地方,并加以改进。
YSlow是FireBug的一个插件,在FireFox里使用。

本站测试结果截图如下:
YSlow-Foxling.cn
由于加入了Google统计和Yahoo统计的JS代码,所以Http请求较多,并且,它们的JS代码是没有加上Expires的,所以,在1\3\9\10几个项目中拖下了不少分数~
阅读全文 »

CSS Margin,边界重叠

在标准浏览器里测试代码(FireFox,Opera,Safari…)

<div style="background-color:#ccc; height:100px; width:400px;">
<div style="margin-top:30px; background-color:#900; height:50px;">margin-top:30px; background-color:#900; height:50px;</div>
</div>

你以为会是这样:

结果确是这样:

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
但是边界的重叠也有例外情况:

  • 水平边界永远不会重叠。
  • 浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界永不重叠。
  • overflow属性不等于visible的元素与它的非浮动子元素之间边界不发生重叠。

常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。

如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。

CSS Reset,CSS初始化处理

由于各种浏览器对元素默认属性的定义不同,可能导致页面所有差异,于是,CSS Reset出现了。
对各种元素的CSS属性进行重定义,达到各种浏览器无差异的效果。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
padding: 0;
margin: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset,img {
border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}

ol,ul {
list-style: none;
}

caption,th {
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}

q:before,q:after {
content:'';
}

abbr,acronym {
border: 0;
}

各种浏览器CSS选择符的支持情况

加入了Chrome的支持情况
包含:Safari,Chrome,FireFox3,FireFox2,FireFox1.5,Opera9,IE8,IE7,IE6
另外还有MAC OS支持情况
很全面了,厉害!很好很强大~~

猛击这个链接看详情:
Google Chrome Browser CSS Selector Support