Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 九创主题 » CSS http://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码,ASP代码,精选JS代码,WORDPRESS,网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 Wed, 16 May 2012 03:22:51 +0000 zh-cn hourly 1 http://wordpress.org/?v=3.1.1 IE6、IE7、Firefox中margin问题解决办法 http://www.3code.cn/ie6%e3%80%81ie7%e3%80%81firefox%e4%b8%admargin%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/ http://www.3code.cn/ie6%e3%80%81ie7%e3%80%81firefox%e4%b8%admargin%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/#comments Mon, 13 Feb 2012 14:13:23 +0000 寒林 http://www.3code.cn/?p=3010 您对IE6/IE7/Firefox的margin问题解决办法了解多少，这里与大家分享一下，希望对你的学习有所帮助。

IE6/IE7/Firefox的margin问题解决办法

在做一个网站的布局，因为经常用firefox，所有的内容都是在firefox下面调试的，等快完工了切回IE7一看，样式差别好多，主要是在margin，padding这几个元素的理解上。
我知道ie6ie7firefox对margin的解释都不同，去网上查了一下，可以通过!important这样的手段hack。
具体的做法有以下几种：

第一种：

    

  1. .div{
    2. 

  2. background:orange;/*ff*/
    3. 

  3. *background:green!important;/*ie7*/
    4. 

  4. *background:blue;/*ie6*/
    5. 

  5. }
    6.

第二种：

    

  1. .div{
    2. 

  2. margin:10px;/*ff*/
    3. 

  3. *margin:15px;/*ie7*/
    4. 

  4. _margin:15px;/*ie6*/
    5. 

  5. }
    6. 



第三种：
    

  1. #div{color:#333;}/*ff*/
    2. 

  2. *html#div{color:#666;}/*IE6*/
    3. 

  3. *+html#div{color:#999;}/*IE7*/
    4.

现在常用了第一种，很好用，写出来与大家分享。
在给一个例子：

    

  1. #pages{margin:auto;width:910px;text-align:left;}
    2. 

  2. #pages{*width:915px!important;}/*IE7*/
    3.
]]> http://www.3code.cn/ie6%e3%80%81ie7%e3%80%81firefox%e4%b8%admargin%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/feed/ 0 css在IE6 EI7 IE8 FF下的兼容写法 http://www.3code.cn/css%e5%9c%a8ie6-ei7-ie8-ff%e4%b8%8b%e7%9a%84%e5%85%bc%e5%ae%b9%e5%86%99%e6%b3%95/ http://www.3code.cn/css%e5%9c%a8ie6-ei7-ie8-ff%e4%b8%8b%e7%9a%84%e5%85%bc%e5%ae%b9%e5%86%99%e6%b3%95/#comments Tue, 10 May 2011 06:39:37 +0000 寒林 http://www.3code.cn/?p=2555 css在IE6 EI7 IE8 FF下的兼容是网页制作者都必须考虑的问题，如果更好的做到css在IE6 EI7 IE8 FF下的兼容是目前制作网页的基本要求，下面我们讨论一下css在IE6 EI7 IE8 FF下的兼容性该如何更好的处理。

.color{
background-color: #CC00FF;
background-color: #FF0000\9;
*background-color: #0066FF;
_background-color: #009933;
}

**记住上面得样式解释为顺序是 ff、ie8、ie7、ie6 **
显示的结果：
用火狐浏览，颜色是紫色
用 IE8 浏览，颜色是红色
用 IE7 浏览，颜色是蓝色
用 IE6 浏览，颜色是绿色

如果你只是为了兼容ie7和8，其实可以在<head>里加上这样一条代码：
<meta http-equiv="X-UA-Compatible" content="IE=7">
即可免去你大量修改代码，但是我发现，有些后台程序员往往会把它删掉，具体原因我也不清楚。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
.main{
width:200px;color:#fff;
height:400px;background:#f00;
height:200px\9;background:#ff0\9;
*height:200px;*background:#0ff;
_height:100px;_background:#000;

}
</style>
</head>
<body>
<div>ff红色height:400px / IE8黄色height:200px / IE7 蓝色height:200px / IE6黑色height:100px</div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------

