一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

10 个很有用的 HTML5 和 CSS3 生成器资源

HTML5 和 CSS3 是用来编写网站的两种语言,这里我们向你介绍 10 个非常不错的在线工具,可帮你自动生成很多 HTML5 和 CSS3 代码,节省你大量的时间。   CSS3.me

龙生   09 Aug 2013
View Details

推荐 16 个免费的 jQuery 日期和时间插件

JQuery Age Demo || Download   FLIPCLOCK.JS – JQUERY PLUGIN TIMER, CLOCK, COUNTDOWN WITH FLIP EFFECT

龙生   09 Aug 2013
View Details

11 个用来创建图形和图表的 JavaScript 工具包

Aristochart DEMO || Download Aristochart 是一个用来创建图形和图表的最佳 JavaScript 工具包之一。完全可定制的灵活线图库。

龙生   06 Aug 2013
View Details

15 个使用 jQuery 和 CSS 的选项卡菜单教程

Net.Tuts’ Tab Interface 本教程帮助网页设计者、开发者和程序员创建选项卡界面,只需要一行代码搞定 Alfajango.com’s Easy Tabs ( DEMO || DOWNLOAD)   Unwrongest.com’s Tabify ( DEMO || DOWNLOAD)   Red Team Design’s Google Play’s Minimal Tabs ( DEMO || DOWNLOAD)   Codrops’ Fancy Sliding Form ( DEMO || DOWNLOAD)   Raymond Selda’s Tab Content Rotator 这是一个很棒的选项卡菜单,支持旋转 Republic of 3’s HTML Tabs   Will P’s Blog’s Animated Feedback Tabs 动画的带反馈的 Tab Thingy,很多网站在使用,非常简单,只适用了一些隐藏层实现切换 CSS Tricks’ Organic Tabs ( DEMO || DOWNLOAD) Organic Tabs 可防止选项卡切换时的卡顿,提供更平滑和快速的移动 Tutorialzine’s Sweet Tabs ( DEMO || DOWNLOAD)   Net.tuts’ Blogroll   Net.tuts’ Slick Tab Content   Sunsean’s idTabs ( DEMO || DOWNLOAD)   Queness’ Moving and Sliding Tab ( DEMO || DOWNLOAD)   9 Lessons’ Tab Style Login and […]

龙生   01 Aug 2013
View Details

HTML < iframe > 标签

  定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 提示和注释: 提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。 可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset. 属性 值 描述 DTD align left right top middle bottom 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 TF frameborder 1 0 规定是否显示框架周围的边框。 TF height pixels % 规定 iframe 的高度。 TF longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。 TF marginheight pixels 定义 iframe 的顶部和底部的边距。 TF marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF name frame_name 规定 iframe 的名称。 TF scrolling yes no […]

龙生   28 Jul 2013
View Details

WebSocket 模拟库 SockJS

SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。 SockJS family: SockJS-client JavaScript client library SockJS-node Node.js server SockJS-erlang Erlang server SockJS-tornado Python/Tornado server SockJS-twisted Python/Twisted server vert.x Java/vert.x server Work in progress: SockJS-ruby SockJS-netty SockJS-gevent (SockJS-gevent fork) pyramid-SockJS wildcloud-websockets SockJS-cyclone wai-SockJS SockJS-perl SockJS-go 转自:http://www.oschina.net/p/sockjs

龙生   26 Jul 2013
View Details

CSS 编码中超级有用的工具集合

当你开发网站和 Web 应用时,使用合适的工具可以节省大量的时间。本文我将收集一些非常有用的 CSS 编码工具,希望对你有帮助。 Pure CSS Pure 是来自雅虎的 CSS 框架,使用 Normalize.CSS 无需任何 JavaScript 代码。框架基于响应式设计,提供多种样式的组件,包括表格、表单、按钮、表、导航等。标识使用非常简单,整个框架非常轻量级,压缩后只有 5.7k。 主页: http://purecss.io/ CSS only responsive navigation 在今天响应式排版已经非常流行了,这里包含一些可下载和可重用的响应式导航菜单,只需要 CSS 足以。 主页: http://valdelama.com/css-responsive-navigation CSS Trashman 当我们在开发一个大项目时,很难让 CSS 代码保持短小精干,但无需担心,CSS Trashman 可以帮你不少忙。这是一个很有用的在线工具用来检测你的网站,压缩样式,并最终下载最精简的 CSS 文件。 主页: http://www.csstrashman.com/ Glue 加载大量的图片,还是将这些图片变成一张大图片一次性加载,当然是后者更好,降低浏览器和服务器的交互。这样的技术成为 CSS Sprites。Glue 是一个简单的命令行工具可以让你轻松的将图片合并到一张大突破,然后通过 CSS 来使用这些图片。 主页: https://github.com/jorgebastida/glue Helium CSS Helium 是一个前端响应式 Web 框架,用于使用 HTML5 + CSS3 快速制作原型以及开发产品。Helium 很像 Twitter Bootstrap 和 ZURB Foundation,事实上 Helium 使用了二者不少的代码。但与这两个框架不同的是,Helium 设计更加轻量级,而且更容易修改。Helium 只有30k 左右,而 Bootstrap 有 100k 之多,ZURB 有两百多k。 主页: https://github.com/geuis/helium-css Topcoat Topcoat 是一个 CSS 框架用于快速创建简单、简洁的 Web 应用。 主页: http://topcoat.io/ .Fitgrd .Fitgrd 是一个用来构建响应式网站的基础 主页: […]

