前端制作的一些技巧分享(1)

作者：高昂
Hi，大家好，我是kuailaibar.com的站长。页面制作已经好几年了。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。Best Regards。

在看这篇文章之前，我们先读一个笑话：
"小沈阳"版设计师
1.做图其实可痛苦的了……设计一做一改，一天就过去了；嚎~设计再一改一调，整个晚上就过去了；嚎~
2.做图最痛苦的事儿是啥，知道不？就是，图没做完，设计又改了；
3.做图最最痛苦的事儿是啥，知道不？ 就是，图好不容易做完了，方案全改了；
4.做图最最最痛苦的事儿是啥，知道不？ 就是，图做完了，狗日的客户跑了；
5.做图最最最最最痛苦的事儿是啥，知道不？ 就是，狗日的客户又回来了,图给删没了；
虽然是一个笑话，但相信很多设计师对上面笑话都有深刻体会，所以我不干设计干制作。（额!）
但后来发现制作也是痛苦的。为了减少痛苦，我闭关修炼，终于领悟了页面制作的真谛。
那就是多练，多收集，多实践。
比如：我在页面制作的时候经常会把代码写成一个个小的模块。代码也用统一的通吃结构写，
这样随便他们（后端开发者）怎么改，到了我这里只要很短的时间稍做调整即可。
固定的网页的结构怎么变也离不了那几个模式，所以常用的代码可以写到一个html中储备。
例如：
常用组合：
http://www.kuailaibar.com/常用组合.html
自适应按钮：
http://cssrain.cn/demo/cssSkill/按钮自适应宽度导航/index.html
表单模板：
http://cssrain.cn/demo/cssSkill/表单模板/demo.html
淘宝圆角：
http://cssrain.cn/demo/cssSkill/淘宝圆角/box_demo.html
阴影效果：
http://cssrain.cn/demo/cssSkill/为元素添加阴影效果/demo.html
制作进度条：
http://cssrain.cn/article.asp?id=1361
使用CSS制作小型提示框：
http://cssrain.cn/article.asp?id=1358
通过这些小的模块，再加上自己固有的那点CSS技术，那么一个网站也就措手可得了。

个人心得：
多练：光说不练是不行的，特别是做前端开发这块。因为说的时候，往往只是整体的，不会说细节方面的，然而一个布局Bug一般都是细节引起的。
多收集：最好的方式就是浏览牛人的博客，国内UED好多，自个搜索吧。记得订阅它们。记得注意他们的友情链接，牛人也不少哦。订阅订阅，统统订阅。记住订阅后，每天一定得把文章读完，否则日积月累就会吓死你的。
多实践：实践出真理。通过实践，你会慢慢发现你们公司的开发模式和套路。比如页面的样式全部用class，把id留给程序员。写css要从全局考虑，也就是说在做的时候先要把文档全看一边做到心中有数，看完后那些模块和css可以到处复制粘贴就基本知道了，接下来就是在前期把模块的css写好了，刚开始慢点没关系，伟人说过我们今天大踏步的后退就是为了明天大踏步的前进，就是这个道理，况且我们还没有退只是起步稍微慢了点。

最后送给大家一个完整版的例子(山寨哦)：
http://www.kuailaibar.com/testwork/my163.html

本文所涉及的例子下载：
http://cssrain.cn/demo/cssSkill/cssSkill.rar

 

 

有效网页表单的八条规则(译).

作者：珊瑚
大家好， 我是珊瑚。 和66一样工作2+年了，在经过第一年的PHP开发之后， 对前端开发的喜爱被挖掘出来，并且一发不可收拾。 同时也迷恋平面设计， 可用性设计。 在CssRain这个平台上， 我希望把国外优秀的前端开发， 互联网设计方面的文章介绍给大家， 希望可以给大家带来设计灵感，分享开发经验。 翻译的拙劣之处请大家见谅， 我会持续改进。
我的城堡:Little Fox's Candy Castle

有效网页表单的八条规则

制作进度条的几种方法.

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作2年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

在实际项目中，进度条的用处还是非常大的。这篇文章主要是要介绍几种制作进度条的方法。通过学习，你也能制作属于自己的进度条了。我们先看看最终效果：

 

第一步，基本

构建基本的代码，看效果演示：
http://www.cssrain.cn/demo/makeProgress/demo1.html
这步非常简单，相信大家都能看明白。 。

第二步，给进度条增加文字显示

还是先看下，效果演示：
http://www.cssrain.cn/demo/makeProgress/demo2.html

他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。

第三步，制作进度条的第二种方式—直接使用图片+背景图片

看最终效果吧：
http://www.cssrain.cn/demo/makeProgress/demo3.html