微软在IE8提供三种解析页面的模式
IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定
IE7 Standards Modes ：IE7现在用的解析网页的模式，开起机关是在<head>中加入 <meta http-equiv="X-UA-Compatible" content="IE=7">
Quirks Modes ：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
注意：不同模式间的网页在IE8中可以互相 frame ，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在 IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv="x-ua-compatible" content="ie=7" />

IE8 最新css hack：

"\9"　例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
"*"　IE6、IE7可以识别.IE8、FireFox不能.
"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

----------------------------------------------------------------------------------------------------------------------------------

一些IE6 IE7 IE8 FF的CSS hack
p{+color:#f00;}                    支持 IE6 IE7        不支持FF IE8

p{_color:#f00;}                    支持 IE6        不支持FF

p{color:#00f !important;}
p{color:#f00;}                      支持 IE7 IE6 FF IE8

p{color:#00f !important;color:#f00;}      支持 IE7 IE8 FF       不支持 IE6

head:first-child+body p{color:#f00;}      支持 IE7 IE8 FF       不支持 IE6

支持 IE8        不支持IE6 IE7 FF

html*p{color:#f00;}                支持 IE6 IE7        不支持FF IE8

html>p{color:#f00;}               支持 IE7 IE8 FF       不支持 IE6

html[xmlns] p{color:#f00;}       支持 IE7 IE8 FF       不支持 IE6

@import 'style.css';
@import "style.css";
@import url(style.css);
@import url('style.css');
@import url("style.css");          支持 IE7 IE6 FF IE8

p{color:#f00;}         支持 IE6 IE7 FF      不支持 IE8

* html p {color:#f00;}            支持 IE6        不支持FF IE7 IE8

*+html p {color:#f00;}            支持 IE7 IE8        不支持FF IE6

p {*color:#f00;}                    支持 IE7 IE6        不支持FF IE8

====================================================

这样写，也许会简单些，很方便，但是这个只是IE8对IE7的兼容模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="x-ua-compatible" content="ie=7">
<html xmlns="http://www.w3.org/1999/xhtml">

注意：<meta http-equiv="x-ua-compatible" content="ie=7"> IE8兼容IE7的模式

]]> http://www.3code.cn/css%e5%9c%a8ie6-ei7-ie8-ff%e4%b8%8b%e7%9a%84%e5%85%bc%e5%ae%b9%e5%86%99%e6%b3%95/feed/ 0 用CSS控制图片等比例缩放 http://www.3code.cn/%e7%94%a8css%e6%8e%a7%e5%88%b6%e5%9b%be%e7%89%87%e7%ad%89%e6%af%94%e4%be%8b%e7%bc%a9%e6%94%be/ http://www.3code.cn/%e7%94%a8css%e6%8e%a7%e5%88%b6%e5%9b%be%e7%89%87%e7%ad%89%e6%af%94%e4%be%8b%e7%bc%a9%e6%94%be/#comments Thu, 03 Mar 2011 14:25:58 +0000 寒林 http://www.3code.cn/?p=2514 按比例缩小或者放大到某个尺寸，对于标准浏览器（如Firefox），或者最新都IE7,ie8浏览器，
直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。如：

img{max-width:100px;max-height:100px;}
img{min-width:100px;min-height:100px;}

对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css code中嵌入javascript code来实现图片的缩放,如下：
.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
}

]]> http://www.3code.cn/%e7%94%a8css%e6%8e%a7%e5%88%b6%e5%9b%be%e7%89%87%e7%ad%89%e6%af%94%e4%be%8b%e7%bc%a9%e6%94%be/feed/ 0 JS实现的DIV模拟滚动条(支持IE6,7,8/FF) http://www.3code.cn/js%e5%ae%9e%e7%8e%b0%e7%9a%84div%e6%a8%a1%e6%8b%9f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%94%af%e6%8c%81ie678ff/ http://www.3code.cn/js%e5%ae%9e%e7%8e%b0%e7%9a%84div%e6%a8%a1%e6%8b%9f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%94%af%e6%8c%81ie678ff/#comments Thu, 17 Feb 2011 08:22:14 +0000 寒林 http://www.3code.cn/?p=2510 最近老看浏览器的滚动条不顺眼,设置滚动条样式也只是IE的特有属性.抽了点时间用JS写了个模拟滚动条.IE下支持滚轮滚动,FF下暂时只能用鼠标拖动.说完废话,下面看代码吧~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>--</title>
<style>
/*主窗*/
#Scroll{width:200px;height:400px;background:#f8f8f8}
/*左边内容区*/
#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}
/*滚动条背景*/
#ScroRight{position:relative;float:right;height:100%;width:10px;background:#F1F1F1;overflow:hidden;}
/*滚动条*/
#ScroLine{position:absolute;z-index:1;top:0px;left:0px;width:100%;height:20px;overflow:hidden;background:#666666}
</style>
</head>
<script>
var Scrolling=false;
function $(o){return document.getElementById(o)}
function ScroMove(){Scrolling=true}
document.onmousemove=function(e){if(Scrolling==false)return;ScroNow(e)}
document.onmouseup=function(e){Scrolling=false}
function ScroNow(event){
var event=event?event:(window.event?window.event:null);
var Y=event.clientY-$("Scroll").getBoundingClientRect().top-$("ScroLine").clientHeight/2;
var H=$("ScroRight").clientHeight-$("ScroLine").clientHeight;
var SH=Y/H*($("ScroLeft").scrollHeight-$("ScroLeft").clientHeight);
if (Y<0)Y=0;if (Y>H)Y=H;
$("ScroLine").style.top=Y+"px";
$("ScroLeft").scrollTop=SH;
}
function ScrollWheel(){
var Y=$("ScroLeft").scrollTop;
var H=$("ScroLeft").scrollHeight-$("ScroLeft").clientHeight;
if (event.wheelDelta >=120){Y=Y-80}else{Y=Y+80}
if(Y<0)Y=0;if(Y>H)Y=H;
$("ScroLeft").scrollTop=Y;
var SH=Y/H*$("ScroRight").clientHeight-$("ScroLine").clientHeight;
if(SH<0)SH=0;
$("ScroLine").style.top=SH+"px";
}
</script>
<body>
<div id="Scroll" onselectstart="return false" onmousewheel="ScrollWheel()"><div id="ScroLeft">

内容1111<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容5555<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容0000<br>

</div><div id="ScroRight" onclick="ScroNow(event)"><div id="ScroLine" OnMouseDown="ScroMove()"></div></div></div>

]]> http://www.3code.cn/js%e5%ae%9e%e7%8e%b0%e7%9a%84div%e6%a8%a1%e6%8b%9f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%94%af%e6%8c%81ie678ff/feed/ 0 IE、Firefox对CSS中important和*和_的支持 http://www.3code.cn/ie-firefox-css-important/ http://www.3code.cn/ie-firefox-css-important/#comments Fri, 05 Nov 2010 02:54:31 +0000 寒林 http://www.3code.cn/?p=2226 1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持
2、IE7、IE8、Firefox、Opera、Safari都支持 important

顾名，important的优先级要高. 举例说明：
<style type="text/css">
    body
    {
        background-color:#FF0000 !important;
        *background-color:#00FF00 !important;
        *background-color:#0000FF;
        background-color:#000000;
    }
</style>
IE6选择最后一个，即：background-color:#000000; （因为IE6对important不感冒）
IE7选择第二个，即：background-color:#000000;（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）

另外再补充一个，下划线"_",
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。

整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE7对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd”>
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

<style>
/* Clear Fix */
{
content:".";
display:block;h
eight:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix
{
display:block;
}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
<div id=”box”>
<p>p对象中的内容</p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
内置与外置写法
外置：
.main{ float:left;#float:none;_float:none;html*.main{ float:left;#float:none;_float:none; }*+html .main{ float:left;#float:none;_float:none; }
* html .main{ float:left;#float:none;_float:none; }第1行给Firefox以及其他浏览器看
第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义
第3行给IE7看
第4行给IE6以及更老的版本看
内置：
.main{ float:left;#float:none;_float:none;[float:none;]float:none; }第1个float给Firefox以及其他浏览器看
第2个加#的float给IE7看
第3个加_的float给IE6以及更老的版本看
第4个加[的float给safari看
第5个加]的float给IE看
各种常见浏览器使用的内核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari Swift ( WebKit )
用css自动隐藏超出宽度内容并省略显示，浏览器兼容ie、ff
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis; 别兴奋了，该支持的都支持，其他都是骗小朋友滴。基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。
并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用
IE、Firefox、Opera和Safari对CSS样式important和*的支持
1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持
2、IE7、IE8、Firefox、Opera、Safari都支持 important
顾名，important的优先级要高. 举例说明：
<style type=”text/css”>
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6选择最后一个，即：background-color:#000000; （因为IE6对important不感冒）
IE7选择第二个，即：background-color:#000000;（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）
另外再补充一个，下划线”_“,
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。

]]> http://www.3code.cn/ie-firefox-css-important/feed/ 0 限制图片最大宽度的CSS http://www.3code.cn/css-img-max-width/ http://www.3code.cn/css-img-max-width/#comments Sun, 22 Aug 2010 15:10:18 +0000 寒林 http://www.3code.cn/?p=1973 我们在制作一个网页的时候，经常要对一个区域里可能出现的图片的宽度进行限制，不然它可能会把页面撑得很烂很烂。
如果你采用固定宽度，长度来设置的话，比如在

<img height="200px" width="200px"
中设置，或者是在CSS中用

.img {height:200px;width:200px;}
来控制，不同规格的图片有可能会变形。这是一种最蠢的方法。经过摸索，我找到一串CSS代码，可以让图片在超过规定的宽度时，自动缩小，并且是按比例缩小，不会造成图片变形。如下：
.img{
max-width: 200px;
height:auto;
width:expression(this.width > 200 ? "200px" : this.width);
}
 

经过不严格测试，这串CSS代码能兼容IE6 IE7 FF。不知道这个算不算是“万能代码”呢？

]]> http://www.3code.cn/css-img-max-width/feed/ 0 DIV+CSS英文网站优化 http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/ http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/#comments Thu, 29 Jul 2010 15:53:54 +0000 寒林 http://www.3code.cn/?p=1809 什么是Div+CSS标准?
Div+CSS的标准化设计到底有什么好处?

Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用是一样的。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码
CSS是 Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用 CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

Div+CSS标准的优点:
1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，LX不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML，例如：

标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局 。
18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

]]> http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/feed/ 0 IE下如何设置iframe背景透明 http://www.3code.cn/ie-iframe-background/ http://www.3code.cn/ie-iframe-background/#comments Tue, 20 Jul 2010 10:32:39 +0000 寒林 http://www.3code.cn/?p=1717 标签里加入 style="background:transparent;"]]> 首先：在iframe标签中加入 allowtransparency="true"属性
然后：在调用的页面的<body>标签里加入 style="background:transparent;"

示例：
<iframe allowtransparency="ture" src="aa.html" width="500" height="500"></iframe>

aa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgColor="transparent">
asda<br>
das<br>
sad<br>
asdddddddddddddddddddd
</body>
</html>

]]> http://www.3code.cn/ie-iframe-background/feed/ 0 简单易用的JS+CSS伸缩菜单 http://www.3code.cn/js-css-menu-2/ http://www.3code.cn/js-css-menu-2/#comments Tue, 11 May 2010 05:27:58 +0000 寒林 http://www.3code.cn/?p=1643 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>简单易用的JS+CSS伸缩菜单-3code.cn/</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{
background-color:#990020;
color:#ffff00;
}

#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.style.display == "none")
oSecondDiv.style.display = "";
else
oSecondDiv.className = "none";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;    //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;    //找到超链接
oA.onclick = change;    //动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="/">Basketball</a></li>
<li><a href="/">Football</a></li>
<li><a href="/">Volleyball</a></li>
</ul>
</li>
<li><a href="/">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="/">Contact Me</a></li>
</ul>
</div>
</body>
</html>

]]> http://www.3code.cn/js-css-menu-2/feed/ 0 Firefox与IE在CSS样式表中的差异 http://www.3code.cn/firefox-ie-css/ http://www.3code.cn/firefox-ie-css/#comments Thu, 22 Apr 2010 08:00:22 +0000 寒林 http://www.3code.cn/?p=1621 1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释， 会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“* html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样： ..

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */ .

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 .

