首页

关于

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

日期:2011/12/20  来源:GBin1.com

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣 gbin1.com

我不得不承认,CSS非常棒,但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢?特别是当项目越来越大,代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式,那么对于CSS开发的人员来说。绝对是一个不省心的工作!

而当CSS编译器真正来到的时候,完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。

Time to keep it simple, no time for the stupid!

会议一下作为前台开发人员,你写过多少次这样的代码?

ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }

或许你也感叹过,我到底要写多少个ul li阿? 真是无用功!

没错,的确是!…

标签: HTML, CSS, Javascript, JQuery, Compass, CSS compiler, CSS tools, CSS工具, css编译工具, SASS, Mixins, GBin1.com

阅读更多

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

日期:2011/12/20  来源:GBin1.com

在这篇文章中,我们将分享一些实用的CSS/jQuery代码编写小窍门,小技巧和小花招。包括视觉特效,布局和web表单设计等。希望大家会喜欢!

相关文章:

1. 完美的全页面背景图片

这个技巧允许一个图片填满整个页面,没有任何的空域。图片会根据实际需要缩放并且改变自身尺寸,不产生任何的滚动条

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

2. 非常棒的CSS位置技巧

这里我们将有一个基本的无序list(ul),这个list包含有文字并不排列在其下方的左浮动图片。当然这个技巧也可以在加载其它实例时使用。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

3. 如何使用CSS来生成超大背景

这个教程使用各种CSS例子来演示如果使用单张或者多张推片来创建一个巨大的背景图片

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

4. 四个生成等高列的方法

这个文章讨论了几种能够兼容各种浏览器的创建等高列的实现方法(包括IE6)。所有的方法都教你如何生成一个3列的布局。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

标签: HTML, CSS, Javascript, JQuery, Web设计, jquery技巧, css技巧, 设计技巧

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

分享16个javascript&jQuery的MVC教程

日期:2011/12/19  来源:GBin1.com

2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢!

jQuery MVC

1. AJAX - Spring MVC 3和jQuery的整合

这个教程中我们将使用jQuery的AJAX机制开发一个简单的Spring MVC3应用。我们将介绍如何使用jQuery.post()方法来处理post数据

分享16个javascript&jQuery的MVC教程 by gbin1.com

2. Progressive Enhancement Techniques

如果你开发大量的javascript代码,你就应该考虑使用progressive enhancement模式来工作。基本流程是开发一个无js的基本功能 ,然后使用javascript来增进功能

分享16个javascript&jQuery的MVC教程 by gbin1.com

jQuery with ASP.NET MVC

3. Building Contact Us Form

这个教程中将教会你如何使用jQuery和ASP.NET来开发一个联系我们表单,使用progressive…

标签: HTML, CSS, Javascript, JQuery, JS MVC, javascript MVC框架, jquery MVC框架, MVC框架, MVC架构, MVC架构介绍

阅读更多

实例帮助你了解HTML5滑动区域选择元素Slider element

日期:2011/12/16  来源:GBin1.com

在线演示1  在线演示2  在线演示3

HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素,例如,选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间,但是现在只是如何将他们整合到浏览器中。

因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单,支持对于支持它的浏览器来说。

实例帮助你了解HTML5滑动区域选择元素Slider element

浏览器支持

除了著名的Firefox外所有的现代浏览器都支持这个元素,但是很容易使用html5slider.js来创建。当然IE也不支持区域选择输入,这个修改不太容易。这样的话,意味着你需要使用分开的类库类似jQuery UI来支持多浏览器。好消息在于如果浏览器不支持区域选择的话,它会做为一个输入框显示。

实例帮助你了解HTML5滑动区域选择元素Slider element

标签: HTML5, CSS, Javascript, JQuery, slider, range input, HTML5区域输入选择, 滑动选择, 最大值最小值选择输入

阅读更多

分享10个最好的jQuery表单插件

日期:2011/12/16  来源:GBin1.com