这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。
当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制 更精确， 比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。

第四步，应用

最后我们看一个简单的应用：
http://www.cssrain.cn/demo/makeProgress/demo4.html

通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
打包下载：http://www.cssrain.cn/demo/makeProgress/makeProgress.rar

基于jQuery的好友选择器V2.0。

作者：karry
Hi,大家好，我是Karry,07年从武汉毕业后到上海工作，先后从事过.Net开发、前端开发。现在在巨人网络(GA)任JavaScript工程师一职。专注于JavaScript编写和用户体验改善。相信细节决定成败，欢迎志同道合的朋友一起交流。
msn:karry[at]live.cn。

之前发布过一片文章：自己动手做jquery 好友输入提示插件 ,现在这次发布的是增强版V2.0，在功能和用户体验等方面多做了改善和拓展。个人觉得好友选择器是一个比较复杂的组件，涉及到前端和后端的整合。在这里我主要是介绍前段如何实现，后端的数据，我用了几个简单的ASP页面来提供。

 

先看下最终截图：

 

1.代码风格

我的组件是作为一个jQuery的插件来做的。把整个组件做为一个类来处理。这样也方便在一个页面上多个好友选择器共存而不相互影响。所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时，会调用默认值。另外，在以下划线开头的方法，我约定为私有方法，理论上不允许外部调用它们。

2.Dom结构

我的DOM结构没有在JS里面构造出来，而是预先下载xhtml页面里面。主要考虑当JS不可用是，至少能保证基本的搜索功能。这也符合“渐进增强”的思想。

3.数据格式

请求了3种不同的数据，首先是好友类别数据，在刚初始化组件的时候去获取，JSON 格式，格式为:
[{name:'以前的同事',id:'1'},{name:'现在的同事',id:'2'}]
然后是对应好友类别的好友总数，用来在点击弹出所有好友时做分页使用。数据格式为Int型，直接输出一个数字就行了。获取数据时使用的参数为typeId,即好友类别的ID，为-1时获取所有好友的总数。
最后是好友列表数据，也是JSON格式。格式为：
[{fUid:1,friendUserName:'karry',friendHeadPic:'images/1.jpg'},{fUid:2,friendUserName:'kaliy',friendHeadPic:'images/2.jpg'}]
数据的获取分两种情况：
一种是输入框中输入字符时获取的数据，用name参数来存放输入框中输入的内容。
第二种是点击右侧按钮出现的所有好友的情况，由于涉及到分页、下拉列表框的过滤等，所以参数比较多
有三个参数：typeId、p、pageSize。 typeId代表当前的类别。p代表当前的页码。pageSize 代表每页显示的人数。

4,功能简介

组件支持多选和单选两种模式，在初始化组件时通过传入参数来控制。默认是多选。在单选模式下可以传入一个回调函数，即当选中某一好友时触发。
整个组件最核心的部分是对事件的监听和对数据的异步获取，组件涉及到了focus、blur、click、keyup，change 五个事件。我在代码里面是把这五类事件分开放在不同的私有方法里面去绑定的。分别是： _clickBind();_focusBind();_blurBind(); _keyUpBind(); _selectChangeBind();
其中对input进行键盘事件的监听是最复杂的，要考虑到多种情况。通常没输入一个键都要去后台请求一次数据，但需要对上下左右方向键和回车键做不同的处理，大家可以直接看源代码来了解。
另外一个比较重要的处理就是重复选择的好友会通过闪动颜色来提示。这里主要是通过setInterval()来实现。
多选模式下选中的好友可以通过 getResult()方法来获取，返回一个存放好友id的数组。

5.默认参数：