2 css布局中的居中问题 .

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } !

说明： .

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 .

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 ..

3 盒模型不同解释. ..

#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff ie6.0
width /**/:500px;
//for ie6.0-
} !

4 浮动ie产生的双倍距离 成功的人生，需要自己去经营，别再说了，莫再等了，现在就为自己的人生做好规划，为人生点亮一盏明灯，赢在人生起跑点上。

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} .

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素); .

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table; .

5 IE与宽度和高度的问题 。

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏 览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是 比较重要的。要解决这个问题，可以这样： .

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 成功的人生，需要自己去经营，别再说了，莫再等了，现在就为自己的人生做好规划，为人生点亮一盏明灯，赢在人生起跑点上。

6 页面的最小宽度 ...

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计： 。

#container{
min-width: 600px;
width:e&shy;xpression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 .

7 清除浮动 .

.hackbox{
display:table;
//将对象作为块元素级的表格显示
} 本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系。


.hackbox{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

......#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. 。

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) .

p[id]{}div[id]{}
p[id]{}div[id]{} 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例： ..

<div id="box">
<p>p对象中的内容</p>
</div> ..

CSS： .

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } .

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

]]> http://www.3code.cn/firefox-ie-css/feed/ 0 简单有效的纯CSS提示框 http://www.3code.cn/css-tips/ http://www.3code.cn/css-tips/#comments Thu, 22 Apr 2010 06:54:10 +0000 寒林 http://www.3code.cn/?p=1617 简单有效的纯CSS提示框

