Kily's Blog » 网页制作相关

前端开发利器vim

kily — Fri, 17 Jun 2011 11:01:21 +0000

老早就听大湿们说vim是真正的程序员用的编辑器，我也是经过无数次的“使用-放弃-使用-放弃”之后，最终选择了vim这个神器。综合起来我用到的vim功能并且觉得好用的有以下几条：

1. 界面美观、轻巧、系统资源损耗小
2. 跨平台，Windows下的Gvim , Linux下的vi , Mac下的mac vim
3. 主题风格超级多（http://code.google.com/p/vimcolorschemetest/），我用monokai , 很经典、很酷
4. 代码自动补全+zencoding可以说是完美了

不幸的是vim的可定制性太高，很多参数设置都是需要手动配置的。而且Windows下用vim会出现一些问题，多数是因为用户不会配置.vimrc文件，一个设置就可能让你放弃vim。比如：

1. vim字体不好看
2. vim文件格式
3. vim的三种模式：命令、可视、插入
4. vim快捷键设置。
5. 。。。

很多新手可能会因为这些问题放弃使用vim。我建议先看看善用佳软博客的我这样使用VIM。

不过我有一个自己觉得好用的版本，是依照我个人习惯设置过来的。放出个压缩包给大家，大家可以参考下。使用方法如下：

1. 先下载gvim7.2的版本安装，点这里
2. 解压的我包到vim安装目录
3. 安装YaHei.Consolas字体（强烈建议安装）

我用的vim7.2：下载地址

YaHei.Consolas字体：下载地址

更新：adam的VIM视频教程很强大，强烈建议学习研究。地址：

http://bbs.yuyadong.com/read.php?tid=3930

CSS分组（多元素）选择器使用小记

kily — Sat, 20 Nov 2010 04:36:52 +0000

从来都不要认为一件事情简单就不去仔细研究，CSS本身是比较简的但要想完全凌驾其上也不是一朝一夕的事，平常做页面时就要多做总结，积累才是学习的最好方法。

正题：

在我们写CSS时遇到两个选择器不同规则相同的情况大多会用到多元素选择器，因为这样在某种情况下会少写一条相同的规则，比如：

#display-block{ display:block; }
.display-block{ display:block; }

合并为：

#display-block, .display-block{ display:block; }

这个地球人都知道？往下看…
毫无疑问上面这种方法大大的精简了代码，但是在实际操作中我发现并非所有的情况都如我所愿。比如：

#display-block{ display:block; color:red; }
.display-block{ display:block; color:black; }

合并为：

#display-block{ color:red; }
.display-block{ color:black; }
#display-block, .display-block{ display:block; }

对比一下这两段代码，你会发现下面合并过的比上面没合并的多了大约18个字符，换句话说就是合并并没有达到精简代码的效果，反而比原来的还长了。

总结一：当某选择器有单一CSS规则时，用分组选择器会达到精简代码的作用。

再来看一种情况：

#f1{ display:block; color:red; }
#f2{ display:block; color:black; }

合并为：

#f1{ color:red; }
#f2{ clor:black; }
#f1,#f2{ display:block; }

对比一下合并后大概节省了7个字符。

总结二：当N个（短）选择器下含有至少1条相同CSS规则，用分组选择器优化其中某条规则时可能会达到效果。

能否达到效果要看其中的“短”和“某条”的字符长度。用个小学生方程吧：设它俩字符长度为X，Y 那么：

当 Y*N>X*N+(N-1)+2+Y 时，总结二成立。否则不成立。

解释：

N-1表示分组选择器之间的“,”
2表示多出来的“{}”

好了！一个简单的结论出来了哈。不过貌似没多大意义，也只做折腾罢了。匆深究^!^

附：CSS森林博客作者制作的CSS压缩工具：mergeCSS

分享一段可定制的分享代码

kily — Wed, 13 Oct 2010 10:00:18 +0000