前面大部分参数主要是对DOM中对应的按钮和容器进行指定 ，在大家不改变DOM结构的前提下是不需要改动这些参数的。

   /**
* 默认参数
* totalSelectNum 多选模式下，最多选取人数，默认为30
* selectType 选择模式，默认为多选"multiple",若为单选，则用single
* selectCallBack 单选模式下，选中之后的回调函数。
* */
giant.ui.friendsuggest.defaults = {
btnAll:"#ui-fs .ui-fs-icon",
btnCloseAllFriend:"#ui-fs .ui-fs-all .close",
btnNextPage:"#ui-fs .ui-fs-all .next",
btnPrevPage:"#ui-fs .ui-fs-all .prev",
selectFriendType:"#ui-fs-friendtype",
allFriendContainer:"#ui-fs .ui-fs-all" ,
allFriendListContainer:"#ui-fs .ui-fs-all .ui-fs-allinner div.list",
frinedNumberContainer:"#ui-fs .ui-fs-allinner .page b",
resultContainer:"#ui-fs .ui-fs-result",
input:"#ui-fs .ui-fs-input input",
inputContainer:"#ui-fs .ui-fs-input",
dropDownListContainer:"#ui-fs .ui-fs-list",
inputDefaultTip:"输入好友姓名(支持全拼输入)",
noDataTip:"您的好友列表中不存在该好友",
ajaxUrl:"ajax.asp",
ajaxLoadAllUrl:"ajax.asp",
ajaxGetCountUrl:"ajaxcount.asp",
ajaxGetFriendTypeUrl:"ajaxFriendType.asp",
totalSelectNum:30,
ajaxBefore:null,
ajaxError:null,
selectType:"multiple",
selectCallBack:null
};

 演示：http://www.playgoogle.com/demo/friendsuggest2/default.html
 下载：http://www.playgoogle.com/demo/friendsuggest2/friendsuggest.rar
 大家也可以去karry自己的博客 浏览此篇文章：
             http://www.playgoogle.com/view.asp?id=81

 

jQuery音乐播放器V2.0.

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作2年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

在看这篇文章之前，建议你先看1.0版本，地址如下：
http://www.cssrain.cn/article.asp?id=1349
V2.0版本去掉了1.0版本的横向滚动，而是直接在本页的当前歌曲下面 加上播放进度。
支持如下功能：
1，进度条播放 。
2，上一首，下一首，随机播放 。
3，播放完每一首后，自动播放下一首，如果下一首是最后一首，则自动播放第一首。
4，支持鼠标滚动操作，能上下翻滚屏幕。
5，歌曲时间 倒计时 ，而不是从0开始计时。

V2.0版 最新效果截图：

效果演示地址：
http://www.cssrain.cn/jPlayer/jPlayerV2.0/demo.html

源码下载：
http://www.cssrain.cn/jPlayer/jPlayerV2.0/jPlayerV2.0.rar

 

使用CSS制作小型提示框.

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作2年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

这篇文章主要介绍如何使用CSS制作一个圆角的小型的提示框，鉴于这种提示框能用于多种场合，
所以特意拿出来讲讲。我们先来看看最终效果：

既然是纯CSS的圆角，那么必定使用一些圆角的CSS属性，可惜IE并不支持。IE下的效果为：

如果你特别在意IE必须使用圆角来实现的话，那么你还是使用图片吧。
当然在CSS界有句这样的话：显示效果并不是规定在每个浏览器都一样。

如果你不介意的话，那么继续往下看。我们将一步步告诉你怎么去实现这种小型提示框。 

第一步，基本

构建基本的代码，看效果演示：
http://www.cssrain.cn/demo/useCssMakeSJ/demo1.html
这是非常简单的一步，为了使span的padding有效，我们给span加了一个display:block， 为了使文字在span内居中，加了一个text-align:center。另外就是一个兼容Firefox和基于Webkit的浏览器的圆角。

第二步，制作小三角

还是先看下，效果演示：
http://www.cssrain.cn/demo/useCssMakeSJ/demo2.html

制作小三角的原理比较简单，在display:block的状态下，把元素的宽度和高度设置为0，给元素的不同边框设置不同的属性。 比如 ，我们要实现倒三角，那么可以把元素的左右都设置为透明，只设置一个高度有颜色即可。

为什么左右要透明？
这样一来就可以挡住 左右2边的border。看起来，就像一个倒三角了。
嵌套到文字中的时候，需要注意定位问题，需要提醒的是倒三角是没有宽度和高度的，只有border。

倒三角只想留下1px宽度怎么做？看第三步

第三步，把小三角透明

思考一下：
第二步我们已经实现了一个实心的倒三角，那么我们可不可以在当前span原理里在做一个 实心的 ，背景色为白色的 ，宽度小 1px 的倒三角呢？通过定位方式使用这个新的倒三角 把 原来那个 遮住，从而留下1px或者更大像素的宽度。结果不就看起来就像一个透明的倒三角了。
嗯，的确，看最终效果吧：
http://www.cssrain.cn/demo/useCssMakeSJ/demo3.html
现在相信大家也看明白是怎么实现1px边框的了。

通过在当前span元素里再做一个新span元素，新的span元素跟他一样，也是倒三角，样式几乎一样，只不过border的宽度稍微 小 1px，同时新的span元素的背景色是白色，这样就可以把原本为绿色的 大 1px的 倒三角 遮住，只留下 1px 的 绿线 。里面的span元素 top 越小，遮住的就越少，显示出来的border也就越大。

别小看这个小型的提示框，它的用处可是非常大，很多小地方都可以使用它。
打包下载：http://www.cssrain.cn/demo/useCssMakeSJ/useCssMakeSJ.rar