先写出HTML结构:

<p>
<a href="http://www.3code.cn/">简单有效的纯CSS提示框<span>(这是提示内容--简单有效的纯CSS提示框)</span></a>
简单有效的纯CSS提示框简单有效的纯CSS提示框简单有效的纯CSS提示框
</p>

上面的代码中，将锚设置类名为tooltip，是为了区别其它不需要提示框的锚。接着，需要将该锚的position属性设置为relative，这样才可验对span的内容进行绝对定位。同时
不希望提示在最初时就显示出来,所以将它的display属性设置为none,经过这些分析,CSS可以这样写,并不难:)

<style>
a.tooltip {position:relative;}
a.tooltip span{display:none;}
a.tooltip:hover span {
display:block;
width:180px;
position:absolute;
top:1em;left:2em;

/*给span加一些填充、边框等----*/
padding:0.2em 0.6em;
border:1px solid #ff6633;
background-color:#ccc;
color:#000;
/*----*/
}

/*为了让IE6.0 也有效果----*/
a.tooltip:hover{
font-size:100%;/*Fixex bug in IE5.x/Win */
/*----*/
}

/*去掉IE显示提示框的下线----*/
a.tooltip:hover span {text-decoration:none;
/*----*/
}
</style>
]]> http://www.3code.cn/css-tips/feed/ 0 兼容IE FIREFOX3.5以上的透明度设置 http://www.3code.cn/ie-firefox3-5-opacity/ http://www.3code.cn/ie-firefox3-5-opacity/#comments Sat, 03 Apr 2010 13:19:06 +0000 寒林 http://www.3code.cn/?p=1605 filter:alpha(opacity=50);  opacity:0.5;

]]> http://www.3code.cn/ie-firefox3-5-opacity/feed/ 0 经典的菜单效果CSS范例 http://www.3code.cn/css-menu-image/ http://www.3code.cn/css-menu-image/#comments Wed, 20 Jan 2010 06:43:27 +0000 寒林 http://www.3code.cn/?p=1508 经典的菜单效果CSS范例

