2013年四月GBin1月刊

小咪咪 2022-02-25 08:12 213阅读 0赞

2013年三月GBin1月刊

![title.jpg][]

帮助你更快的进行网站设计 - Markup Framework

![title.jpg 1][]

Markup是一套布局，小组件，UI组件和字体排版样式的框架，可以帮助你快速的执行web相关的设计和开发，相信没有人愿意自己花时间从最基础的层次开发web应用或者是网站，而Markup恰好很方便的帮助你解决了所有的dirty work。 [阅读更多][Link 1]

Flexbox布局的简单演示之二

[![title.jpg 2][]][title.jpg 2 1]

之前我们介绍了 [Flexbox的介绍][Flexbox]，并且给出了一个 [Flexbox的简单例子][Flexbox 1]，告诉大家如何创建Flexbox并且简单的利用Flexbox来操控页面内元素的顺序。在今天的文章中，我们继续介绍Flexbox的一些其它的属性。

[阅读更多][Link 2]

帮助查看本地表单元素样子的网站 - Native Form Elements

![title.jpg 3][]

如果你想查看某个表单组建在特定浏览器或者操作系统上的长相的话，这个工具网站 - Native Form Elements 肯定能够帮你忙！

[阅读更多][Link 3]

苹果手机外观设计的模板（psd）

[![f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png][]][f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png 1]

如果你需要寻找一套apple相关设计模板的话，今天这一套PSD的格式的iphone/ipad空白模板肯定能够满足你的需要！

[阅读更多][Link 4]

分享8个超棒的免费界面UI设计

[![2147921b-5f08-4f06-a356-428e914d5546.jpg][]][2147921b-5f08-4f06-a356-428e914d5546.jpg 1]

Flat  [UI][]是现在的一个设计趋势。它使用扁平的设计并且去除了修饰性的设计元素，例如，阴影，渐变，圆角等等。更适合简单的设计风格，在今天的设计UI介绍中，我们分享9个这种风格的免费UI设计，希望大家喜欢！

[阅读更多][Link 5]

帮助你生成缩进式自适应宽度的响应式布局插件 - jresponsive.js

![title.jpg 4][]

可能大家都使用过各种不同的响应式 [jQuery插件][jQuery]，isotope，masonry 或者是其它，今天介绍的jresponsive.js肯定是与  众不同的一款，和其它插件不一样的地方在于，当你缩放浏览器的时候，包含的元素会首先动态自动缩小，当小于特定宽度的时候，才会转行生成响应式特效。相信  大家肯定会喜欢这个效果！

[阅读更多][Link 6]

帮助你优化前端性能的工具类网站 - browserdiet

![title.jpg 5][]

如果你想了解如何优化前端性能的话，这个工具类型的网站 [browserdiet][]绝对可以帮你大忙，它从以下6个主要技术讲述了技术选择和最佳实践：

[阅读更多][Link 7]

超棒的CSS开源UI界面元素类库 - TopCat

![title.jpg 6][]

[TopCoat][]是一套免费的开源UI元素类库，整套类库不使用任何javascript，而是使用CSS和HTML来生成。

[阅读更多][Link 8]

CSS的未来：游戏的变革Flexbox

[![title.jpg 7][]][title.jpg 7 1]

[HTML5][]和 [CSS3][]给网络开发者提供了新的语法标签，本地动画工具，服务器端字体等等新增功能，这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具，事实上，即便是最有前途的CSS3现在也仍旧是在地平线上。

[阅读更多][Link 9]

分享两套免费的超棒响应式HTML5网站模板

[![title.jpg 8][]][title.jpg 8 1]

在今天的文章中，我们分享两套响应式HTML5网站模板。它们每套模板共有6个不同色彩的主题，不同的视觉感和创新感绝对会让你眼前一亮！希望你们喜欢我们今天的推荐！

[阅读更多][Link 10]

极客技术专题【003期】：java mvc 增删改查 自动生成工具来袭

![title.jpg 9][]

[阅读更多][Link 11]

极客技术专题【002期】：开发小技巧 - 如何使用jQuery来处理图片坏链？

![title.jpg 10][]

[阅读更多][Link 12]

极客技术专题【001期】：jQuery初学者入门

![title.jpg 11][]

[阅读更多][Link 13]

开发小技巧： 如何在jQuery中禁用或者启用滚动事件.scroll

![title.jpg 12][]