作为web设计或者开发者来说,表单是我们经常需要打交道的设计元素之一。不论你开发登陆功能,在线购物功能,或者是注册功能,你都需要使用表单来执行用户输入。但其实并不是很多开发人员都关心开发或者设计表单元素。而表单设计最重要的目的在于能够将表单设计超越它本身结构以达到使用体验及其可用体验的完美结合,因为表单是实现用户和服务器数据交换的重要方式之一。

今天我们将介绍10款我们收集的最棒表单插件,希望大家喜欢!

1. jQuery Form Wizard

jQuery Form 插件可以用来开发无需刷新的基于页面流程的表单设计。这个插件非常易用并且给予开发人员非常大的自由度来设置整个页面流程,并且这个插件还可以根据不同的输入内容来生成不同工作流程的表单。

分享10个最好的jQuery表单插件 gbin1.com

2. Formalize

帮助你在用户的操作环境中有效的控制表单元素而不用明显的修改表单外观,这个工具可以作为webkit版本的表单元素,非常适合开发兼容性界面。

分享10个最好的jQuery表单插件 gbin1.com

标签: HTML, CSS, Javascript, JQuery, form jquery plugin, 表单jquery, jquery表单插件

阅读更多

分享10款最棒的免费HTML5视频播放器

日期:2011/12/16  来源:GBin1.com

最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。HTML5可以在没有flash的情况下播放视频。现在有很多的漂亮HTML5视频播放界面,包括控制元素,所以你不需要其它的东西来播放视频。这里我们给大家介绍10款最好的免费HTML5播放器,希望大家能喜欢,支持我们,请给我们留言!

The Free HTML5 Video Player

一个免费的开源的使用javascript开发的HTML5播放器。解决了浏览器兼容性问题并且添加了很多非标准的强大功能。

分享10款最棒的免费HTML5视频播放器

VideoJS

videoJS是一个HTML5视频播放器,使用js和css开发,会自动使用一个fallback调用flash来播放视频一旦浏览器不支持HTML5视频

分享10款最棒的免费HTML5视频播放器 gbin1.com

SublimeVideo

一个HTML5的播放器,用户可以在缺少浏览器插件或者flash的情况下播放视频。支持window全屏模式

分享10款最棒的免费HTML5视频播放器 gbin1.com

标签: HTML, CSS, Javascript, JQuery, HTML5, html5 video, html5 video player, html5播放器

阅读更多

分享10个jQuery图片加载插件和教程及其生成器

日期:2011/12/15  来源:GBin1.com

几乎所有经常大量使用图片展示的网站都对针对图片加载执行了一些有效的优化步骤,然而,并不是任何情况都能指望这样做。有时候你的确需要加载非常大的图片,而最后结果往往是图片加载过慢导致页面本身没有加载完整。因此考虑使用一些不错的jQuery插件帮助你异步加载图片以优化页面加载速度往往是一个不错的选择!

Queryloader v2

Queryloader v2简单的扫描指定元素的图片,并且在网站显示之前加载相关图片。

分享10个jQuery图片加载插件和教程及其生成器 gbin1.com

JAIL

JAML是一个异步的图片加载的插件,这个插件非常小(压缩版本仅4Kb ),非常小但是很强大。非常适合去加载大尺寸的图片。优化用户使用体验,主要的实现方式是在页面加载后再加载图片。

分享10个jQuery图片加载插件和教程及其生成器 gbin1.com

Lazy load plugin for jQuery

Lazy load是一个jQuery的插件,帮助长页面延缓加载图片。当图片处于用户的viewport之外,先不加载,当用户滚动后,再加载相应的图片。

使用lazy…

标签: HTML, CSS, Javascript, JQuery, 加载中, jQuery lazy loading, lazy loading, ajax loading, 加载中的生成器

阅读更多

分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15  来源:GBin1.com

分享8个超棒的基于HTML5和jQuery的开发教程

HTML5和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网站。尤其是最近jQuery 1.0的发布,更助力了移动设备的开发。现在已经有很多的开发人员和设计人员开始使用HTML5和jQuery配合开发来显示各种特效。今天我们将给大家推荐8个精心选择的HTML5和jQuery组合开发的教程,希望对大家有帮助,如果你喜欢这些教程,请给我们留言,谢谢!