用以下CSS，可以实现菜单项常用效果。例如hover时，可以与link时显示不同的背景图片、背景色、字体、字体颜色等等。也就是说这个CSS是通用的，你可以根据他进行拓展应用。
<style>

#topnav {
margin:0px;
margin-top:0px;
padding:0px;
padding-left:0px;
padding-top:5px;
clear:both;
width:100%;
background:#000000; border-bottom:1px solid #202020;
height:20px;
overflow:auto;
}
#topnav ul { padding:0px; margin:0px;}
#topnav ul li {
height:14px;
float:left;
list-style:none;

}
#topnav ul li a {
display:block;
color:#fff;
font-size: 11px;
line-height: 11px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
border-right:1px solid #555;
text-decoration:none
}
#topnav ul li a:hover { color:#ff9900;}
#topnav ul li.current_page_item a {
color:#ff9900;
}

</style>

使用方法：

<div id="topnav" >
<ul>
<li><a href="#">PALV MENU01</a></li>
<li><a href="#">PALV MENU02</a></li>
<li><a href="#">PALV MENU03</a></li>
<li><a href="#">PALV MENU04</a></li>
<li><a href="#">PALV MENU05</a></li>
<li><a href="#" style="border-right:0px;">PALV MENU06</a></li>
</ul>
</div>

]]> http://www.3code.cn/css-menu-image/feed/ 0 FireFox 3.5+不再支持-moz-opacity属性 http://www.3code.cn/firefox-3-5-moz-opacity/ http://www.3code.cn/firefox-3-5-moz-opacity/#comments Sat, 09 Jan 2010 04:59:27 +0000 寒林 http://www.3code.cn/?p=1470 安装FireFox3.5后，发现以前项目网页中有透明属性的一些DIV都不透明了。于是猜想，FireFox3.5难道不支持它自家的CSS透明属性-moz-opacity了？上网一查，果真如此。
在https://developer.mozilla.org/En/CSS:-moz-opacity里说得很清楚了：
Note:  Firefox 3.5 and later do not support -moz-opacity.  By now, you should be using simply opacity.
现在都要改用opacity这个属性。