龙生   17 Jul 2013
View Details

40 个内容图片旋转滑块和幻灯的 jQuery 插件

All Around – jQuery Content Slider / Carousel All in one Slider jQuery Banner Rotator / Content Slider Full Width Slider 2 Layer Slider (Must see parallax effects) Lush – Content Slider Parallax Slider – Responsive jQuery Plugin RoyalSlider – Touch-Enabled jQuery Image Gallery Showbiz Pro Responsive Teaser jQuery Slider Plugin Bubble Slideshow Effect with jQuery CIRCULAR CONTENT CAROUSEL WITH JQUERY FlexSlider Lateral On-Scroll Sliding with jQuery Responsive Image Gallery with Thumbnail Carousel Agile Carousel Awkward Showcase jQuery Plugin Coda Slider Effect Content Slider with jQuery UI Dynamic-Carousel […]

龙生   16 Jul 2013
View Details

20 个大大节省你时间的 HTML5 开发工具

Rendera 如果你希望有个环境可以测试、浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果。类似 RunJS。 Patternizer 从名字可看出该工具可以创建真正的调色板,包括各种线条和条文,可编辑线宽、颜色、角度和间隙,特别适合用来创建背景图片。 CanvasLoader Creator 通过这个工具可以定制你的加载器,创建更吸引眼球的访问体验,无需任何编码 On/Off Flipswitch HTML5/CSS3 Generator 用来创建各种滑动开关效果 Font Dragr 用来测试字体是否适合你的网页,只需拖放即可操作 Sprite Box It enables adding life in sprite images by adding them with HTML5, CSS3, or JavaScript codes. Sketch Toy 这是一个简单的工具,通过鼠标可轻松创建各种素描艺术效果 Adobe Edge Animate 用来创建兼容各种浏览器的动画效果 Initializr Initializr 提供模板化工具来快速创建 HTML 网站 HTML KickStart 同上,快速的网站创建工具,允许通过简单点击编辑按钮、列表、表格和排版 Adobe Typekit 该工具帮你选择合适的字体,并可进行实时效果预览 Webdirections Webdirections 可方便的测试、浏览和体验代码,通过简单的点击进行 HTML、CSS 的操作 Liveweave 另外一个类似 RunJS 的在线工具 MRI MRI 可以让你测试各种选择器 LimeJS LimeJS 是一个 JavaScript 游戏开发框架,允许开发者创建基于 HTML5 的游戏,支持主流浏览器包括iOS。 The HTML5 Test 用来测试浏览器对 HTML5 的支持程度 Moqups Moqups 是一款HTML5在线的WEB框架、模型、UI设计并创建的网络应用程序。 Stitches Stitches 是一个 […]

龙生   15 Jul 2013
View Details

再来 35 个响应式 HTML5 和 CSS3 模版

免费响应式模版 FlexApp Demo || Download zGallering – Free Responsive Html5 Theme Demo || Download Responsive HTML5/CSS3 template Demo || Download VividPhoto HTML5 and CSS3 Template Demo || Download ResponseEve HTML Template Demo || Download Brownie Responsive HTML5 Template Demo || Download Retina – Free Responsive HTML5 Template Demo || Download Digy Demo || Download Obscura – Free Responsive HTML Template Demo || Download ImCreative HTML5 Template Demo || Download Simple Responsive Template Demo || Download Keyners HTML5/CSS3 Responsive Template Demo || Download zParalexy – Free Responsive Html5 Theme […]

龙生   09 Jul 2013
View Details
1 47 48 49 60