[人数已满] CssRain将实行多人协作模式。

不知不觉，CssRain已经建立1年半了。经常浏览我的博客的朋友应该非常了解，
CssRain已经更新得比较慢了，虽然我尽量做到每天有1篇文章的更新，但有时候还是得几天才1篇文章。
以前记得某个朋友说过一句话，个人博客一般只能开1年，1年之后要么关闭，要么不更新。
现在想起来，这句话说得非常有道理。
其中的因素很多：好奇心减少，激情渐无，工作强度增加，工作调动出差等。
我现在就遇到一个类似的问题。

接下来我将怎么做？
接下来，我将把博客做成一个多人协作的博客。如果你有一定的Web开发经验，并且也拥有分享精神。
那么你可以马上联系我。CssRain@gmail.com

一，关于CssRain的一些数据

1，目前CssRain在feedsky上 每天有将近800的订阅率。并且一直处于上升趋势。

截图：

2，Alexa的排名目前是：31409 。个人博客做的这个数据已经非常不错了。

截图:

 

3，Google pagerank目前为： 4 。

4，收入
 CssRain网站的服务器是由tim免费提供的。所以CssRain几乎不需要任何支出。
 额外的收入就是Google AD了，每年估计有800-1000元吧。

5，影响范围
 我不知道听过CssRain这个网站的有多少人。
 但我的朋友告诉我说：CssRain还是有一定的固定人群的。

二，多人协助计划

如果你确定加入CssRain，那么你可以看看下面的计划：

1，基本要求：
（1），CssRain需要的人数 < = 6 人 ，
（2），拥有一定的Web开发经验，熟悉XHTML，XML，JavaScript，CSS，jQuery，PS等。
（3），每个作者拥有自己的署名，所有权归作者所有。

2，文章内容：
（1），文章必须跟Web有关。尽可能是前端开发的。
（2），文章必须是原创。
  注:可以是翻译国外好的文章。
（3），文章风格必须统一。有模板。
（4），可读性，条理清楚。
  文章介绍，Demo演示，源码下载，思考内容，引申等都不能缺少。
（5），你不必每天发一篇，但每周至少1篇，并保证质量。

3，好处
（1），通过CssRain，你可以发布你的成果，你的成果会被广泛传播。
 文章署名是你的，只要你的文章质量够好，你将会被人记住。
（2），通过CssRain，你可以提高自己，因为你的成果，会有更牛的人帮你找出bug。
 无意识之间，你已经慢慢提高自己。
（3），通过CssRain，你将会认识到更多的牛人，精英，你的接触面会更广，说不定哪天某个大公司缺人，你正好顶上。
（4），你不会收到任何的金钱，但我可以告诉你，你会每过一段时间收到一份神秘礼物。
（5），如果哪一天你想建自己的博客，你随时可以离开CssRain。

4，确定加入？
 如果你同意以上观点，那么你就可以加入CssRain了。
 CssRain有你就更会精彩。

 

 

 

关于IE6 PNG透明。

IE6 png 如果是8位的，可以透明，但8位的有毛边，跟gif就差不多了。
如果要用24位，则需要使用ie的滤镜解决。
看下面的例子：
一个纯JavaScript的：

http://www.cssrain.cn/demo/ie6png/Supersleight/demo.html

jQuery pngfix 插件实现的：

http://www.cssrain.cn/demo/ie6png/jQueryPNGfix/demo.html

看了上面2个例子，你也许知道它们还有2点没实现，那就是不支持CSS中backgrond-position与background-repeat。
当然国外已经有解决方案了，看下面例子：

http://www.cssrain.cn/demo/ie6png/DD_belatedPNG/demo.html

官方站点：http://dillerdesign.com/experiment/DD_belatedPNG/
他的原理就是利用微软的VML语言进行绘制，跟其它的利用AlphaImageLoader滤镜不同。
当然在实际项目中，可能会遇到问题，就是他会增加额外代码，比如在页面中增加了一些xml，
导致有的效果有点问题。 不过可以变通的解决。
利用XX的话来说：用好这个东西 需要有一点技巧。
切记：根据项目的实际使用程序，选择相应的脚本，避免带来额外麻烦。
打包下载：http://cssrain.cn/demo/ie6png/ie6png.rar

jQuery性能优化指南（3）

jQuery性能优化指南（3）
https://docs.google.com/View?docID=dft4vhq9_23cnccgwc7&revision=_latest

jQuery性能优化指南（2）

jQuery性能优化指南（2）
https://docs.google.com/View?docID=dft4vhq9_22g93szvdd&revision=_latest