来源:http://blog.nixternal.com/2009.06.19/css-border-radius/
CSS3的圆角支持,不同浏览器有不同的css属性实现。偶个人最喜欢Opera ,它是严格按照标准css3属性实现的。
属性详单:
FireFox(火狐浏览器,FF):
/* 5px四角全部是圆角 */
-moz-border-radius: 5px;
/* 5px左上、右下角的圆角
注: 四个值代表从左上角顺时针方向的各个角 */
-moz-border-radius: 5px 0 5px 0;
/* 5px坐下,右上角的圆角 */
-moz-border-radius: 0 5px 0 5px;
/* 5px左上圆角*/
-moz-border-radius-topleft: 5px;
/* 5px左下圆角 */
-moz-border-radius-bottomleft: 5px;
/* 5px右上圆角 */
-moz-border-radius-topright: 5px;
/* 5px右下圆角*/
-moz-border-radius-bottomright: 5px;
继续阅读~
评论(1)
png图片(据说无损)压缩工具PNGGauntlet, 官方网站:http://benhollis.net/software/pnggauntlet/。

偷懒,引用自:http://witmax.cn/pnggauntlet.html,其博客还介绍了结合使用PNGGauntlet和JPEGImager的教程。
软件介绍:
PNGGauntlet是一个.NET程序,通过Ken Silverman的PNGOUT命令行工具来优化PNG文件。现在流行的图像编辑软件像Photoshop、Fireworks制作的PNG文件都不能做到容量最小的。PNGGauntlet能够去除掉PNG文件中多余的数据,而且过程不造成任何图像损伤,只是减少文件大小。你只要选择你想要优化的文件,选择输出路径,点击Optimize(优化)按钮后即可搞定压缩。PNGGauntlet同样可以用来转换JPG,GIF,TGA,PCX和BMP文件为PNG文件。
继续阅读~
参与评论~
jCuteForm插件,针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合,可以分别拿出来使用,它们是: jRadio, jCheckbox, jSelect。
而且不同于其他一些美化插件的工作原理,是对现有的<radio />,<select />等标签进行拆解,内容再封装,生成div模拟的方式,外观定制有些繁琐,而且比较难调控。本插件跳过这几步,依旧遵循ToFishes系列插件结构,表现,行为相分离的原则,结构自定(提供的Demo使用em,a等标签,只是需要一些class等给插件提供参考点,即使是这些class也可以自定),外观由前端人员根据结构自定预先写好,之后调用jCuteForm实现功能。

继续阅读~
评论(5)
今天给一个同事简单讲如何去把一个psd效果图实现为一个html网页。很自然的就总结出了自己是如何过来的。
应该是水到渠成了吧。从3年多前开始由 阿捷 (可惜无缘其人)的《XHTML+CSS经典重构教程》入门,很感谢他对w3c标准的推广,以致于偶从一个dw表格布局都不熟悉,直接开始了手写XHTML+css的路程。
而js方面也是,当偶2年前知道jQuery的时候,以致于偶从一个js不熟悉的情况下,直接用jQuery实现了很棒的效果。
前端暂时应该还没有大学专业课程学习的吧。而偶的成长完全是在工作中大量实践、应用起来的。
因此,偶深深的觉得:没有不会的,只有不用的。工作是最好的学习课堂。不会很多东西没关系,只要能跟随工作的需要一步步提高就行了。
学习css和jQuery,一是《XHTML+CSS经典重构教程》+CSS手册,二是来源于网络的jQuery15天教程+jQuery手册。由此,偶另外的一个经验就是:知道如何用,知道啥能用。
继续阅读~
参与评论~
偶然被同事引发的研究(他在做一个透明背景,问了偶),如何设置透明背景。貌似游戏类网站最多这种应用。
透明背景可以是纯色,也可以是背景图,偶只用纯色测试了。
大概思路:由于透明会继承到子元素,从而不能达到满意效果,故写一个冗余标签p,设置背景透明,然后将其绝对定位,并置于内容层之下,达到背景透明的目的。
继续阅读~
参与评论~
RT…
安逸啊,安逸!很符合Nature的感觉。。不过,这个图也够大的了(这个vps限流量的,在未知的情况下,还是少点流量的好)
看图:

