Ext中FormPanel面板及Form控件横排测试(CSS)
June 17th, 2008
在实际的网页开发中，大部分时间都要涉及到Form表单的处理。在Ext框架中也提供了很多这方面的控件，而且还有一个专门的FormPanel布 局，该布局默认为放在面板上面的所有控件都是换行放置，而在实际应用中为了美观，有些需要横排，特别是Radio控件，这个时候就需要我们重新定制这些控 件的布局了，该例子中使用CSS来实现这些功能， Read more…
Archive
Posts Tagged ‘CSS’
解析CSS(JS)时IE7 与IE6的区别
April 23rd, 2007
IE7 与IE6的区别：
1. ie7,ie6 div+css出现宽度定义不同
在宽度定义上出现宽度的解释不同,IE7宽度在IE6上要宽一些,,正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.
2. ie7.0修复了!important这个bug。
先前由于ie6.0对!important识别存在bug, 在firefox和IE中的BOX模型解释不一致导致相差2px，大部分网页标准设计师通过这个bug来兼容ie6.0和firefox，即采用：div{margin:30px!important;margin:28px;}。但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和firefox？
3. Box Model的改变
在IE7中，为了适应CSS2.1 box model修改了溢出的行为。
4. ie7.0中一些CSS filter将不再可用
IE7中修改了许多潜在解析错误，这些可能会阻止filter在以前的IE版本中正常工作。如：*HTML filter，下划线filter和/**/注释filter等等。
5. ie7.0对很多不规范的css不再支持，对js语法要求更严格规范。
很多在IE6下正常显示的js页面，在IE7下均不能正常显示，并且还没有提示错误。ie7.0对js语法要求更严格规范，只是这个规范似乎并没有说明，也没有明白的告诉大家，他们是怎么“规”怎么“范”的。
浏览器不兼容这个难题，一直是网页设计师们头痛的事情。ie7.0的面世，尚且不论他是否较之ie6.0进步， ie7和ie6 之间不兼容，毫无疑问又引入了新的痛处，至少在调试的过程中，又多了一道程序以及随之而来的大量不兼容。
目前，使用ie7.0的用户尚且是少数，使用ie6.0的用户仍然占据很大的比重。然而，大量通过ie6 测试的网页，在ie7.0中都显示不正常。
据ie7.0官方解说：
ie7.0在IE6的基础上引入了strict模式，包含了许多有关于层叠样式表（CSS）解析与呈现的改进。这些改进意在提高Internet Explorer解释层叠样式表的一致性，以达到W3C的推荐的标准，同时为开发者提供一个可以依赖的功能集合。
不管官方的语言是多么动听，也不管ie7.0是不是真的W3C了，浏览器之间太多个性化的东西，太多差异，让我们无可奈何。在ie7.0下设计出的网页，ie6下面显示的几乎是不堪入目。那么，我们在设计网页的时候，在解决好ie6.0与火狐的兼容问题的同时，我们是更多的服从符合W3C一些的ie7.0，还是对96%的ie6.0妥协？这个问题其实有些多余，我们能做的，或许只有选择中庸，只有尽量调试到各个浏览器都显示正常吧。
新旧技术的兼容与交替是件非常重要的事情，对新技术的尽早的接触与吸收是件好事，但对旧技术的兼容更为重要，因为绝大部分客户还在使用旧的技术。
符合Web标准，CSS同比例缩小图片
April 23rd, 2007
符合Web标准，CSS同比例缩小图片
当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。
对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
[code]
[/code]
这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。
最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：
[code] .thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}[/code]
至于图片是如何保持其高宽比例的，这张图片可以解释：
看牛人用CSS画的各国国旗
April 18th, 2007
CSS画的中国国旗
[html]
★
★
★
★
★
[/html]
英国国旗：
[html]
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
英国，哈哈哈
[/html]
美国国旗
[html]
THE STAR SPANGLED BANNER
[/html]
网页特效之用css样式表实现首字大写
April 18th, 2007
:first-letter版本:CSS2 兼容性:IE5.5+
语法:
Selector : first-letter { sRules }
说明:
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。
示例:
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }
应用于:
IE5.5+ ADDRESS BLOCK QUOTE BODY CENTER DD DIV DL DT FIELDSET FORM Hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP
目前IE和FF都支持此属性，所以大家不必顾虑兼容性的问题，当然要记得设置float属性哦，不然就不会出现那种大字紧贴几行的效果了。
范例(未设置float属性):
[html]
把音乐开到最大声让声乐包围着我,我才不会这么寂寞.我想在音乐声中想你,那样我会想得更加歇斯底里! http://xlei.net/x/blogedit.asp?id=342 把音乐开到最大声让声乐包围着我,我才不会这么寂寞.我想在音乐声中想你,那样我会想得更加歇斯底里!
[/html]
范例(设置float属性为left)：
[html]
把音乐开到最大声让声乐包围着我,我才不会这么寂寞.我想在音乐声中想你,那样我会想得更加歇斯底里! http://xlei.net/x/blogedit.asp?id=342 把音乐开到最大声让声乐包围着我,我才不会这么寂寞.我想在音乐声中想你,那样我会想得更加歇斯底里!
[/html]
效果直逼flash的Div+Css+Js菜单
April 18th, 2007
效果直逼flash的Div+Css+Js菜单
[html]
content=”text/html; charset=gb2312″ />
id=fbtn> id=fbtn_txt>G1
good
morning
id=fbtn> id=fbtn_txt>G2
good
evening
id=fbtn> id=fbtn_txt>M1
my name is
fireyy
id=fbtn> id=fbtn_txt>M2
mm mm i love
u
id=fbtn_mask>
id=fbtn_txt>G1
good
morning
id=fbtn> id=fbtn_txt>G2
good
evening
id=fbtn> id=fbtn_txt>M1
my name is
fireyy
id=fbtn> id=fbtn_txt>M2
mm mm i love
u
[/html]
在PJBLOG中自动给(表情之外的)图片加上边框
April 15th, 2007
在PJBLOG中自动给#表情之外#的图片加上边框
自动给图片加边框的代码这里已经出现过了，但是会有表情也加上边框的问题，我就把代码扩展了一下。
=========================华丽的分隔线==================================
在网页中往往加上了边框之后，图片看起来才不那么突兀，但是在编辑器中一个一个图片去设置又比较麻烦。在PJBLOG中，可以在当前使用的SKIN的GLOBAL.CSS中加上以下代码，让所有文章中的图片自动带上边框。
.Content-body img{padding:4px;border:1px solid #ccc;margin:2px;background-color: #fff;}
但是这样就会有一个问题，如果在文章中使用了表情的话，这些表情也会带上灰色的边框。由于表情的大小往往是比较小的（如32 x 32、48 x 48、96 x 96）等，那么可把上述代码扩展一下：
.Content-body img {
padding:expression(width > 50 ? “4px”:”0″);
border:expression(width > 50 ? “1px solid #ccc”:”0 solid #ccc”);
margin:expression(width > 50 ? “2px”:”0px”);
}
通过判断图片的宽度是否大于 50 像素 （如果表情比较小或者比较大，可以适当修改这个值，因为一般文章中的图片都会超过这个大小），系统会自动决定是否给这个图片加上边框。
这样的话，在图片自动加上边框的同时，我们就不用担心表情也被加上边框了。
==========================华丽的分隔线======================================
注：自动加边框的代码来源于网上，作者可能是Jinn。另外扩展代码可能只能用于IE，未经其他浏览器测试。
IE7对css选择器的改进 | 针对FF IE6 IE7的CSS样式
April 4th, 2007
1、对伪类的支持。IE6和更低的版本对于伪类的支持仅限于a标签，诸如“:hover”、“:active”、“:focus”之类的伪类理论上是应该适用于所有元素的，但是IE6和更低版本抛弃了它们。这次IE7有选择地支持了“:hover”。
Quotes
div:hover {
background-color: #B7B7B7;
}
诸位可以试试。
2、对子选择器的支持。现在在IE7里你可以使用如下的定义：
Quotes
#block1 > h3 {
color: red;
}
3、对相邻选择器的支持。你可以指定同一父元素下的紧邻某个元素之后的元素的样式：
Quotes
* + p {
color: Blue;
}
4、对相邻选择器的扩展(？也许是bug)，IE7支持“*+html”这样的通用选择器和相邻选择器的组合，注意，这里是“*+html”，很奇怪吧？FF2.0和其他浏览器是不支持这样的写法的，不过都支持“*+body”这样的。所以，对IE7的CSS HACK就可以利用*+html来写了。
5、对属性选择器的支持。支持了a[rel="nofollow"]、[class="ie7"]、a[rel~="my"]这几个属性选择器，但是还是不支持a[titile]。
选择器在平时的应用里很少用到，有一种说法是渲染会比其他的慢。不过很多选择器的效果在这之前是只能使用js来实现的，相对于js，css似乎更加有效率一些。
#abc{
margin:20px; /* 任何浏览器都可以识别 */
*margin:10px; /* IE7和IE6都可以识别 */
_margin:10px; /* 只有IE6可以识别 */
*+margin:10px; /* 只有IE7可以识别 */
margin:20px!important; /* Firefox和IE7都可以识别*/
}
倾斜的鼠标翻转导航[转自蓝色理想]
February 2nd, 2007
Nifty Corners Cube：JS+CSS=圆角边框
October 20th, 2006
http://www.html.it/articoli/niftycube/index.html
网页中实现圆角的方式有许多，我一直认为这种有代码实现的方式是在炫耀技术，玩花活，
不过，这里的话才是重要的：他们把技术玩活了，思维的创新才是最重要的，要知道，没有图片一样可以完成这种效果。
当然，还要说回来，所谓“内行看门道，外行看热闹”，但不管怎样，必须承认，这些牛人成功了，并且分享了他们的思想，这才是网络时代带给我们的快感。