开发人员在使用jQuery开发web应用或者网站的过程中，有的时候需要触发特定元素来禁用页面滚动特性，或者启动页面滚动，使用下面的jQuery代码可以帮助你实现window对象滚动事件的绑定和解除绑定。

[阅读更多][Link 14]

Android版Firefox：更私密，更好的支持

[![72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg][]][72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg 1]

同桌面版的Firefox20一起，Mozilla已经能够 [更新了针对Android系统的Firefox][Android_Firefox]。最新针对Android系统的Firefox版本已经可以在 [Google Play Store][Google_Play_Store]上下载。

[阅读更多][Link 15]

Spell Checker - 新版Chrome的纠错特性

[![451ad399-4d25-48be-9666-e27e81543da6.jpg][]][451ad399-4d25-48be-9666-e27e81543da6.jpg 1]

Google升级了Chrome网络浏览器的稳定版本，增加了更先进的本地拼写检查和词汇建议功能。

[阅读更多][Link 16]

Mozilla，Epic携手打造Unreal 3 游戏引擎

[![5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg][]][5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg 1]

Mozilla携手Epic游戏带来了 [Unreal 3网络游戏引擎][Unreal_3]。这是一个高端的游戏引擎，会改变你对网页游戏的看法。Unreal 3引擎之前在Flash上，这次是第一次在web上的可安装免费（且移动设备友好）的版本。

[阅读更多][Link 17]

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

![title.jpg 13][]

iCheckbox是一个超棒的界面美化Javascript类库。

[阅读更多][Link 18]

介绍一个快速导航插件：Windy

[![4.jpg][]][4.jpg 1]

windy 是一个 [jQuery插件][jQuery 1],使用 [CSS  3D][CSS_3D]变换和转换来略过一堆物品从而实现快速导航。连续 [导航][Link 19]的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。使用这个插件时需要一个无序列表的class：“wi-container”

[阅读更多][Link 20]

超棒的旋转式幻灯jQuery插件 - Roundabout

[![title.jpg 14][]][title.jpg 14 1]

可能大家都厌倦了千篇一律的平面幻灯特效，在这篇文章中我们将介绍一款超棒的立体动态旋转式的jQuery幻灯插件 - Roundabout。

[阅读更多][Link 21]

jQuery的“回到顶端”插件 - ScrollUp

![title.jpg 15][]

Scrollup是一款jQuery的“回到页面顶端”的插件，能够帮助你快速的实现一个完全自定义的“back to top"的功能。

[阅读更多][Link 22]

jQuery鼠标悬浮菜单自动缩放效果

![title.jpg 16][]

如果大家经常访问gbin1博客的话，肯定熟悉首页的菜单自动缩放效果，当你鼠标悬浮当前菜单的时候，会挤压其它的菜单宽度。

[阅读更多][Link 23]

使用jQuery插件sidr来创建一个隐藏式的边栏菜单

[![title.jpg 17][]][title.jpg 17 1]

如果大家需要创建一个隐藏式的边栏菜单的话，Sidr这个jQuery插件肯定能够帮助你快速的实现。这个插件拥有两个不同的样式主题，暗色和亮色。使用非常简单，javascript和HTML代码如下：

[阅读更多][Link 24]

本周推荐9款免费的网站模板设计

[![1.jpg][]][1.jpg 1]

本周，我们推荐来自极客标签带来的10款免费的模板设计，包括Bootstrap模板，wordpress企业模板，Joomla模板等，希望大家喜欢！

[阅读更多 ][Link 25]

开发小技巧：jQuery来循环控制一系列的元素对象的行为

![title.jpg 18][]

在jQuery开发中，我们往往需要循环的控制一些元素的行为，比如，动画，或者隐藏/显示，通常我们可以使用jQuery的delay()方法或者Javascript的setTimeout方式来处理。

[阅读更多 ][Link 26]

web开发人员职业发展的11个阶段

![noob-o.gif][]

今天我们带来的是一篇有趣的关于web开发人员职业发展11个不同阶段的文章。  [web开发人员][web]是个有着许多阶段，非常有趣并且拥有挑战的一个职业。考虑到这陡峭的学习曲线，你可以完全预期到你将经历挫折，启蒙，自以为是以及在这些心态之间的转变。

[阅读更多 ][Link 27]

推荐10款来自极客标签的超棒前端特效\[第一期\]

[![1.jpg 2][]][1.jpg 2 1]

本周推荐的10款来自 [极客社区][Link 28]的前端特效！希望大家会喜欢！

