“背景碎碎切”
Author: Wei18 四 2012
如果遇到大的背景图片，这个方法可以一试~ 定位，全是定位！！！ Demo 源：http://v.qq.com/zt/first/moive_218.html
用jQuery Form Plugin实现Ajax无刷新的文件上传
Author: Wei14 四 2012
在我以前的意识里，觉得用JavaScript或Ajax提交文件表单似乎是一件麻烦的事情，也没有太仔细的研究，后来看jQuery的时候，发现了jQuery Form Plugin这个插件，它方便的实现了Ajax方式的表单提交，例子里也包括了文件表单的提交，那我也来试一下吧，还是用Kohana（最近专注于这个，而且PHP开发要快多了，要是用Struts，要费好多功夫）。 要Kohana支持上传，先要配置一些upload的参数，把system\config\upload.php拷贝到application/config下，里面的参数做好设置，具体参考Kohana的文档吧，之后创建一个Controller class Myupload_Controller extends Top_Controller { public function index() { $view = new View (“upload”); $view->msg = “Upload File”; $view->render ( TRUE ); } public function upload() { $filename = upload::save(‘myfile’); echo $filename; exit (); } } Top_Controller为我自己创建的类，也继承自Kohana的Controller，之后创建upload.php的view文件 <html> <head> <title><?php echo $msg;?></title> <script type=”text/javascript” src=”<?=url::base()?>js/jquery-1.3.2.min.js”></script> <script type=”text/javascript” src=”<?=url::base()?>js/jquery.form.js”></script> <script type=”text/javascript”> // [...]
提高php代码质量36计
Author: Wei9 四 2012
1.不要使用相对路径 常常会看到: require_once(‘../../lib/some_class.’); 该方法有很多缺点: 它首先查找指定的包含路径, 然后查找当前目录. 因此会检查过多路径. 如果该脚本被另一目录的脚本包含, 它的基本目录变成了另一脚本所在的目录. 另一问题, 当定时任务运行该脚本, 它的上级目录可能就不是工作目录了. 因此最佳选择是使用绝对路径: define(‘ROOT’ , ‘/var/www/project/’); require_once(ROOT . ‘../../lib/some_class.’); //rest of the code 我们定义了一个绝对路径, 值被写死了. 我们还可以改进它. 路径 /var/www/project 也可能会改变, 那么我们每次都要改变它吗? 不是的, 我们可以使用__FILE__常量, 如: //suppose your script is /var/www/project/index.php //Then __FILE__ will always have that full path. define(‘ROOT’ , pathinfo(__FILE__, PATHINFO_DIRNAME)); require_once(ROOT . ‘../../lib/some_class.’); //rest of [...]
推荐几个不错的流体式布局的WordPress主题
Author: Wei5 四 2012
好吧，瀑布流体式布局最近的确很火，看到搜索关键字流体式布局WordPress主题来的人越来越多，所以，我也跟风一把，推荐几个不错的中文流体式布局的WordPress主题，目前发现了三个都是不错的国内的用户做的，如果你有更好的，欢迎在下面留言补充。 Imbalance单栏在线杂志瀑布流布局主题 这是一款简约的现代风格wordpress 主题。Imbalance故名思义就是自由的意思了，配合jQuery，使得Imbalance主题的排版布局灵活自由，完全适用于主流操作系统的所有浏 览器。用这款Imbalance主题做杂志博客或者图片展示等，都是极不错的，甚至不用转换页面就可以浏览图片和文字内容，用户体验很友好。 主题名称：Imbalance 主题作者：wpshower.com 主题版本：1.18 主题语言：英语 主题类别：自由宽度、白色、红色、Imbalance 主题演示 主题下载一 主题下载二 petal_2.0仿花瓣瀑布流布局主题 花瓣petal主题是一款瀑布流WordPress主题，主题清新简洁。瀑布流是今年流行的一种页面布局方式，淘宝哇喔，蘑菇街，点点等都采用了瀑 布流布局。花瓣主题集成了日志一键分享功能，对于提升网站流量非常有用。另外petal对于浏览器的兼容也是不错的，支持目前所有主流浏览器，并且支持自 定义菜单，支持WordPress3.0+ 主题名称：petal_2.0仿花瓣瀑布流布局（瀑布流主题） 主题版本：2.0 主题作者：空杯 主题插件：推荐安装WP-PostViews 主题演示 主题下载 iphoto仿Pinterest瀑布流布局图片主题 又一个瀑布流布局的wordpress主题，iPhoto从轻博客Tumblr的一个主题演变而来，重写成Wordpress可用的图片主题，并且添加多种功能。主题支持 IE, Firefox, Chrome, Opera等主流浏览器
15个最常用的lightbox效果jQuery插件
Author: Wei2 四 2012
jQuery强大的地方，在于您不需要任何JS基础，就可以做出炫丽的特效。而lightbox又最常应用于图片、窗口等地。收集了15个最常应用插件，分享给同样需求旺盛的童鞋们。 Lightview jQuery Plug-in Lightview was built to change the way you overlay content on a website. TopUp TopUp is an easy to use JavaScript library for unobtrusively displaying images and Web pages in a Web 2.0 approach of pop-up. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and [...]
20免费的Web UI元素工具箱和模具
Author: Wei30 三 2012
毫无疑问，每个 WEB 设计师都在 UI 设计上费尽了心血，即使这样，资源的匮乏，视野的狭窄，也常常让他们的呕心沥血之作并不为人看好，事实上，UI 设计并不需要闭门造车，很多 UI 元素是通用的。本文收集了 20 套非常前端的 UI 元素库，它们多数是可以后期修改的 PSD 或 SVG 版。 Modern WEB UI Set (.psd) 这套 UI 库包括了从按钮，到渐变，到文字各种 UI 元素，非常整齐地存放在不同目录下，由于是 PSD 矢量分格式，里面的任何元素都是可以修改的。 Massive WEB UI & Button Set (.psd) 这套 UI 元素库包含3种风格，水晶，渐变色，单色，渐变色还包含7种颜色组合。 WEB UI Element Pack (.psd) 包含 19 个 UI 元素，从加载进度条，到按钮，到页码，到滑动条。 WEB UI Wireframe Kit (.psd) 这套 UI [...]
妙味课堂-JavaScript视频教程——流程控制和运算符
Author: Wei23 九 2011
本课知识点:) |, D! N5 L5 \” }6 r9 S, H *流程控制 | 判断（选择）语句, {6 a% o! C% c d – else – else if – 每次只能选一种 | switch语句 – switch穿透 | 循环” v, S” a2 |# }” I% i – for – while; q9 v }, f9 S6 ^( Y- }. L9 N – for in$ [, [...]
18个提高效率的CSS/网页设计工具
Author: Wei2 十 2011
该网站拥有先进的这么多，我们甚至不能与5年前的互联网。因此，许多现代的工具和应用程序是基于浏览器中的这些天。而且其中许多可以用于平均网页设计师。我不仅是设计师的工具，但图形艺术家，CSS和HTML开发人员。让我们知道您最喜爱的工具，在下面的评论。 CSS3 Generator html2canvas Phoenix Image Editor Color Scheme Designer Resize my Browser Ultimate CSS Gradient Generator CSS Layout Generator Grid Layout Generator Custom CSS Grid Builder Online Privacy Policy Generator Typesetter HTML Column Layout Generator Form Style Generator CSS Grid Builder FAARY – CSS Forms HTML-Ipsum CSS3 Menus Awesome Font Stacks 来源：http://designm.ag/resources/18-time-saving-web-apps-for-cssweb-designers/
3d导航菜单效果-JQuery版和原生JS版
Author: Wei6 十 2011
jQuery版 <!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3d导航-jQuery导航效果</title> <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"/> <style> <!– /* reset */ body,html{color:#444;margin:0; font-size:12px; line-height:24px; padding:0; margin:0;} div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;} input,select,h2,object{margin:0;padding:0;} ul,li{list-style-type:none} a{text-decoration:none;color:#2C2C2C} a:hover{text-decoration:underline;color:#F60;} /*** ————————————————————– ****/ #hdw {background:#c00;height: 50px;margin-top: 50px;} #hd { margin: 0 auto; position: relative;width: 960px;z-index: 2;} .menu { [...]
优秀的开源前端框架Bootstrap发布2.0.1版
Author: Wei20 三 2012
简介 Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏 览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端 界面，而且占用资源非常小。 Bootstrap发布时间不长，但是已经非常成熟了，目前最新版本是2.0，包括完整的CSS编译和非编译版本，样例模板和Javascript插件。 历史 早期Twitter的前端工程师几乎采用了任何自己熟悉的库来应对前端的开发需求，这样的造成的问题就是维护和扩展非常困难。最终 Bootstrap成为应对这些挑战的解决方案，并开始在Twitter内部迅速成长，被twitter.com广泛采用，形成了稳定版本。随着工程师对 其不断的开发和完善，Bootstrap进步显著，不仅包括基本样式，而且有了更为优雅和持久的前端设计模式。2011年8月，Twitter将其开源， 相关地址：http://twitter.github.com/bootstrap 使用Bootstrap构建优雅的Web Page Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap，就必须得说说Less。 关于Less Less是一个动态CSS语言框架，官方网站是http://lesscss.org/。 Less扩展了CSS的动态特性，相对于传统的CSS，Less提供了更为强大的功能和灵活性。基于Less，我们可以在编写CSS时使用嵌入式申明、变 量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS，把程序存储在后缀为less的文件中，Less提供了框架 将其编译为标准的css文件。举个简单的例子，如果你想为多个样式设置同一个颜色，可以这样写： @color: #FFFFFF; h1 { color: @color; } #sub{ color: @color; } 编译后的css就是： h1 { color: #ffffff; } #sub { color: #ffffff; } 以上代码只是Less的最简应用。除了变量，还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象，这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上，Less都让CSS开发有了大幅提升，动态性增强了。 编译Less的方式很简单，有两种方式，一种是在使用时编译。下载less.js，在样式中引用： <link rel=”stylesheet/less” type=”text/css” href=”less/mystyles.less”> <script src=”js/less.js” type=”text/javascript”></script> 还有一种方式是使用前编译好，可以通过服务器端的Node.js进行编译，也可以到这个网站http://incident57.com/less/下载Less.app，提供了GUI方式编译less文件，目前只支持Mac OS X。 基于Less编译的Bootstrap 使用了Less的Bootstrap具备如下优点： Bootstrap实现起来依旧很简单，使用也很简单，把Bootstrap.css拖入你的代码即可。编译less文件可以使用less.js，Less.app或Node.js等多种方案实现。 [...]
渐进增强式布局探讨（下）
Author: Wei9 三 2012
上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用： 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 尝试之路 考虑以下DOM结构： <div id=”page”> <div id=”hd”></div> <div id=”bd”> <div></div> <div></div> <div></div> </div> <div id=”ft”></div> </div> 利用浮动元素的负边距来定位： .main { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; } .extra { float: left; width: 190px; margin-left: -190px; } 这样我们得到了第一个尝试页面 pe_layout_example1.html. 可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。 一个自然的想法是，给main的容器#bd添加padding: #bd [...]
渐进增强式布局探讨（上）
Author: Wei9 三 2012
来看一个经典的三栏布局： 从内容出发（渐进增强的核心思想），一份合理的HTML结构如下： <div id=”page”> <div id=”hd”></div> <div id=”bd”> <div></div> <div></div> <div></div> </div> <div id=”ft”></div> </div> main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。 写好上面的代码后，我们来看看如何实现三栏布局 。（书写HTML时，尽量以内容为向导，要避免一上来就考虑布局，这体现的是内容与表现的分离，同时也是渐进增强思想在工作流程中的体现。） Table布局 经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。 Float布局 浮动布局满天飞： 优点是简单，缺点呢？在One True Layout这篇文章中有详细的探讨。或者看我收集的一些Float引发的Bugs. 考虑到IE的庞大市场，目前只好将浮动布局关禁闭了。 绝对定位布局 绝对定位非常简单，非常精准。但面对不可预料的高度时，绝对定位就死翘翘了。可以看看这篇文章，还有一个不错的例子：Flanking Menus. 废话不多说，也关禁闭。 负边距布局 Ryan Brill在2004写了一篇文章：Creating Liquid Layouts with Negative Margins. 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。对于上面的三栏布局，需要先调整DOM结构： <div id=”hd”></div> <div id=”bd”> <div> <div></div> <div></div> </div> <div></div> </div> <div id=”ft”></div> 最终的CSS实现请看这里。请仔细阅读Ryan的原文，可以发现负边距能解决两栏布局中文档结构的问题（main可以放在sub前面）。但对于三栏布局，Ryan给出的解决方案需要添加额外的包裹层，对DOM结构也依旧存在依赖关系。 这个方法的最大价值是：开启了负边距的神奇大门，让布局的实现思路立刻活跃了起来。 圣杯布局 2006年，Matthew Levine开始寻找布局圣杯：In [...]
