首页

关于

快速提升CSS编码能力的五个必备知识点

快速提升CSS编码能力的五个必备知识点

作为web开发人员,无论你是前端开发或者是后端开发,也无论你是新手还是大神,对于CSS的知识了解都是需要,在这篇文章中,我们将从五个不同的角度帮助大家快速的提升自己的CSS水平,如果你能够在以下五点有所突破的话,CSS的编码能力肯定会有一定的提升。

1. 了解CSS中的定位(position)

快速提升CSS编码能力的五个必备知识点

如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。

其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:

  • static
  • relative
  • absolute
  • inherit
  • fixed

以上五种定位你都需要了解,但是实际最常用的是relative和absolue。

2. 熟练的掌握float

快速提升CSS编码能力的五个必备知识点

当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear…

标签: css, css3, 编码, php

阅读更多

web开发中需要注意的一些编码习惯

web开发中需要注意的一些编码习惯

有过一定工作经验的朋友们,肯定对于项目开发中的coding标准非常熟悉,不同的团队或者项目,都有不太一样的编码习惯和指导文档。但是对于不同 的编码习惯,大家肯定都希望使用大体上统一的风格,简单来说会使得开发效率更高,阅读速度更快,在这篇文章中,我们将分享一些个人觉得比较有效的编码习惯 和最佳实践,如果你觉得有更多其它的经验,请和我们分享。

以下内容主要使用PHP做为例子,如果使用其它编程语言,编码基本类似,大家可以自己在项目中具体应用。

缩进问题 - Tab或者空格

最简单的问题,大家对于缩进使用的是tab或者space呢?

这个问题没有太多的必要去讨论,因为没有谁拥有完全正确的答案,但是最重要的一点,就是不要混用空格和tab,如果大家使用一些JS的校验工具,比如,jshint的话,你最常看到的问题就是

Mixed Tab and Space

个人推荐使用tab,因为不同的编辑器对于tab的解析也不太一样,如果你需要使用tab的话,可以考虑使用4个空格来代替。

类名称定义

为了在定义中避免重复,尽量使得定义包含一些前缀,并且使首字母大写,这样易于阅读,如下:

class…

标签: web开发, 编码设计, php, js, javascript

阅读更多

10个帮助你创建超棒jQuery插件的小技巧

日期:2012/02/29  来源:GBin1.com

10个帮助你创建超棒jQuery插件的小技巧

这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多不错的jQuery插件,但是对我们这些插件的使用者来说,很多jQuery插件的使用都不是那么直 接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说,如果你有一个非常好的架构,将会给你的开发带来极 大的益处。所以在正式开发前,进过深思熟虑还是非常有必要的。

1. 插件开发需要做到独立

这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作,如下:

$("#gbin1-container").wTooltip();

一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。…

标签: queness, kevin liew, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

10个CSS和jQuery的加载中(loading)动画效果实现

日期:2012/02/28  来源:GBin1.com

以往web开发中都使用Gif来实现加载中的效果,但是随着技术的发展我们也可以使用jQuery和CSS来实现加载中的效果,希望大家喜欢!

相关文章:

5个在线Ajax"加载中"旋转图标生成器工具

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

1. Sonic - Looping Loaders

一个非常小的JS class,你可以用来创建个性化的加载中动画。非常适合循环的动画。

10个CSS和jQuery的加载中(loading)动画效果实现

2. Bouncy Animated Loading Animation

使用CSS3实现的加载中动画

10个CSS和jQuery的加载中(loading)动画效果实现

3. CSS3 Loading Spinners without Images

CSS变化(firefox3.5和webkit类的浏览器)拥有很多的有趣功能,旋转,过渡和缩放等

10个CSS和jQuery的加载中(loading)动画效果实现

4. Ajax Style Loading Animation in CSS3 (no Images)

加载中是网站开发中非常重要的元素,但是加载图片需要时间,因此这里使用CSS来开发加载中。

10个CSS和jQuery的加载中(loading)动画效果实现