于是要设置一下透明度为60%的DIV就应该这样写了：
div.transp { /* make the div translucent */
opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
}

opacity这个是属于CSS3里面的东西了，属于CSS3的标准。然而微软IE8还不支持这一属性。

]]> http://www.3code.cn/firefox-3-5-moz-opacity/feed/ 0 在firefox与IE下DIV+CSS Padding效果不同的解决方法 http://www.3code.cn/firefox-ie-divcss-padding/ http://www.3code.cn/firefox-ie-divcss-padding/#comments Mon, 21 Dec 2009 05:48:01 +0000 寒林 http://www.3code.cn/?p=1371 <div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同

fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,

要解决这一个矛盾,可以利用!important

padding-top:5px;
height:10px !important;
height:15px;

以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而firefox却不会忽略这个属性, 直接使用height:10px

这样就可以很巧妙的解决这个问题

]]> http://www.3code.cn/firefox-ie-divcss-padding/feed/ 5 DIV背景图片在IE下正常,Firefox下不显示 http://www.3code.cn/div-ie-firefox-background-image/ http://www.3code.cn/div-ie-firefox-background-image/#comments Thu, 10 Dec 2009 15:59:09 +0000 寒林 http://www.3code.cn/?p=1275 DIV背景图片在IE下正常,Firefox下不显示的问题?