继续阅读~
参与评论~
发布了jTabView插件,看着代码好像很复杂,原理却很简单,其他的功能都是围绕这个做的扩展。
如果不需要那么复杂的功能,用起来倒是杀鸡用牛刀了,而且代码也不简洁。以下就是核心实现代码,做了一个简单tab插件。
/* 简单选项卡插件 */
;(function($){
$.fn.TabSimple = function(c){
c = $.extend({
tab: ".s-tab", //标题项
con: ".s-con", //内容项
curr: "curr", //当前高亮的css类名
event: "click" //触发的事件,jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
tab.bind(c.event, function(){
var i = tab.index($(this));
tab.removeClass(c.curr); //或tab.find("." + c.curr).removeClass(c.curr)
$(this).addClass(c.curr);
con.hide().eq(i).show();
});
});
};
})(jQuery);
HTML结构自定义了,跟ToFishes系列jQuery插件 – jTabView选项卡式浏览所述一致。
2010-10-14,Release Update V2:
;(function($){
$.fn.jTabSimple = function(c){
c = $.extend({
tab: ".tabs li", //标题项
con: ".tab-con", //内容项
curr: "curr", //当前高亮的css类名
index: 1, //默认显示的tab
remote: false, //远程加载
loading: null, //自定义loading的提示html片段
event: "click" //触发的事件,jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
var index = tab.index(tab.filter("." + c.curr)) + 1;
if(index == 0)
index = c.index;
tab.bind(c.event, function(){
var i = tab.index($(this));
return toggle(i);
});
function toggle(i){
tab.removeClass(c.curr).eq(i).addClass(c.curr);
if(c.remote){
var loading = c.loading || '<div class="loading"></div>';
con.html(loading);
$.get(tab.eq(i).find("a").attr("href"), function(ret){
con.html(ret);
});
return false;
} else {
con.hide().eq(i).show();
}
};
toggle(index - 1);
});
};
})(jQuery);
继续阅读~
参与评论~
这个插件相对来说灵活性一般,而且js对html有些地方侵入操作,工作中针对UI效果图开发的。
看下截图:

因为灵活性不高,除非对css比较熟悉,所以这里放出完整的html结构,css样式定义。
继续阅读~
参与评论~
早在工作中,写一些图片列表时候就有的这种感觉。怎么写的呢?一个li,里面img左浮动,其他内容不变,即可形成左侧缩略图,右侧描述信息的样子,看这个图:

左右两栏内容图例
结构类似于<img /> <div>introduction</div>,如果在firebug下看,可以发现div区域是包括img区域的,但是内容会环绕图片。div不设置宽度,此时div是和父级元素(li)是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度,不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵,div和img会有空白相隔。
而本文就是来源于此发现,从而很容易的实现3栏布局:两侧栏固定宽度,中间自适应宽度。无需其他说明,看代码就一切明了了。
html:
<body>
<div class="side fl">
左侧栏
</div>
<div class="main">
<div class="side fr">
右侧栏
</div>
<div class="main">
中间自适应
</div>
</div>
</body>
css:
.fl, .fr {float:left;display:inline;}
.fr{float:right;}
.side {width:200px;height:500px;background:#ccc;}
.main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}
是的,就是这么简单简洁的代码,点击这里可以看到Demo。
再来一个完整页面源码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>两侧固定宽度,中间自适应宽度布局</title>
<style type="text/css">
#left {float:left;width:200px;background:red}
#main, #mid {overflow:hidden;zoom:1;background:green}
#right {float:right;width:200px;background:pink}
</style>
</head>
<body>
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="mid">center</div>
</div>
</body>
</html>
继续阅读~
参与评论~
linux下对文件重命名有两种命令: mv ,rename
mv很简单,move文件移动
mv /dir/file1 /dir2/file1
两个参数,第一个是源文件,第二个是目的地,如果第二个参数文件名不一样,则会重命名。
当两个参数不带目录,只有文件名时,那就是重命名了。这是单个文件的重命名。
rename arg1 arg2 arg3
rename才是真正的批量重命名命令。而且他是3个参数,不是2个。
arg1:旧的字符串
arg2:新的字符串
arg3:匹配要重命名的文件,可以使用3种通配符,*、?、[char],*表示任意多个字符,?表示单个字符,[char]匹配char单个自定的精确字符,可以填写任意字符,foo[a]*表示只匹配fooa开头的文件名,如果一个文件是foobcc.txt,是不会被匹配的。
值的注意的是,此命令在不同的linux版本也有不同,Debian一系的操作系统别有用法。举例说明:
比如/home下有两个文件 abbcc.txt, addbb.txt , a.txt
我想把a替换为xxx,命令是这样的 : rename “a” “xxx” *.txt
那么它会首先去匹配有哪些文件需要修改,这里凡是.txt后缀的文件都会被匹配,如果改成?.txt则只会匹配到一个文件,那就是a.txt。然后把匹配到的文件中的a字符替换为xxx,注意测试时abab.txt这样的,只会替换第一个a,有待再了解。
说到Debian一系的操作系统,比如Ubuntu,这个命令这样使用是不对的,报错,向下面这样的:
Bareword “a” not allowed while “strict subs” in use at (eval 1) line 1.
经过Google之后发现有这样的说法:
On Debian-based distros it takes a perl expression and a list of files. you need to would need to use:
rename ‘s/foo/foox/’ *
这里是一个perl表达式,好理解点说就是综合了前两个参数为1个,这样就只需要2个参数,而非上面所说的3个参数形式。
所以在Ubuntu下执行上面举例的重命名时,命令是这样的:rename ‘s/a/xxx/’ *.txt
由于没有深入应用,今天是群里有人问了,于是自己动手实践了一下,总结上面简单的用法,也算以备后忘吧。
继续阅读~
评论(1)