最近在给公司做网站的时候需要给产品页加上分享到微博的代码，本来用addthis的代码，但可定制性太差。于是就自己上网搜索了下总结出一个感觉还不错的代码。效果类似于文章下面的“收藏&分享”。

如果觉得不够的话自己去搜索链接代码，图标用的是eicodesign发布的免费图标哦。

用法：

1.复制下面的HTML代码到你的HTML文件中(最好下载，免得替换符号)：


	
		分享：
		
			新浪微博
		
		
			网易微博
		
		
			腾讯微博
		
		
			QQ空间
		
		
			豆瓣

2.在你的样式表中加入如下代码：

#ak_share     { padding:10px 0; font-size:12px; }
.ak_share      { height:1%; overflow:hidden; }
.ak_share dt { float:left; font-weight:bold; color:#A5A5A5; height:16px; line-height:16px; }
.ak_share dd { margin-right:10px; margin-left:0; height:16px; float:left;  }
.ak_share a:hover { color:#ed7811; text-decoration:underline;}
.ak_share a     { float:left; height:16px; line-height:16px; padding-left:18px; background:url(share.gif) left top no-repeat; color:#666; text-decoration:none; }

.ak_share .t_163_s     { background-position: 0 -16px; }
.ak_share .t_qq_s     { background-position: 0 -32px; }
.ak_share .qzone_s     { background-position: 0 -48px; }
.ak_share .douban_s     { background-position: 0 -64px; }

注意：红色的图片路径自己修改

点击查看效果

素材打包下载

设计创意就在瞬间？

kily — Sat, 02 Oct 2010 05:25:19 +0000

关于设计的东西我是没有发表论点权利的，但是就现实中的一些东西还是可以让我们思考很多的，下面是我同一天在两个购物网站上看到的图片。相信懂的人自然懂^!^

第一张（出自quwan.com）：

第二张（出自taobao.com）：

你能看出来两符图版的区别吗？知道就行了哈，多学习，多积累~

又一个仿写的页面

kily — Thu, 13 May 2010 03:57:05 +0000

嗯！我承认好长时间都没做东西了，有些玩物丧志了！前两天无意中发现手机中国。感觉整个页面效果非常好，用户体验也不错，条理清晰内容丰富。在我看来的确是一个不错的站点！

于是就萌生了仿写的念头。说来也惭愧，我本人感觉自己没什么创新意识，做东西也是东拼西凑，马上要找工作了也没有个像样的作品。所以也就只能仿仿人家的作品了。

虽然是仿，但从很多方面来说仿写比自主设计要难许多。可能做过的同学知道，我这里所谓的仿写绝对不是仅仅扒下HTML和CSS，而是自主写HTML结构与CSS，适当的参考原页面。所以仿写想要仿到100%几乎是不可能的！特别是相对于这类门户性网站。

边看三国边写页面搞了大概五天吧，什么时候开始的都忘了哈！由于东西过多，我也没办法把全部过程记叙下来。放上来也只是做个标记，如果大家有兴趣可以留言讨论！也可以去看看我上次写的文章-仿网易页面：http://www.keelii.com/my-copy-163/

最终效果预览

源代码与素材

新的个人主页上线啦

kily — Fri, 26 Mar 2010 11:54:04 +0000

做这个个人主页的原因主要是为了我马上要找工作而设计的作品，刚好这一阵子比较闲就写了下了这个小主页，域名是我先前申请的shufry.com。呵呵！WPG的朋友都建议上次换成这个域名但我还是坚持了自己的看法。

打算做两个作品，一个偏重设计一个偏重页面重构。希望找工作的时候能比较顺利，我是不擅长设计的，所以这个做的不好大家将就着看吧，现在只是个轮廓，我会慢慢得放上去些内容。过两天打算做个门户网站放上去，毕竟现在前端工程师是要有架构大型门户网站的能力的。

呵呵！其实这个也没多大意义，只是放上来给大家看看罢了，另外自己感觉这段时间没什么可写的，但是还要坚持更新呀！看着那么多的留言不更新真是对不起大家了！

怎样才算是一个好博客

kily — Fri, 19 Mar 2010 11:01:03 +0000

写博客也有两年多的时间了，从PJ到WP的确是验证了一个写独立博客的真谛：生活在于折腾。不管是做网站也好，写博客也罢要想做得好就必须一无返故的坚持折腾的原则。

今天我想总结一下在我心目中一个好博客的定位，只做参考！

首先得说明一下，现在的博客各类很多，写博客的目的也不尽相同，我暂且放下这些问题。就什么样的博客才算是一个好博客这个问题论述。

1.有一个良好的用户界面

对人感觉的好坏就在于第一印象。博客也一样，你的博客可以不华丽不漂亮但一定得有条理，不让读者反感，这才能引导大家关注你博客的内容。要是博客“鬼都不认”或者自己看着就心烦那就停止或者尽快补救。所以在我看来：一个好的用户界面是对来访者的尊重，也是自身休养的体现。

2.对用户负责的内容

大家都说内容是王道，但是我只把它放到了第二位。当然并不是因为我认为它不重要，而是一个次序问题。在博客内容方面我个人觉得最重要的是要对浏览你博客的用户“负责”。我意义上的“负责”是指内容要让大家容易明白(专业除外)，标题一目了然，让用户区别内容是否感兴趣，然后再延伸阅读。

在内容正确实时的情况下尽量注重其客观性，也就是在你描述一个问题的时候要尽量考虑到各方面的原因，如果做不到全面兼顾，至少也要实时准确。有错误或者不妥时就立即修改过来避免误导后来访问者。

3.注重与访客交互

正如我博客留言本上所说“有来无往，非礼也”。古人总结出来的经典在写博客方面同样实用。如果来你博客的是你友链上的或者是一些有缘朋友，那么回访是必须的。不一定非要去人博客留言，但一定得去看一眼，看看有无更新或是自己感兴趣的内容。留不留言就顺其自然了。我的核心观点是：不要盲目写博客，要知道博客的实质就是交流，有交流就有感情。记住别人的好是没错的。

4.一个好的页面权重和排名

这一点在大多数人眼里并不重要，但我个人认为PR和Alexa排名就像现实中一个人的学历一样。没有学历并不表示你没有能力，但是有学历就能证明你在某些领域至少是一个领域比别人做的棒。

所以我认为只要是通过正常方法获得的网站好坏指标都是有意义的。

5.尽量让自己博客页面通过W3C校验

我是说尽量哦，这可不是每个人都要做的。如果你是做前端或者有兴趣的那就务必注重这个问题。

其实这一点也是很有争议的。很多人说google,百度的首页都无法通过校验，为什么我们要去做呢？这个问题问的好，同时我得批评一下盲目说这话的人了，人家百度google每天几千万的页面浏览量和你一般的小站能比吗？为什么我们查看百度，google的页面源代码时都是一坨一坨的呢？流量大的网站注重的是带宽成本，能省则省，页面只要正常就行。按自身需求做没问题。

所以说通过校验最大的的好处在于避免了页面中一些基本的语法错误。比如元素嵌套错误，标签没关闭等。这也是前端人员的基本素质。

精巧支付宝导航条制作教程

kily — Tue, 02 Feb 2010 11:18:20 +0000

其实也算不上教程，也就是自己没事儿的时候做点东西然后发上来大家交流交流，希望大家不吝赐教^!^

因为刚看过亚东的教程和这个有点相似，所以就自己琢磨了一下写了一个仅用到一小段的JS就搞定了。亚东的里面要用到JQuery。我感觉要是简单一点的东西直接上JS就行了，有大量需求时再调用库才好。

核心HTML代码如下：

前端开发

active">我要付款

网站开发

交易管理

我的支付宝

安全中心

商家服务








sub-item" id="sub-item1">
HTML

CSS

JavaScript

ActionScript

Photoshop

Fireworks

Flash

注意：

1.菜单项是可以自由扩展的，前提是复制代码中类名为“sub-item”红色列表标签。也就是copy这个ul标签的所有内容粘贴其后就行。
2.类名为“sub-item”列表标签ul的id属性依次类加就OK了，如：sub-item1,sub-item2,sub-item3…
3.类名为“active”的蓝色列表标签表示载入时的默认菜单项。

核心JavaScript代码：

主要功能是：子菜单项随着菜单项变化而变化的效果(类似tab选项卡)。

window.onload = function() {
    for( i=1; i<8; i++ ){
        var nodeItem = document.getElementById("item"+i);    //遍历每个菜单项增加onClick事件
        nodeItem.onclick = function() {
            /*菜单激活动态样式*/
            for( n=0; n<6; n++){
                document.getElementsByTagName("li")[n].className = "";
                //alert(this.className);
            }
            this.className = "active";
            var linkNode = parseInt( this.id.substring(4,5) );
            for ( j=1; j<10; j++){        //按顺序匹配菜单项和菜单内容
                var nodeSubItem = document.getElementById("sub-item"+j);
                if ( linkNode == j ){    //如果菜单项和菜单内容匹配则显示，否则隐藏
                    nodeSubItem.style.display = "block";
                }else{
                    nodeSubItem.style.display = "none";
                }
            }
        }
    }
}

JS代码就不多做解释了，重要部分我已经给出注释。因为我也是菜鸟，费了很大劲才实现效果，还希望高手多多指点。

CSS代码有点小多我就不贴出来了，其实核心代码就那几句，主要为了仿制得完美就得多写一点啦！有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^

最终效最终果预览

代码及原素材下载

CSS实现视觉标识

kily — Tue, 29 Dec 2009 14:31:39 +0000

视觉标识这个词挺新鲜的哈，其实很简单就像上图中箭头指出的一样：当你在网站的博客页面时会有一个橘色的标识。这个效果的最大优点就是提示用户以提高用户体验。一般来说这效果都是用JS来完成的，但如果不牵扯动态页面的话用CSS去实现它会更容易。

首先看这个导航条的核心XHTML代码：

index-page">


首页


博客


论坛


留言


链接

请注意红色标注部分：为了达到效果，我们建立了五个页面(index,blog,bbs,guest,linsk)，而且第个页面的body都有一个唯一的ID属性。

当我们写好样式后来实现标识效果只需要给五个不同ID选择器加上一个鼠标移动到上面去的样式：

body#index-page #index { background: …… }
body#blog-page #blog { background: ……}
body#bbs-page #bbs { background: …… }
body#guest-page #guest { background: …… }
body#links-page #links { background: …… }

其实这个效果挺简单的，有兴趣的同学可以去试试。

最终效果

代码素材下载

CSS导航菜单自动生成CSS Tab Designer

kily — Sat, 12 Dec 2009 04:10:19 +0000

我们用CSS写网页导航菜单时不可避免得需要大量重复的写一些代码，这就影响了我们的时间是效率，那么用这个导航菜单自动生成软件可以帮助我们高效地生成各式各样的导航条而且兼容性也不错。

CSS Tab Designer操作简单，很容易上手。主界面共三列，如图：

Items列为你要添加的导航条项目。点击“+”就可以添加。

Tab Styles为导航条的样式，这个软件给我们提供了好多样式，你可以任意选择一款你喜欢的。

Preview为最终效果预览图，如果感觉不错就可以点击“Generate HTML & Images”导出html和素材文件。

OK！有了Tab Designer你就能轻松搞定一切的导航条了。

注意：如果导航条内容有中文的话请在Preview列中点右键选择网页编码为”GB2312”即可正常预览。