一般情况下是因为你的div里面加了float属性, 如float:left，在FF里如果里面的元素加了float属性float:left（right),它就不会被撑开的，也就是说的它的高度是0.

如果正常显示，必须加上：overflow:auto.

即：#div1 {
width:700px;
background-image: url(../images/bg.gif);
overflow:auto；
}

这样子就可以在firefox下显示出背景来,大家试试.

]]> http://www.3code.cn/div-ie-firefox-background-image/feed/ 0 CSS在线使用手册 http://www.3code.cn/css-online/ http://www.3code.cn/css-online/#comments Tue, 01 Dec 2009 18:00:09 +0000 寒林 http://www.3code.cn/?p=989 CSS在线使用手册

CSS在线使用手册 方便实用。汇集了CSS里面的所有属性和方法。
并有示例，方便调阅。请大家查看。

]]> http://www.3code.cn/css-online/feed/ 0 DIV相对于父DIV底部对齐 http://www.3code.cn/div-subdiv/ http://www.3code.cn/div-subdiv/#comments Mon, 30 Nov 2009 07:31:00 +0000 寒林 http://www.3code.cn/?p=915 DIV相对于父DIV底部对齐

<style type="text/css"> .box1 {border:1px #cccccc solid;  width:500px; height:600px;position:relative;} .box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:0;} </style> <div>     <div></div> </div>

重点是：bottom:0;

]]> http://www.3code.cn/div-subdiv/feed/ 0 CSS滤镜效果说明 http://www.3code.cn/css-transition/ http://www.3code.cn/css-transition/#comments Thu, 26 Nov 2009 09:36:40 +0000 寒林 http://www.3code.cn/?p=776 CSS滤镜效果说明

语法：
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
示范:参考文章:
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。

duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。

特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
Duration : 可读写。浮点数(Real)。参阅 duration 属性。
Transition : 可读写。整数值(Integer)。参阅 transition 属性。
Percent : 可读写。字符串(String)。设置或检索当前静态滤镜输出在转换进程中所处的点。取值范围为 0 - 100 。默认值为 0 ，转换尚未开始。 100 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤：
使用转换滤镜的 apply 方法。这将捕获对象内容的初始显示，设置 Percent 特性值为 0 。
改变对象内容。如 visibility ， innerText ， background-color ， border ，或者其子对象的属性。
设置转换滤镜的 Percent 特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。
设置转换滤镜的 Enabled 特性值为 true 。则滤镜作用的对象将依据获取到的图像更新其内容。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
status : 只读。整数值(Integer)。检索转换的当前状态。0 | 1 | 2 0 : 转换停止(stop)。
1 : 转换被应用(apply)。
2 : 转换在进行(play)。

方法：
apply : 捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。
play ( iDuration ) : 开始转换。无返回值。参数见下表。
iDuration : 可选项。浮点数(Real)。 指定滤镜作用持续的时间。默认单位为秒。
使用 play 方法的 iDuration 参数设置转换回放的持续时间，其值在转换的当前一个周期内会替换 Duration 属性的设置。但是下一次转换会恢复使用 Duration 属性设置的值。

stop : 停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。

]]> http://www.3code.cn/css-transition/feed/ 0 很酷的css控制的文本框flash+txt源文件 http://www.3code.cn/css-flash-txt/ http://www.3code.cn/css-flash-txt/#comments Wed, 25 Nov 2009 16:13:59 +0000 寒林 http://www.3code.cn/?p=748 很酷的css控制的文本框flash+txt源文件

支持css控制的文本框flash+txt源文件

支持css控制的文本框flash+txt源文件

说明：可以能过css控制flash的样式. 内容是由flash从txt文件中读取而来，txt文件同时支持txt和html两种格式。

下载：本地下载css-flash-txt-3code.cn.rar

]]> http://www.3code.cn/css-flash-txt/feed/ 0