5.…

标签: loading, jquery, css3, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

不容错过的超棒Javascript日期处理类库-Moment.js

日期:2012/02/20  来源:GBin1.com

不容错过的超棒Javascript日期处理类库-Moment.js

moment.js是一个轻量级并且健壮的js日期处理类库,相信大家在javascript开发过程中,都自己动手写过,或者使用google和百度搜索过相关的实现函数。使用这个类库,可以帮助你有效的处理相关日期。希望大家喜欢!

主要特性:

  • 3.2kb超轻量级
  • 独立类库,意味这你不需要倒入一堆js
  • 日期处理支持UNIX 时间戳,String,指定格式的Date
  • 日期处理:加,减日期
  • 日期显示:包括相对时间显示的日期显示选项
  • 其它内建的功能,例如,保存,timezone offset和i18n支持
  • 可以作为node.js的一个模块
  • 完整的文档介绍

如何使用?

var now = moment(); 
console.log(now.format('dddd, MMMM Do YYYY, h:mm:ss a'));
var halloween = moment([2011, 9, 31]); //…

标签: moment.js, 日期类库, js日期类库, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

分享8个让你绝对印象深刻的具有超酷特殊过渡效果的jQuery幻灯插件

日期:2012/02/20  来源:GBin1.com

曾经大家都使用flash来构建动态的幻灯效果,不过随着HTML5和CSS3的发展,越来越多的网站使用jQuery,CSS3和HTML5的黄金组合来构建漂亮的幻灯效果。今天我们介绍8个具有超棒的过渡效果的jQuery幻灯插件,可能有一些需要你拥有最新的现代浏览器,否则你看不到任何效果,希望大家能在项目或者网站设计中使用到!大家一定会喜欢的!

Skitter

分享8个让你绝对印象深刻的具有超酷特殊过渡效果的jQuery幻灯插件

支持过渡效果: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight,…

标签: slider, jquery plugin, jquery幻灯插件, jquery插件, 超棒jquery幻灯特效, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

分享一款超强的辅助标签(Tag)输入及其提供自动补齐功能(autocomplete)的jQuery插件 - jQuery TextExt

日期:2012/02/09  来源:GBin1.com

分享一款超强的辅助标签(Tag)输入及其提供自动补齐功能(autocomplete)的jQuery插件 - jQuery TextExt

在线演示  本地下载

今天我们将介绍一款非常不错的标签输入相关的jQuery插件 - jQuery TextExt,这个插件能够有效的帮助你快速添加标签,并且提供相关的强大的辅助功能,帮助你有效的输入,自动补齐提示及其提供AJAX支持。个人觉得非常不错,符合大多数情况下网站中使用标签的方式和习惯,个人感觉基本上很多网站的标签功能,都是为了实现标签功能而强行添加的标签功能,典型的从众心理,使用生硬,并且没有任何所谓的使用体验。

Javascript

$('#tags').textext({ plugins : 'tags autocomplete' })
.bind('getSuggestions', function(e, data)
{
var list = [
'Basic',
'Closure',
'Cobol',
'Delphi',
'Erlang',
'Fortran',

标签: gbin1, terry, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress, jquery plugin, jquery插件, TextExt

阅读更多

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

日期:2012/02/08  来源:GBin1.com

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

在线演示  本地下载

今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作,希望大家喜欢!

主要特性:

  • 独立类库,当然也可以和其它类库组合使用,例如,jQuery
  • 字母或者字母组合绑定
  • 支持Callback回调
  • 多语言支持
  • 支持AMD加载,例如 RequireJS
  • 文档完整

Javascript:

$(document).ready(function(){ 
var gbin1 = ['g', 'b', 'i', 'n', '1'],
google = ['g', 'o', 'o', 'g', 'l', 'e'],
baidu = ['b', 'a', 'i', 'd', 'u'],
kI = 0;
document.addEventListener('keydown', function(){

标签: gbin1, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress, javascript类库, js类库, keyboard.js

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.