Dec
3
今天将CSS3的文档好好的看了看，发现这玩意对于动画效果、文字处理、容器的定制都很是不错。
可惜的是，看来看去，几乎都是webkit或者是moz的内部类名调用的说明书。
如这个：
缩小至 .65倍，顺时针60度，什么中心点忽略。
这不，moz、webkit的基类而已。搞什么飞机嘛！不就是一个浏览器自带的那些效果类而已，没什么概念。谷歌和水果的浏览器还好，火狐彻底没有了对缓动的支持。应该说是webkit内核有缓动类吧，管他呢。
那文字效果呢？
阴影、发光……
如果这玩意的出发点是为了使前端开发节省时间我将表示感谢，如果是想把那些仍然喜欢用IE那垃圾货的人吸引过来，那完全是没有必要存在的东西了。啊？IE9 100%支持CSS3！真是杯具，中国那么多的盗版XP用不上IE9的话，IE仍然是垃圾货，因为在中国IE只限能在XP上存在的IE浏览器。
我觉得叫这些玩意为什么CSS3简直是浪费。
如果微软能够弄个一使用IE6或IE7浏览器，系统就黑屏的补丁。我想全世界的前端攻城尸都将膜拜。
可惜的是，看来看去，几乎都是webkit或者是moz的内部类名调用的说明书。
如这个：
-moz-transform: scale(0.65) rotate(30deg);
-webkit-transform: scale(0.65) rotate(30deg);
-webkit-transform: scale(0.65) rotate(30deg);
缩小至 .65倍，顺时针60度，什么中心点忽略。
这不，moz、webkit的基类而已。搞什么飞机嘛！不就是一个浏览器自带的那些效果类而已，没什么概念。谷歌和水果的浏览器还好，火狐彻底没有了对缓动的支持。应该说是webkit内核有缓动类吧，管他呢。
那文字效果呢？
阴影、发光……
如果这玩意的出发点是为了使前端开发节省时间我将表示感谢，如果是想把那些仍然喜欢用IE那垃圾货的人吸引过来，那完全是没有必要存在的东西了。啊？IE9 100%支持CSS3！真是杯具，中国那么多的盗版XP用不上IE9的话，IE仍然是垃圾货，因为在中国IE只限能在XP上存在的IE浏览器。
我觉得叫这些玩意为什么CSS3简直是浪费。
如果微软能够弄个一使用IE6或IE7浏览器，系统就黑屏的补丁。我想全世界的前端攻城尸都将膜拜。
Nov
5
为了做一个SNS的CASE，我需要一个层浮动并固定在页面中，不随浏览器的滚动而滚动，自始至终都浮动并固定在浏览器特定位置。
在很多的图片遮罩效果中都有过这样的例子。
还有一些层的JS遮罩弹窗里也有这样的效果。
今天我也弄一个看看，代码如下。
在很多的图片遮罩效果中都有过这样的例子。
还有一些层的JS遮罩弹窗里也有这样的效果。
今天我也弄一个看看，代码如下。
May
19
May
15
话说很多门户的头部菜单都如下图所示
这个是文字较少的情况，要是菜单名字很长呢？
那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层
起名为bg.png
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层
起名为bg1.png
样式代码如下：
页面代码如下：
OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。
这个是文字较少的情况，要是菜单名字很长呢？
那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层
样式代码如下：
.box{ width:500px; height:30px; background:url(bg.png) 0 -35px repeat-x;}
.box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
.box a{ color:#FFF; text-decoration:none;}
.ccc{ background:url(bg1.png) left 0;}
.ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}
.box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
.box a{ color:#FFF; text-decoration:none;}
.ccc{ background:url(bg1.png) left 0;}
.ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}
页面代码如下：
<div class="box">
<ul>
<li><a href="#">标题1</a></li>
<li class="ccc"><a href="#">较长的标题</a></li>
<li><a href="#">标题2</a></li>
</ul>
</div>
<ul>
<li><a href="#">标题1</a></li>
<li class="ccc"><a href="#">较长的标题</a></li>
<li><a href="#">标题2</a></li>
</ul>
</div>
OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。
Feb
23
原文：http://matthewjamestaylor.com/blog/perfect-3-column.htm
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
<!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=utf-8" />
<title>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
