四月 4, 2012
总所周知，当一个元素的width和height为0的时候，利用CSS的border，可以制作出三角符号。我们通常利用这个原理实现气球对话框的效果。
今天，我用这个原理花了一幅图画。如下图：
demo地址：http://jayuh.com/wp-content/uploads/2012/04/this-is-a-tree.html
以下是其中一棵树的实现代码：
<style>
#pine01{position:absolute;top:500px;left:800px;}
.pine{position:relative;width:100px;height:115px;}
.pine .leaves{position:absolute;left:0;width:0;height:0;border:50px solid #fff;border-bottom:50px solid #000;}
.pine .leaves01{top:-50px;border-bottom:25px solid #000;}
.pine .leaves02{top:-50px;}
.pine .leaves03{top:-25px;}
.pine .trunk{position:absolute;left:0;top:75px;margin-left:45px;width:10px;height:40px;background-color:#000;}
</style>
<div id="pine01">
<div class="pine">
<div class="leaves leaves03"></div>
<div class="leaves leaves02"></div>
<div class="leaves leaves01"></div>
<div class="trunk"></div>
</div>
</div>
七月 5, 2011
HTML部分
<!--[if lte IE 6]>......<![endif]--> IE6及其以下版本可见
<!--[if lte IE 7]>......<![endif]--> IE7及其以下版本可见
<!--[if IE 6]>......<![endif]--> 只有IE6版本可见
<!--[if !IE]>......<![endif]--> 非IE版本可见
<!--[if it IE 8]......<![endif]--> IE8以下版本可见
<!--[if gte IE 7]>......<![endif]--> IE7及其以上版本可见
CSS部分
.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同
五月 17, 2011
CSS2.0中，有四个属性是设置元素最大宽度、最小宽度、最大高度和最小高度的，它们分别是：max-width、mix-width、max-height和mix-height。使用它们，可以方便为元素设定最大、最小宽度和高度。
但是，万恶的IE6竟然不支持它。所以我们只能对IE6另外寻找方法了，本文使用的方法是expression。代码如下：
/* 最小寬度 */
.min_width{min-width:300px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
}
/* 最大寬度 */
.max_width{
max-width:600px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
}
/* 最小高度 */
.min_height{
min-height:200px;
/* sets min-height for IE */
_height:expression(this.scrollHeight < 200 ? "200px" : "auto");
}
/* 最大高度 */
.max_height{
max-height:400px;
/* sets max-height for IE */
_height:expression(this.scrollHeight > 400 ? "400px" : "auto");
}
/* 最大最小寬度 */
.min_and_max_width{
min-width:300px;
max-width:600px;
/* sets min-width & max-width for IE */
_width: expression(
document.body.clientWidth < 300 ? "300px" :
( document.body.clientWidth > 600 ? "600px" : "auto")
);
}
/* 最大最小高度 */
.min_and_max_height{
min-height:200px;
max-height:400px;
/* sets min-height & max-height for IE */
_height: expression(
this.scrollHeight < 200 ? "200px" :
( this.scrollHeight > 400 ? "400px" : "auto")
);
}
解释一下代码中的expression：expression是微软为IE5.0版本以后的浏览器加入到一个属性，用来把CSS属性和JavaScript表达式关联起来。简单的说就是CSS属性后面可以跟一段JavaScript表达式。上面的例子就是通过JavaScript表达式计算出元素的最大、最小宽度和高度的值，然后赋予CSS。
五月 3, 2011
不知道气球对话框效果为何物的请看下图：
气球对话框其实还是一个很常见的效果，而且并不难实现。Google搜索了一下，总体来说要通过CSS来实现气球对话框的效果，有两种方法：
1、字符法。
2、边框法。（这里推荐第二种方法，笔者认为这种才是真正通过CSS实现的。）
字符法：简而言之，就是用特殊字符“◆”来代替那个尖角。尖角通过定位实现它的位置。代码如下：
<style>
#word{
width:500px;
height:100px;
background-color:#f3961c;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:relative;
}
#word span{
color:#f3961c;
font-size:54px;
position:absolute;
top:50px;
}
</style>
<div id="word">
<span>◆</span>
字符法尖角对话框
</div>
边框法：这种才是真正利用纯CSS完成的气球对话框效果。
原理： 利用元素的border实现尖角效果，再通过给尖角定位实现整体的对话框效果。
问题出现了，如何通过border实现尖角效果呢？说来话长，我们先看一下下面一段代码能实现怎样的效果：
.test{
width:10px;
height:10px;
border:10px solid;
border-color:#ff3300 #0000ff #339966 #00ff00;
}
效果图如下：
仔细观察边框的交界处，相邻的两个边框会在重叠的地方各占45度的夹角，将整个边框分成了四个等腰梯形。明白了吗？不明白可以反复的思考一下这句话，明白的话我们接着再往深度假想一下：上图的元素设置的宽度和高度为10px，那么如果我们把它们设为0px，又会出现什么情况呢？答案是下图的情况：
此时我们惊奇的发现：利用border属性竟然能产生四个等腰直角三角形，而用这些三角形做气球对话框中的斜角再合适不过了。
ok，知道了原理，我们直接来看整体的代码吧：
<style>
#border{
width:500px;
height:100px;
line-height:100px;
background-color:#ff3300;
text-indent:50px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:relative;
}
#border span{
width:0px;
height:0px;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#ff3300 transparent transparent transparent;
position:absolute;
top:100px;
left:50px;
}
</style>
<div id="border">
<span></span>
border实现尖角对话框
</div>
上面这段代码只是使用边框法实现了气球对话框最简单的一个效果，实际应用中还有一些更为复杂的效果，如较长的尖角、侧边尖角、空心尖角等。而我要完成的那道附加题就是使用纯CSS实现“侧边长尖角气球对话框”的效果（demo中第5个效果）。
我做的7种气球对话框的效果，前两个demo是上面讲到的两个最简单的例子：纯CSS实现气球对话框DEMO。
本文思路来源于张鑫旭的博客，有情趣的朋友可以看下他的原文，写的比这篇好，也更详细：纯CSS实现各类气球泡泡对话框效果。
四月 26, 2011
要解决的问题：通过CSS给某个元素设置最小高度，并让它撑出范围时能够自适应高度。
解决问题的思路：
①IE6不支持min-height属性；
②IE6的height属性在元素撑出范围的情况下不能固定元素的高度（即IE6下的height属性等于标准浏览器下的min-height属性）。
那么解决思路就是需要给IE6和非IE6浏览器分别设置各自能够识别的属性。
解决方法一：
.demo{
min-height:300px; //设置最小高度为300px，写给非IE6的浏览器。
_height:300px; //写给IE6。
}
以上方法能够解决问题，但是”_height”是W3C不推荐的属性。
所以请看方法二：
.demo2{
min-height:300px; //设定最小高度为300px，写给非IE6的浏览器。
height:auto!important; //设置高度为自动，写给非IE6的浏览器。
height:300px; //由于IE不能识别上句的!important，所以IE6就只能来读这句了。
}
总体来说，第一种方法的解决思路是给IE6单独定义样式，是属于比较笨的方法；第二种方法是给标准浏览器设定!important，使该属性的优先级较高，标准浏览器就会去读这句，而IE6并不支持!important，所以它只能去读后面那个height属性。第二种方法属于bug方法，不过能够通过W3C标准！
四月 25, 2011
平时做网页的时候，经常会使用到透明效果，CSS代码如下：
.transparent_class {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
分析上面几个属性：
- opacity是最重要的，因为它是CSS透明的标准属性，取值范围在0-1之间，目前支持的浏览器有：Firefox、Chrome、Opera、Safari。（也就是说，除了IE，它支持所有主流浏览器）；
- filter:alpha(opacity=50);是专门给IE设定的属性，取值的范围在0-100之间；
- -moz-opacity是为了兼容一些老版本的Mozilla浏览器，取值范围在0-1之间；
- -khtml-opacity是为了兼容一些老版本的Safari浏览器，取值范围在0-1之间。
看别人的代码，通常情况下会剩去后两个属性，这是因为Mozilla和Safari浏览器都支持自动更新，用这些浏览器的人一般用的也是较新的版本，因此后两个为了兼容较老的浏览器的属性不用也罢。
以上就是CSS透明属性的基本用法，然而用到透明属性的地方，一般都是用在层叠层次较多的下层来用，这就需要考虑CSS的继承问题：因为下层透明的元素，上层也会跟着透明。目前我还没有很好的方法解决这个继承问题（有更好解决办法的欢迎留言告之），所以遇到这种情况，我通常是把HTML部分要透明的部分独立分离开，然后采用定位的方法再把它定位到该放置的位置。
代码如下：
<style type="text/css">
body {
background: url(http://jayuh.com/wp-content/uploads/2010/10/background.jpg) repeat;
}
.div1{
width:200px;
height:200px;
position:relative;
margin-top:10px
}
.div2{
position:absolute;
top:0;
width:300px;
height:400px;
z-index:-1;
background:#FFFFFF;
opacity:0.7;
filter:alpha(opacity=70);
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
文字没有被透明，下面的图片也没有。
<div class="div3"><img src="http://jayuh.com/wp-content/uploads/2010/11/Ella_Koon_photos_3_thumb.jpg" alt="美女图片" /></div>
</div>
</body>
Demo如下：css透明属性继承问题的解决办法。