精选之英文教程

1.  HTML5和jQuery的灰度图片悬浮效果

在这个教程中,作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄金组合来动态的克隆颜色来实现灰度效果。整个显示非常炫。是学习HTML5 canvas的不错实战教程。

分享8个超棒的基于HTML5和jQuery的教程 gbin1.com

2. …

标签: HTML, CSS, Javascript, JQuery, HTML5, jQuery开发教程, html5开发教程

阅读更多

分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider 2.0

日期:2011/12/08  来源:GBin1.com

分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider 2.0 - gbin1.com

在线演示2D  在线演示3D   在线下载

 

在线演示(效果)  在线演示(多个)

 

前段时间我们介绍过一款jQuery的超酷幻灯效果插 件:NivoSlider。今天我们将给大家来带另外一个绝对震撼的jQuery实现的幻灯slider插件:Chop Slider。 这个插件拥有了192个不同的变化效果,绝对能够满足你不同的变换需要。而且支持很多2D和3D的特效。更重要的是它支持了非CSS3的效果,这样你可以 有足够的空间去开发一款所有浏览器都支持的幻灯效果。而且支持开发自定义的变化效果。这需要你自己开发。以下是主要特性:

  • 122个2D变换效果:这里有105个效果支持所有的浏览器,除了IE,在IE中的效果可能略有不同。不过总体来说还是很酷的。
  • 60个3D的变换效果:支持所有现代浏览器。支持:Chrome
  • 5个非CSS3的换效果:非常适合不支持CSS3的变化效果浏览器,例如,IE6-9(微软应该努努力了!)
  • 5个移动设备的变化效果:适合于移动设备上使用

标签: HTML, CSS, Javascript, JQuery, jQuery幻灯插件, jQuery幻灯特效, jQuery插件chopslider, chop slider, gbin1.com

阅读更多

分享10个超酷的jQuery动画教程

日期:2011/11/26  来源:GBin1.com

这里我们收集了10个你可能没有看过的最好的动画教程。有些非常简单但是效果非常棒,如果你想自己开发一些非常酷的应用,这些教程是你能找到的不错的资源之一。希望大家喜欢,如果你有更好的教程和资源,请你给我们留言

1. jQuery开发的令人印象深刻的动画风景标题

这是个卡通主题的风景,使用动画滑动显示隐藏的元素。下面的截图演示了页面动画效果

分享10个超酷的jQuery动画教程

在线演示

2. jQuery实现的冒烟效果

非常棒的一个动画冒烟效果

分享10个超酷的jQuery动画教程

在线演示

3. BBC Radio 1 Zoom Tabs

学习这个教程你可以明白如何开发一个BBC Radio缩放标签页效果,当鼠标滚动到图片区,标签页滑出,图片缩放了一些用来更好的显示图片。

分享10个超酷的jQuery动画教程

在线演示

4.  jQuery开发的动画机器人

这个项目通过使用PNG的背景图片来叠放几个空的div得以实现

分享10个超酷的jQuery动画教程

在线演示

5. 自动无限的旋转

在很多的网站上你都可以看到图片无限的自动移动效果。现在这个教程能教你如何开发这样的动画效果。

分享10个超酷的jQuery动画教程

标签: jQuery动画特效, jQuery动画教程, jQuery animation, HTML, CSS, Javascript, JQuery

阅读更多

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

日期:2011/11/16  来源:GBin1.com

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的web技术 HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了。在今天这篇文章中,我们 将介绍一些非常实用的教程,技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言!您的支持是我们的最好的动力!

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

表单类

jQuery的美化Checkbox

这个教程将帮助你构建一个非常动感的checkbox,用来替换缺省的checkbox,相信大家会喜欢更富有活力的UI界面

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Rethinking…

标签: HTML, HTML5, CSS, CSS3, Javascript, JQuery, 用户界面, UI, 用户体验, 提高用户体验, GBin1

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.