[阅读更多 ][Link 29]

使用Flexbox布局方式的简单演示

[![title.jpg 19][]][title.jpg 19 1]

众所周知， [CSS][CSS3]有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型，简称为Flexbox。它如今经过重写，使得在编码和使用上得到非常有效的简化。

[阅读更多 ][Flexbox]

留言

[title.jpg]: http://www.gbin1.com/tutorials/gbcollection/2013april/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/css/20130430-markup-framework/title.jpg
[Link 1]: http://www.gbin1.com/technology/css/20130430-markup-framework/
[title.jpg 2]: http://www.gbin1.com/technology/css/20130419-flexbox-layout/title.jpg
[title.jpg 2 1]: http://www.gbin1.com/technology/css/20130419-flexbox-layout/index.html
[Flexbox]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/
[Flexbox 1]: http://www.gbtags.com/gb/share/707.htm
[Link 2]: http://www.gbin1.com/technology/css/20130419-flexbox-layout/
[title.jpg 3]: http://www.gbin1.com/technology/html/20130420-native-form-elements/title.jpg
[Link 3]: http://www.gbin1.com/technology/html/20130420-native-form-elements/
[f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png
[f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png 1]: http://www.gbtags.com/gb/networks/uploadimg/f92edf76-96c8-4a1c-81cc-fc9c9d8ee458.png
[Link 4]: http://www.gbin1.com/tools/design/20130421-iphone-psd/
[2147921b-5f08-4f06-a356-428e914d5546.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/2147921b-5f08-4f06-a356-428e914d5546.jpg
[2147921b-5f08-4f06-a356-428e914d5546.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/2147921b-5f08-4f06-a356-428e914d5546.jpg
[UI]: http://www.gbin1.com/bloghome.html?tag=ui
[Link 5]: http://www.gbin1.com/tools/design/20130422-free-flat-ui-design/
[title.jpg 4]: http://www.gbin1.com/technology/jquerynews/20130423-jquery-plugin-jresponsive/title.jpg
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery%E6%8F%92%E4%BB%B6
[Link 6]: http://www.gbin1.com/technology/jquerynews/20130423-jquery-plugin-jresponsive/
[title.jpg 5]: http://www.gbin1.com/technology/javautilities/20130424-performance-for-website-browserdiet/title.jpg
[browserdiet]: http://browserdiet.com
[Link 7]: http://www.gbin1.com/technology/javautilities/20130424-performance-for-website-browserdiet/
[title.jpg 6]: http://www.gbin1.com/technology/css/20130425-css-ui-frameworks-topcat/title.jpg
[TopCoat]: http://topcoat.io/
[Link 8]: http://www.gbin1.com/technology/css/20130425-css-ui-frameworks-topcat/
[title.jpg 7]: http://www.gbin1.com/technology/css/20130426-flexbox-game/title.jpg
[title.jpg 7 1]: http://www.gbin1.com/technology/css/20130426-flexbox-game/index.html
[HTML5]: http://www.gbin1.com/bloghome.html?tag=html5
[CSS3]: http://www.gbin1.com/bloghome.html?tag=css
[Link 9]: http://www.gbin1.com/technology/css/20130426-flexbox-game/
[title.jpg 8]: http://www.gbin1.com/tools/websitetemplate/20130418-responsive-html5-templates/title.jpg
[title.jpg 8 1]: http://www.gbtags.com/gb/share/819.htm
[Link 10]: http://www.gbin1.com/tools/websitetemplate/20130418-responsive-html5-templates/
[title.jpg 9]: http://www.gbin1.com/tutorials/knowledge-sharing/20130418-knowledge-sharing-no3/title.jpg
[Link 11]: http://www.gbin1.com/tutorials/knowledge-sharing/20130418-knowledge-sharing-no3/
[title.jpg 10]: http://www.gbin1.com/tutorials/knowledge-sharing/20130412-knowledge-sharing-no2/title.jpg
[Link 12]: http://www.gbin1.com/tutorials/knowledge-sharing/20130412-knowledge-sharing-no2/
[title.jpg 11]: http://www.gbin1.com/tutorials/knowledge-sharing/20130408-knowledge-sharing-no1/title.jpg
[Link 13]: http://www.gbin1.com/tutorials/knowledge-sharing/20130408-knowledge-sharing-no1/
[title.jpg 12]: http://www.gbin1.com/technology/jquery/20130410-jquery-enable-disable-scroll/title.jpg
[Link 14]: http://www.gbin1.com/technology/jquery/20130410-jquery-enable-disable-scroll/
[72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg
[72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/72e117b5-d3d5-4e0f-91f1-d4411fcc9bd4.jpg
[Android_Firefox]: http://blog.mozilla.org/blog/2013/04/02/firefox-gives-you-more-control-over-your-privacy/
[Google_Play_Store]: http://addons.mozilla.org/en-US/android/addon/quitnow/
[Link 15]: http://www.gbin1.com/internet/mobile/20130411-android-firefox/
[451ad399-4d25-48be-9666-e27e81543da6.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/451ad399-4d25-48be-9666-e27e81543da6.jpg
[451ad399-4d25-48be-9666-e27e81543da6.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/451ad399-4d25-48be-9666-e27e81543da6.jpg
[Link 16]: http://www.gbin1.com/internet/news/20130411-chrome-feature-spell-check/
[5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg
[5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/5a97f2ff-8eb2-4214-822b-9fabb1068135.jpg
[Unreal_3]: http://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-of-the-web-as-a-platform-for-gaming/
[Link 17]: http://www.gbin1.com/internet/news/20130412-unreal3-engine/
[title.jpg 13]: http://www.gbin1.com/technology/jquerynews/20130414-jquery-plugin-icheckbox/title.jpg
[Link 18]: http://www.gbin1.com/technology/jquerynews/20130414-jquery-plugin-icheckbox/
[4.jpg]: http://www.gbin1.com/technology/jquerynews/20130415-jquery-plugin-windy/4.jpg
[4.jpg 1]: http://www.gbin1.com/technology/jquerynews/20130415-jquery-plugin-windy/index.html
[jQuery 1]: http://www.gbin1.com/bloghome.html?tag=jQuery%20plugin
[CSS_3D]: http://www.gbin1.com/technology/css/?tag=javascript
[Link 19]: http://www.gbin1.com/bloghome.html?tag=%E5%AF%BC%E8%88%AA
[Link 20]: http://www.gbin1.com/technology/jquerynews/20130415-jquery-plugin-windy/
[title.jpg 14]: http://www.gbin1.com/technology/jquerynews/20130416-jquery-plugin-roundabout/title.jpg
[title.jpg 14 1]: http://www.gbin1.com/technology/jquerynews/20130416-jquery-plugin-roundabout/index.html
[Link 21]: http://www.gbin1.com/technology/jquerynews/20130416-jquery-plugin-roundabout/
[title.jpg 15]: http://www.gbin1.com/technology/jquerynews/20130417-jquery-plugin-scrollup/title.jpg
[Link 22]: http://www.gbin1.com/technology/jquerynews/20130417-jquery-plugin-scrollup/
[title.jpg 16]: http://www.gbin1.com/technology/jquery/20130406-hover-auto-resize-menu/title.jpg
[Link 23]: http://www.gbin1.com/technology/jquery/20130406-hover-auto-resize-menu/
[title.jpg 17]: http://www.gbin1.com/technology/jquerynews/20130408-jquery-plugin-sidr/title.jpg
[title.jpg 17 1]: http://www.gbtags.com/gb/share/729.htm
[Link 24]: http://www.gbin1.com/technology/jquerynews/20130408-jquery-plugin-sidr/
[1.jpg]: http://www.gbin1.com/tools/websitetemplate/20130405-free-website-templates/1.jpg
[1.jpg 1]: http://www.gbtags.com/gb/share/634.htm
[Link 25]: http://www.gbin1.com/tools/websitetemplate/20130405-free-website-templates/
[title.jpg 18]: http://www.gbin1.com/technology/jquery/20130401-jquery-control-elements-one-by-one/title.jpg
[Link 26]: http://www.gbin1.com/technology/jquery/20130401-jquery-control-elements-one-by-one/
[noob-o.gif]: http://cdn.tutsplus.com/net.tutsplus.com/authors/jeffreyway/noob-o.gif
[web]: http://www.gbin1.com/gb/search.htm?s=web%E5%BC%80%E5%8F%91
[Link 27]: http://www.gbin1.com/internet/people/20130402-10-stages-of-web-developer-career/
[1.jpg 2]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/1.jpg
[1.jpg 2 1]: http://gbtags.com/gb/share/684.htm
[Link 28]: http://www.gbtags.com
[Link 29]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/
[title.jpg 19]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/title.jpg
[title.jpg 19 1]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/index.html