W3CPlus

CSS3和jQuery制作翻转表单

作者: Airen

发布日期: 2月20,12

点击量: 159

css3

CSS3中的Transform应用可以说比较广泛了，但其中的3D Transforms去年就听说了，但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-f...

阅读全文
CSS制作图形速查表

作者: Airen

发布日期: 2月18,12

点击量: 130

css

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“displ...

阅读全文
Google Plus UI Button制作

作者: Airen

发布日期: 2月15,12

点击量: 218

css3

Google+的“button”效果一直都吸引了我，早就想亲手去体会一下这样的感觉，但一直给自己找借口，直到最近几天，终于动手一试了，试后才知道，他们做的真NB。Google+的UI Buttons形成了一个制作“按钮”、“图标按钮”、“带有标签的图标按钮”、“下拉按钮”...

阅读全文
CSS制作Facebook的媒体对象

作者: Airen

发布日期: 2月13,12

点击量: 129

css

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：我们把上图拆分细化一下，可以划成下图的样子：根据上图我们就可以轻松的写出需要的HTML结构。H...

阅读全文
jQuery制作Facebook Timeline

作者: Airen

发布日期: 2月12,12

点击量: 262

jquery

不知道大家有没有经常观注Facebook，不过我是经常观注他，时时了解他的Web页面的设计与变化，因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。这一变化把我吸引了，仔细看了他们的源代码，但不懂js的我来说，实现风...

阅读全文
CSS3伪元素应用——CSS3 Button

作者: Airen

发布日期: 2月10,12

点击量: 168

css3

有关于CSS3制作buttons，本站前面介绍了多个案例：CSS3 Gradient ButtonsCSS3和HTML实体符制作带图片效果的ButtonsLESS和CSS3动态制作按钮CSS3 Buttons框架当然，除了上面的制作方法以外网上还有大把的制作方法，比如说w...

阅读全文
CSS3制作动画加载页面

作者: Airen

发布日期: 2月10,12

点击量: 184

css3

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的，我简单的说一下吧，这种效果就是浏览器加载你的页面时，给页面的内容赋予一个动画效果，让他不在那么生硬。最早看过这种效果是小志的Blog首页。今天特意看了一下志哥的写的代码，才知道实...

阅读全文
jQuery制作Web全屏效果

作者: Airen

发布日期: 2月08,12

点击量: 277

jquery

记得有一次群里在讨论，有没有办法让页面做成全屏效果，就如在Firefox浏览器上按“全屏”选项，让整个页面满屏显示。当时感觉有点不可思议，可是今天在Tutorialzine.com看到一份教程《Enhance Your Website with the FullScree...

阅读全文
CSS3制作Breadcrumbs

作者: Airen

发布日期: 2月05,12

点击量: 281

css3

“Breadcrumb”直译过来就是“面包屑”的意思（后面我直接说“breadcrumb”）。那么Breadcrumb是什么东东呢？我也不想对他进行详细的描述，大家直接看下面的截图，比我说的要更清楚：上图次导航的效果，我想大家在制作Web的时候肯定有碰到，一些简单的效果当...

阅读全文
CSS3制作留言墙

作者: Airen

发布日期: 2月02,12

点击量: 249

css3

放假期间一直在家陪儿子玩，好久没有动手更新W3CPLUS了，今天刚好有时间学习了一下CSS3制作的留言墙。说白点就是像便签纸一样的效果，只是贴在墙上，当然大家也可以想像成贴在别的地方，具体什么地方我就不多啰嗦了，直奔主题。目标今天我们的目标很明确，也先清楚，就是使用css...

阅读全文
CSS3制作日历

作者: Airen

发布日期: 1月20,12

点击量: 395

css3

前面使用了CSS3制作过Progress Bars、分页导航、Login栏、Search Box等等。今天一起和大家使用css3来制作一个日历效果，希望大家喜欢。目标今天我们的目标是制作如下面DEMO显示的一个日历效果：HTML Markup先来看看其结构：...

阅读全文
CSS3 Filter的十种特效

作者: Airen

发布日期: 1月09,12

点击量: 873

css3

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧：我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果...

阅读全文
Google Font的运用

作者: Airen

发布日期: 1月08,12

点击量: 489

css

网页的字体的使用，大家都清楚，有时一些特殊字体只能使用图片来代替，因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题，前面本站推出CSS3的@font-face来实现一些特殊字体的效果。效果是作出来了，但性能大家又说，加载文件太大，直接影响了网站...

阅读全文
10个实用的CSS3技巧

作者: Airen

发布日期: 1月07,12

点击量: 745

css3

CSS3的运用是越来越成熟了，在QQ群时常能看到朋友讨论这方面的技术，我也学习CSS3的相关技术也有一年之久了，收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享，我今天特意将本站的有关于CSS3的运用罗列一下，并列出10个常用的相关属性，最后在...

阅读全文
jQuery和CSS3制作回到页面顶部和底部

作者: Airen

发布日期: 1月06,12

点击量: 352

jquery

当一个页面的篇幅太长时，用户的检验就有点烦，特别是当用户要到页面的底部或顶部时，只靠scrollBar来操作的确不爽，我有时也烦。当然，W3cplus也有这样的不足之处，好多朋友都有提过，于是在第二版本中我加了一个回到顶部的效果，但不知道怎么加回到底的效果。因为自己的jQ...

阅读全文
纯CSS3制作满屏图像幻灯片

作者: Airen

发布日期: 1月04,12

点击量: 501

css3

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法，其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen B...

阅读全文
网站设计的黄金比例应用

作者: Airen

发布日期: 1月03,12

点击量: 468

css

记得以前读书时有一个黄金分隔线，今天在网站上看到一些有关于这个黄金比例在Web设计中的应用，觉得很有意思，于是在GG中寻找了这方面的相关资料学习了一回。个人觉得有必要了解一下，如果你对这个也感兴趣的话，不仿跟着我一起往下阅读。Phi (Φ)所指的是黄金分割比例，说得简单点...

阅读全文
十步图解CSS的position

作者: Airen

发布日期: 12月30,11

点击量: 735

css

CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“...

阅读全文
表单button的outline问题

作者: Airen

发布日期: 12月28,11

点击量: 411

css

outline的使用，大家都喜欢在reset样式表中直接重置： * { outline: none; } Eric Meyers在他的CSS Reset是这样重置的： /* remember to define foc...

阅读全文
表单button的text-indent问题

作者: Airen

发布日期: 12月23,11

点击量: 539

css

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”（包括input[type="submit"]/input[type="reset"]/button）行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“but...

阅读全文
表单button的行高问题

作者: Airen

发布日期: 12月22,11

点击量: 648

css

昨天下午为之给我发了一个有关于button的line-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多，顺便整理了一下，与大家一起知道这个问题。下面我们先来看一个Demo的实例：HTML Cod...

阅读全文
Responsive设计的关键三步

作者: Airen

发布日期: 12月15,11

点击量: 414

css3

最近一直在学习这个Responsive设计相关知识点，前面我在本站陆续发布了与“Responsive”设计的相关教程：《CSS3 Media Queries》《CSS3 Media Queries案例——Hicksdesign》《CSS3 Media Queries案例—...

阅读全文
CSS3制作 Progress Bars

作者: Airen

发布日期: 12月08,11

点击量: 632

css3

Progress Bar直译过来就是“进度条”，也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过，而且还随处可见，他们表示的是某个过程，显示目前完成状态。最常见的是文件的上传和下载，有一个动态的进度条，通过这个进度可的动态变化告诉我们文件上传或下载的完...

阅读全文
CSS选择器的优化

作者: Airen

发布日期: 12月07,11

点击量: 1,252

css

前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS基本选择器、CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣...

阅读全文
了解Responsive网页设计的三个特性

作者: Airen

发布日期: 12月05,11

点击量: 445

css3

Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上，他将是一个最受欢迎的网页设计概念，因为随着网站用户日渐多样化的访问方法，比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。...

阅读全文
CSS3制作共享工具栏

作者: Airen

发布日期: 12月04,11

点击量: 459

css3

今天使用CSS3的伪类“:before”和":after"和animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是，我使用最少的HTML标签，以及不使用任何jQuery和javaScript脚本。但兼容性就惨了，这个大家都懂的。所以下面的效果只适合Fi...

阅读全文
Responsive设计和CSS3 Media Queries的结合

作者: Airen

发布日期: 12月02,11

点击量: 778

css3

Responsive这个词，这段时间公司老是在提，致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来，也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Quer...

阅读全文
CSS的Float之二

作者: Airen

发布日期: 12月01,11

点击量: 746

css

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”大家都了解到, CSS 网页布局的原理,就是按照(X)HTML 代码中对象声明的顺序,以流布局...

阅读全文
20个实用的CSS技巧代码

作者: Airen

发布日期: 11月27,11

点击量: 750

css

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大...

阅读全文
Box-shadow常被遗忘的一个参数——“spread”

作者: Airen

发布日期: 11月26,11

点击量: 660

css3

早前在《CSS3 box-shadow》一文中详细介绍了Box-shadow的使用。他可以让我们轻松的实现盒子阴影效果，多个站点都有这方面的介绍，比如说：peterkroener.de、dev.opera.com、viget.com，本站中的《CSS3 制作Drop Sh...

阅读全文
CSS的Float之一

作者: Airen

发布日期: 11月23,11

点击量: 1,018

css

Float在CSS中是一个重中之重的东西，因为他是一个强大的，极有作用的一个CSS属性，但如果你没有理解透这个Float的话，那将是一个难搞的事情，特别是对于初学者来说，更是一个棘手事情。那么从今天开始我们一起来探讨这个Float。刚才说过了，Float是一个极有用的属性...

阅读全文
纯CSS制作缩略图片

作者: Airen

发布日期: 11月21,11

点击量: 920

css

在这篇教程中，主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用，那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于，我们不需要去切图片，而只要使用CSS代码，能帮我们在页面中显示我们需要...

阅读全文
CSS3制作的分页导航

作者: Airen

发布日期: 11月21,11

点击量: 917

css3

W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作，像是图片一样。前面都是随便说了一下制作的过程，为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。目标今天我们主要的目的是使用CSS3等相关...

阅读全文
十种图片替换文本CSS方法

作者: Airen

发布日期: 11月21,11

点击量: 959

css

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。制作原理：使用图片替换文本，其原理是相当的简单：...

阅读全文
完美的页面背景图片制作

作者: Airen

发布日期: 11月20,11

点击量: 850

css

随着现在的大显屏越来越多，实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图，而且让他适应任显屏的大小。听起来好...

阅读全文
如何解决浮动元素周围环绕文字

作者: Airen

发布日期: 11月18,11

点击量: 544

css

大家在Web页面制作中时常有碰到浮动元素被周围的文环绕的现像，这种现像时常发生在当浮动元素周围的内容高度大小于浮动元素的本身高度时，其内容就会环绕浮动元素，如下图所示：可是我们时常需要的不是这种效果，而以需要达到下图所示的效果：那么要实现上图所展示的效果其实并不是件很复杂...

阅读全文
Facebook 中Tooltip的HTML和CSS

作者: Airen

发布日期: 11月17,11

点击量: 857

css

我一直在扣facebook前端代码，今天扣了一段有关于Tooltip的HTML和CSS。Tooltips的制作方法很多，但主要是我认为他的tooltip很轻巧，很优雅：下面把这个tooltips的HTML和CSS代码贴上来与大家分享：HTML Markup上图这个Tool...

阅读全文
CSS3 Buttons框架

作者: Airen

发布日期: 11月15,11

点击量: 561

css3

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法，在《CSS3 Gradient Buttons》一文中第一使用CSS3的Gradient、Border-radius、box-shadow等属性制作了Buttons。接着在《CSS...

阅读全文
jQuery和CSS3制作Popup弹出窗

作者: Airen

发布日期: 11月14,11

点击量: 684

jquery

Popup弹出窗，时常有碰到，以前都只是写Popup的样式，从没有涉及jQuery怎么实现。今天看到一个教程有关于这方面的制作，认真学习了一下。事后仔细一想，用jQuery来制作还是可以看懂的，现将代码稍加整理放上站上，以备今后可以使用，因为记性不好，所以这个懒就偷不了。...

阅读全文
如何用CSS实现大背景样式

作者: Airen

发布日期: 11月14,11

点击量: 1,076

css

Web页面的大背景制作有时的确烦人，今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下，特意整理一下贴上来与大家分享。web designer wall在80 Large B...

阅读全文
美化表单——自定义checkbox和radio样式

作者: Airen

发布日期: 11月13,11

点击量: 1,411

css

如果你对本站比较观注的话，应该很清楚，前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的，所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了，比如说：美化表单——自定义单选按钮和复选按钮自定义表单——美化你的文件载入框自...

阅读全文
让你的CSS更尽完美的技巧

作者: Airen

发布日期: 11月12,11

点击量: 725

css

CSS要学会并不是一件难事，但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕，如果你遵循一定的方法，还是很容易写出一个较好的CSS，也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧，希望能帮助大家写出一个更好的CSS样式。一、不要使用全...

阅读全文
美化表单——自定义单选按钮和复选按钮

作者: Airen

发布日期: 11月12,11

点击量: 948

css

大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片...

阅读全文
玩转CSS3的颜色

作者: Airen

发布日期: 11月12,11

点击量: 513

css3

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》，在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上，我们给CSS设置颜色一般都是十六进制和rgb格式，比如“#abcdef”，而使用相对应的RGB应该就是“brg(171，205，239)”。C...

阅读全文
自定义表单——美化你的文件载入框

作者: Airen

发布日期: 11月11,11

点击量: 595

css

表单的制作常常给我们带来无比的烦恼，比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类，我们都无法直接通过样式来达到设计的设计要求，如果为了实现设计的设计的优美效果...

阅读全文
11个让你代码整洁的原则

作者: Airen

发布日期: 11月11,11

点击量: 989

html

写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗？我们...

阅读全文
CSS布局——左定宽度右自适应宽度并且等高布局

作者: Airen

发布日期: 11月10,11

点击量: 849

css

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（...

阅读全文
十个CSS小技巧

作者: Airen

发布日期: 11月09,11

点击量: 949

css

最近一直在整理一些CSS的知识，稍加整理放上来与大家分享，希望对有需要的朋友有所帮助，别的不说，感兴趣的就接着往下看吧：一、默认边框植通常我们写一个元素的border属性会这样的写： border: border-width border-style border-...

阅读全文
12个真正有用的CSS3技巧

作者: Airen

发布日期: 11月09,11

点击量: 842

css3

CSS3的出现无疑是一个强大的新东西，我现在在一些Web项目中开始在使用，很方便，同也很高兴能开始使用这一种新的技术。其先进的功能，给我们Web的页面制作真的带来极大的方便，比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用，来帮助大家一起学习CSS3的...

阅读全文
CSS布局——960gs

作者: Airen

发布日期: 11月08,11

点击量: 1,533

css

说起CSS的布局，有太多了，现在常见的有固定布局、流体布局、弹性布局，有关于这三种常见的布局，Kayla Knight在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的...

阅读全文
15个CSS技巧和窍门

作者: Airen

发布日期: 11月07,11

点击量: 733

css

前面我也发了几节内容收集了一些CSS的小技巧，比如说《20个CSS实战技巧》、《7个不能遗忘的CSS样式》和《13个CSS技巧》等，今天我又搜集了15个CSS的小技巧和窍门，或许和前面的部分有累同，但希望这些小技巧能帮您在平时的工作中带来些许的帮助。一、避免CSS Hac...

阅读全文
八个制作Linking（链接）的技巧

作者: Airen

发布日期: 11月07,11

点击量: 973

css

“链接”对于一个Web制作人员来说一点都不会陌生，我们在来时的制作中，我们碰到过的“链接”有很多种，比如说文字链接、图片链接，有时甚至是图片和文字的混合链接。而这些链接是Web页面中最佳功能之一，那如何让你的链接在Web页面中尽可能的方便使用，有些就需要一些小技巧来帮助你...

阅读全文
CSS3制作Login栏

作者: Airen

发布日期: 11月03,11

点击量: 692

css3

今天在这篇教程中主要想和大家一起探讨一下登录和注册表单的制作方法，具体如何制作一个表单，我在此就不多说了，我主要想说的是如何使用CSS3的相关属性来制作一个美丽而有简洁的表单风格。这篇教程的思路主要来自于Red大师的两篇博文《Simple and effective dr...

阅读全文
CSS3制作超酷的SearchBox

作者: Airen

发布日期: 10月27,11

点击量: 901

css3

制作Search Box的效果，我想大家都有亲身的体会了，同时我可以十分肯定，制作下面展示的效果，十有八九都是使用图片来实现。那么今天在这个教程中，您将和我一起见证一件事情——如何使用HTML5的占位符（placeholder）属性和CSS3来创建一个超酷而又实用的搜索框...

阅读全文
CSS3的REM设置字体大小

作者: Airen

发布日期: 10月27,11

点击量: 620

css3

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EMS优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同...

阅读全文
CSS中强大的EM

作者: Airen

发布日期: 10月27,11

点击量: 930

css

使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起...

阅读全文
CSS3制作Apple官网的Seach Box效果

作者: Airen

发布日期: 10月26,11

点击量: 843

css3

今天的教程我们是使用CSS3来制作一个Seach Box效果，这种效果的灵感来自于Apple的官网。当您的鼠标点击了Search Box或者说当Search Box获得焦点时，Search Box会慢慢的变长。这种动画效果实现都只使用了CSS3的transition属性完...

阅读全文
CSS3制作边栏菜单

作者: Airen

发布日期: 10月26,11

点击量: 486

css3

今天这个教程，主要使用CSS3来制作一个边栏菜单，在这个教程中，我主要使用了CSS3的多个属性，比如说：CSS3 选择器——伪类选择器中的“:before”和“:after”制作ribbon效果，并配合CSS3的Gradient、RGBA、Border-radius、Bo...

阅读全文
CSS3的Animation制作蝴蝶飞舞

作者: Airen

发布日期: 10月20,11

点击量: 837

css3

上周六参加WebReBuild的上海站活动时，@点头猪分享的《渐近增强——基于CSS3的浏览器分级策略》，里面有一个使用CSS3的Animation制作的蝴蝶飞舞的效果特别吸引人。特决定回来尝试一下，但制作出来的效果总是有不同之处，后来经@点头猪的指点和代码分享，终于整明...

阅读全文
Animate.css

作者: Airen

发布日期: 10月17,11

点击量: 712

css3

Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，你可以直接使用到您的项目中。要在你的项目中使用，...

阅读全文
20个CSS实战技巧

作者: Airen

发布日期: 10月17,11

点击量: 932

css

前面我在《13个CSS技巧》和《7个不能遗忘的CSS样式》收集了一些实用的CSS技巧，主要是用来处理一些CSS的样式。今天在这篇教程，我依旧收集和整理了一些CSS技巧，其中有一些技巧大家可能已经使用过了，有些可能大家在实际项目中并碰到，另外有一些技巧我也在以前的教程中有单...

阅读全文
纯CSS制作的图形效果

作者: Airen

发布日期: 10月14,11

点击量: 1,473

css

今天这个教程中主要和大家一起来探讨和学习：如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形，今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。最早发现...

阅读全文
13个CSS技巧

作者: Airen

发布日期: 10月14,11

点击量: 656

css

大家说CSS很简单，三下五除二就能把CSS拿下，初学时，我也是这么认为的，也是这样给我很大的信心从事这一行，但后面随着相关知识面的提高，我越来越感觉CSS是蛮深的东西，而且越来越觉得自己掌握的CSS还是很薄弱。从而决心要先把CSS这座山头攻下来。大家平时在Web制作中碰到...

阅读全文
7个不能遗忘的CSS样式

作者: Airen

发布日期: 10月14,11

点击量: 678

css

今天要给大家介绍七个CSS样式片段，我认为这几个片段对我们项目的制作帮助还是蛮大的，如果你认真看完这篇教程后，我想你会喜欢这几个CSS样式，而且我相信你会马上运用到你即将要制作的下一个项目中，或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家，这个几CSS样...

阅读全文
jQuery制作Tabs

作者: Airen

发布日期: 10月14,11

点击量: 1,397

jquery

Tabs的效果在Web页面制作中，可以说是随处可见，我也知道有关于这样的教程在网上上相当的多，前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs，而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依...

阅读全文
CSS3美化表格

作者: Airen

发布日期: 10月10,11

点击量: 658

css3

在Web页面开发中，自从有了<div>的出现，大家就在讨论table。就出现了什么时候？如何使用div，什么时候？如何使用table的争论。虽然争论不少，但最后得出的结论是一致的：当你需要在页面中处理与数据时，table是首选之一。制作一个表格容易，但是要设计...

阅读全文
CSS3实现11种经典的CSS技术

作者: Airen

发布日期: 10月09,11

点击量: 768

css3

在CSS2中，我们为了达到一定的设计效果，时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际，我们不应该只局限于这些老技术，我们应该大胆的去尝试一些新技术。今天我们就跟随Ｎettuts的Vasili的教程《11 Classic...

阅读全文
jQuery Plugin: Easy Accordion

作者: Airen

发布日期: 10月08,11

点击量: 608

jquery

学习jQuery有一段时间了，进展甚慢。这段时间反复在学习手风琴的制作，从纯CSS的制作到jQuery的制作，在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如：纯CSS制作——《CSS3制作垂直手风琴》纯CSS制作——《CSS3制作手风琴——CSS3...

阅读全文
CSS3制作图片样式

作者: Airen

发布日期: 10月07,11

点击量: 535

css3

在《jQuery和CSS3给图片制作圆角》一文中说过了，当你在Web页面制作中如果你直接把CSS3中的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，...

阅读全文
CSS3制作手风琴——CSS3 :target的应用

作者: Airen

发布日期: 10月04,11

点击量: 1,113

css3

前一回我在《CSS3制作垂直手风琴》介绍了使用“:hover”来制作手风琴效果。今天，你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前，我们一起来简单的了解一下这个“:target”。CSS3 target伪类的简介C...

阅读全文
CSS3制作垂直手风琴

作者: Airen

发布日期: 10月04,11

点击量: 1,149

css3

说起手风琴的制作，大家肯定首选就是使用jQuery来制作，我在《如何使用jQuery制作手风琴效果》也简单的介绍了使用jQuery制作手风琴效果。但今天我在Saud Khan的《Cross Browser Pure CSS3 Vertical Accordion》中学习了...

阅读全文
CSS3 Ribbons

作者: Airen

发布日期: 10月03,11

点击量: 537

css3

随着Web技术的日新月异，以前一些3D立体效果仅依靠图片来实现，现在我们可以只使用CSS和HTML来实现。今天我们一起来看仅使用CSS3和一些简单的HTML来制作一种“Ribbon”效果，这种效果思路来源于Piervincenzo Madeo介绍使用纯CSS写的“Ribb...

阅读全文
jQuery制作水平手风琴

作者: Airen

发布日期: 10月03,11

点击量: 729

jquery

上回在《如何使用jQuery制作手风琴效果》一文中介绍了使用jQuery制作垂直手风琴效果，今天我们一起在来看一个水平手风琴效果，如下图所示：在这个例子中，我创建了一个水平手风琴效果，用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。HTML...

阅读全文
使用jQuery和CSS控制元素对齐

作者: Airen

发布日期: 10月02,11

点击量: 711

jquery

上节在《自定义表单——jQuery制作个性化Checkbox》介绍了用jQuery美化表单中的checkbox。今天和大家一起探讨另一个表单制作中的对齐问题，这个我想大家在平时制作表单之时，关于对齐一定有碰到过，那么在这个简短的教程中主要尝试另一种解决方法，希望大家会喜欢...

阅读全文
自定义表单——jQuery制作个性化Checkbox

作者: Airen

发布日期: 10月01,11

点击量: 994

jquery

要让表单中的元素具有个性化风格，仅仅通过样式来实现是相当困难的，大家都很清楚，每种内核的浏览器、每种系统平台下对form元素解析的风格都是不一致的。如果你想让form元素在各种平台或者说各种浏览器具有统一的样式风格，仅仅通过CSS来制作是很难达到统一的标准，但实现他也并不...

阅读全文
CSS3 制作Drop Shadow效果

作者: Airen

发布日期: 9月30,11

点击量: 653

css3

在介绍CSS3系列时，我花了一篇很长的篇幅专门介绍了CSS3的box-shadow属性以及其具体的使用等。在此文末尾还介绍了使用box-shadow配合CSS3的伪类中的“:before”和“:after”制作Box Drop Shadow效果的实例。随着CSS3和HTM...

阅读全文
CSS3 Tips

作者: Airen

发布日期: 9月29,11

点击量: 523

css3

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。大家都知道，有时我们在web的页面制作中，需要使用另外的方法来解说其中的一个词或一张图片等，那么我们把这种称作为tips。那什么为要使用tips呢？很好回答...

阅读全文
如何使用jQuery制作手风琴效果

作者: Airen

发布日期: 9月28,11

点击量: 1,054

jquery

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与...

阅读全文
纯CSS3制作Tabs选项卡

作者: Airen

发布日期: 9月27,11

点击量: 674

css3

Tabs选项卡对于Web前端攻城师来说并不陌生，也制作了不少，我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯...

阅读全文
CSS3+jQuery制作切角的Tabs

作者: Airen

发布日期: 9月27,11

点击量: 549

css3

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文，介绍了使用CSS3制作切角的Tabs，觉得特有意思。其中含量最高的并不是其如何实现的Tabs，而是其中如何使用CSS3来制作切角效果，如：随着Web技术的日新月异，CSS3的技术也...

阅读全文
如何使用jQuery制作展开和折叠切换面板

作者: Airen

发布日期: 9月27,11

点击量: 1,026

jquery

在这节中，我们主要来学习如何使用jQuery的.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时，与其相对应的相邻的主内容将会显示，当你在次点击此标题时，其对应的主内容又将会折叠起来。如下图所示：实现上面的效果，对于jQuery来说是一件非常容易的...

阅读全文
jQuery制作多级导航菜单

作者: Airen

发布日期: 9月26,11

点击量: 1,064

jquery

前面在《jQuery+Superfish制作下拉菜单》中介绍了使用jQuery和Joel Birch写的Superfish插件制作下拉导航菜单。使用起来是方便，而且还可以制作出不同的导航，功能强大，但有时我们只是需要做一个多级导航菜单，没有必要使用插件来制作。假使我们不需...

阅读全文
jQuery制作随机变色

作者: Airen

发布日期: 9月25,11

点击量: 797

jquery

大家都知道，我们可以通过:hover来改变元素悬停状态下的相关参数，特别是元素的色彩，但:hover在现代浏览器上实现是没有问题，可在IE6下就只能适用在<a>元素上，其他元素就无法正常显示（具体可以看《浏览器兼容之旅的第四站:IE常见Bug——part2》）...

阅读全文
jQuery制作平滑动画菜单

作者: Airen

发布日期: 9月25,11

点击量: 701

jquery

最近在学习jQuery的相关知识点，今天在buildinternet.com看到一篇由Zach Dunn执笔介绍的《How to Make a Smooth Animated Menu with jQuery》，此文主要介绍如何用jQuery制作平滑的动画菜单。觉得效果蛮...

阅读全文
浏览器兼容之旅的第五站:IE常见Bug——part3

作者: Airen

发布日期: 9月23,11

点击量: 1,197

css

有关于IE的Bug系列，我们前面一共介绍了四个部分：创建IE条件样式——《浏览器兼容之旅的第一站:如何创建条件样式》；浏览器各种Hack写法——《浏览器兼容之旅的第二站:各浏览器的Hack写法》；IE下十个经典Bug——《浏览器兼容之旅的第三站:IE常见Bug——part...

阅读全文
jQuery+Superfish制作下拉菜单

作者: Airen

发布日期: 9月21,11

点击量: 1,144

jquery

最早接触Superfish还是整Drupal时的下拉菜单，那时只知道Superfish是Drupal的一个Module，用来制作类似下图的菜单：直到今天才知道Superfish是Joel Birch写的一个用来制作下拉菜单的jQuery插件。发现用Superfish来制作...

阅读全文
浏览器兼容之旅的第四站:IE常见Bug——part2

作者: Airen

发布日期: 9月21,11

点击量: 1,694

css

《浏览器兼容之旅的第三站:IE常见Bug——part1》中介绍了IE浏览器下十种经典的Bug产生的原因，以及如何在写代码中避免这些Bug的产生，或者说Bug发生后，又如何来解决这些Bug。这节我们接着来看IE下的相关Bug。尽量了解并掌握他们，只有知已知彼才能百战百胜。因...

阅读全文
浏览器兼容之旅的第三站:IE常见Bug——part1

作者: Airen

发布日期: 9月20,11

点击量: 2,745

css

Internet Explorer——前端攻城师的的恶梦，十个有九个前端人员都认为他为祸人间不浅，本应早点灭掉他，可是上天有好生之德，因而没有灭之，在此情况下，前端的攻程师们将就将就过吧。前面在《浏览器兼容之旅的第一站:如何创建条件样式》和《浏览器兼容之旅的第二站:各浏览...

阅读全文
浏览器兼容之旅的第二站:各浏览器的Hack写法

作者: Airen

发布日期: 9月19,11

点击量: 1,741

css

前面一节《浏览器兼容之旅的第一站:如何创建条件样式》和大家一起探讨了如何创建条件样式，了解和学习了创建IE条件样式的方法以及他们所起的作用，特别是知道了条件注释所起的作用。。那么这一节将和大家一起学习：浏览器兼容之旅的第二站:各浏览器的Hack写法虽然和大家在一起学习各浏...

阅读全文
浏览器兼容之旅的第一站:如何创建条件样式

作者: Airen

发布日期: 9月19,11

点击量: 1,286

css

IE对于大家来说一定很熟悉了，作为一名Web前端开发人员或者是说前端攻程师来说，浏览器的兼容问题一定处理过不少了，特别是IE6的兼容问题，如果你的用户是针对中国市场来说，IE6下的效果是必须得处理了，一个让人头痛而又不得不去面对的一件事情，特别是对于刚接触CSS的童子们，...

阅读全文
如何将页脚固定在页面底部

作者: Airen

发布日期: 9月15,11

点击量: 4,387

css

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何...

阅读全文
jQuery学习笔记—— .html(),.text()和.val()的使用

作者: Airen

发布日期: 9月14,11

点击量: 1,805

jquery

本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如说，...

阅读全文
jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性

作者: Airen

发布日期: 9月11,11

点击量: 1,725

jquery

今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取，添加，修改，删除元素的属性。大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值，或者说动态的修改元素的某个（某些）属性的属性值。那么jQuery就可以让我...

阅读全文
CSS3和HTML实体符制作带图片效果的Buttons

作者: Airen

发布日期: 9月09,11

点击量: 1,011

css3

大家都知道，无论我们是设计一个网站或Web应用程序，我们都少不了Buttons。自从有了CSS3后，我们制作一些漂亮的Buttons就容易多了，只是有一点头痛的是，IE6-8不能支持这种靓丽的Buttons。前面我在《CSS3 Gradient Buttons》和《CSS...

阅读全文
CSS制作图片水平垂直居中

作者: Airen

发布日期: 9月09,11

点击量: 1,644

css

做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使...

阅读全文
CSS制作水平垂直居中对齐

作者: Airen

发布日期: 9月09,11

点击量: 3,384

css

作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供...

阅读全文
驾驭<hr />标签

作者: Airen

发布日期: 9月07,11

点击量: 1,068

css

<hr>标签是html4用来制作水平线的。如果你在网页制作中使用了<hr />标签来制作水平分隔线，你知道在没有样式设置的情况下，他是很难看的。<hr/>在各浏览器的显示常常是100%的宽度，2px的高度,3D边框风格渲染。默认情况是不...

阅读全文
八种创建等高列布局

作者: Airen

发布日期: 9月04,11

点击量: 2,251

css

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初T...

阅读全文
LESS和CSS3动态制作按钮

作者: Airen

发布日期: 9月02,11

点击量: 1,309

css3

昨天我在《CSS3 Gradient Buttons》介绍了如何使用CSS3的一些属性（特别是《CSS3 Gradient》）来制作Buttons。然而，制作一个基本的Buttons很简单，无外呼包括以下几步：使用一个渐变属性，制作一个渐变背景，主要使用了CSS3的Gra...

阅读全文
CSS3 Gradient Buttons

作者: Airen

发布日期: 9月01,11

点击量: 1,216

css3

前面在《CSS3 Gradient》一文中详细介绍了CSS3中的Gradient属性的使用，一直没来得急介绍这方面的实例，今天在Nick La (@nickla)的Web Designer Wall中看到了一篇《CSS3 Gradient Buttons》主要介绍用CSS...

阅读全文
Mark Otto（马克奥托）的BootStrap.less

作者: Airen

发布日期: 8月31,11

点击量: 1,191

css

前面在《CSS——Bootstrap From Twitter》和《CSS——LESS》中介绍了Mark Otto（马克奥托）写的《BootStrap from twitter》以及Alexis Sellier写的LESS。前者Mark Otto（马克奥托）给我们介绍了一...

阅读全文
CSS——LESS

作者: Airen

发布日期: 8月30,11

点击量: 2,736

css

去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的...

阅读全文
jQuery和CSS3给图片制作圆角

作者: Airen

发布日期: 8月28,11

点击量: 1,689

css3

圆角，这东西在Web页面应用方面，大家在熟悉不过的东西了，以前是使用图片来制作，但现在敢于挑战的同学也在尝试使用CSS3的border-radius来制作圆角。在前面,我在《CSS3的圆角Border-radius》专门介绍过CSS3的border-radius属性。感兴...

阅读全文
CSS——Bootstrap From Twitter

作者: Airen

发布日期: 8月27,11

点击量: 4,775

css

Bootstrap这个东东不好直译，如果直译过来就是“引导”，这里暂且不译，直呼其名“Bootstrap”。Bootstrap是来自国外有名的一个社交网站Twitter。我也是最近得到的资源，公司要求培训这方面的东西，所以今天整理出一份贴上来与大家一起分享Twitter网...

阅读全文
jQuery学习笔记—— .addClass()/.removeClass()/.toggleClass()

作者: Airen

发布日期: 8月24,11

点击量: 1,436

jquery

在平时的页面交互制作中，我们常常要使用jQuery或javaScript来动态改变页面中某个或部分元素的样式，为了实现这样的功能，我们往往都是使用jQuery或javaScript来控制HTML中DOM的类名（class）从而实现增加或删除某一样式，今天我们所要看得是如何...

阅读全文
jQuery学习笔记—— .is() VS .hasClass()

作者: Airen

发布日期: 8月24,11

点击量: 764

jquery

现在开始在学习jQuery基础知识，这几天学习了一下jQuery中的.is()和.hasClass()方法的使用。花点时间整理了一下，希望对初学者有所帮助。在jQuery中，我们可以使用两种方法来检查一个元素是否具有某些类名，这两种方法都具有相同的功能。.hasClass...

阅读全文
OOCSS——核心篇

作者: Airen

发布日期: 8月18,11

点击量: 1,368

css

上一节在《OOCSS——概念篇》中主要介绍了一些有关于OOCSS的概念性的东西，并以博客的“meta data”为例介绍了如何创建一个基础对象。赞同和反对使用OOCSS的声音都有，对这个感兴趣的朋友可以不用理会这些反对的声音，因为那些声音是无法阻挡我们对新知识的渴望。今天...

阅读全文
OOCSS——概念篇

作者: Airen

发布日期: 8月17,11

点击量: 2,406

css

“Object Oriented”直译就是面向对象，对于这个词，大家并不陌生，但是加上一个CSS也就是说Object Oriented CSS，对于这个还是第一次见过，被叫作OOCSS(面向对象的ＣＳＳ)，其实这个东西早在2008年被提出，有些同学也在自己的项目中用过了。...

阅读全文
CSS3 选择器——伪类选择器

作者: Airen

发布日期: 8月12,11

点击量: 1,634

css3

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:...

阅读全文
CSS3 选择器——属性选择器

作者: Airen

发布日期: 8月10,11

点击量: 1,208

css3

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素...

阅读全文
CSS3 选择器——基本选择器

作者: Airen

发布日期: 8月09,11

点击量: 1,923

css3

CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。CSS是一种用于屏幕上渲染html，x...

阅读全文
CSS3 制作文字特效

作者: Airen

发布日期: 8月07,11

点击量: 1,440

css3

今天主要搜集了一些网页中文字用css3制作的特效，并亲自尝试了一下，现把关键的代码和效果贴出来与同学们一起分享，希望能对大家在平时的制作中有所帮助。废话不说，直接进入效果的制作，感兴趣的同学跟着我的代码制作一次，你肯定会有不少的收获。Inset Text(内阴影效果)内阴...

阅读全文
CSS三栏布局——中间固定两边自适应宽度

作者: Airen

发布日期: 8月05,11

点击量: 3,489

css

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起...

阅读全文
CSS3 Media Queries案例——Tee Gallery

作者: Airen

发布日期: 8月04,11

点击量: 866

css3

今天继续讲有关于CSS3 Media Queries案例，前面介绍的《CSS3 Media Queries案例——Hicksdesign和《CSS3 Media Queries案例——A List Apart》都是有关于页面的应用，而今天的我要说的案例Tee Galler...

阅读全文
CSS3 Media Queries案例——A List Apart

作者: Airen

发布日期: 8月03,11

点击量: 1,372

css3

有关于CSS3 Media Queries的介绍，现在在网络上铺天盖地了，在《CSS3 Media Queries》中主要介绍了一些关于CSS3 Media Queries的理论知识，而在《CSS3 Media Queries案例——Hicksdesign》中介绍关于CS...

阅读全文
CSS3 Media Queries案例——Hicksdesign

作者: Airen

发布日期: 8月02,11

点击量: 992

css3

前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识，今天开始主要针对CSS3 Media Query进行一些实际案例的分析，从实际案例中来进一步学习和运用CSS3的Media Query，从而好让大家在自己的项目中更好的应用...

阅读全文
jQuery中.addClass()和.removeClass()

作者: Airen

发布日期: 7月31,11

点击量: 1,256

jquery

jQuery中.addClass()主要用来给匹配的元素增加一个类或多个类名（class名）,需要注意的是这种方法只是给匹配的元素增加了类名，这里所说的增加就是在以前的基础上追加类名，新增加的类名并不会代替元素原有的类名。可以使用.addClass()给元素一次添加一个或...

阅读全文
jQuery.add()

作者: Airen

发布日期: 7月31,11

点击量: 957

jquery

jQuery中的.add()是用来追加元素的一种方法，.add(expr,[context])把与表达式匹配的元素添加到jQuery对象中。他可以用于连接分别与两个表达式匹配的元素结果集。jQuery API中是这样描述.add()方法：.add(selector)在原有...

阅读全文
Clear Float

作者: Airen

发布日期: 7月29,11

点击量: 2,795

css

众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A（这个就是说页面中有一个div，并且把其命名为class="A"）中包...

阅读全文
CSS3 Media Queries

作者: Airen

发布日期: 7月14,11

点击量: 1,574

css3

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen"...

阅读全文
图解WinXP系统下安装Git

作者: Airen

发布日期: 7月10,11

点击量: 1,353

html

简单来说Git是一个免费的、开源的版本控制软件，从功能上讲，跟我们比较熟悉的Subversion(SVN)这类版本控制软件没什么两样。由于工作的需求，需要在WinXP下安装git配合团队完成相应的工作，以前一直在别的系统下使用，今天经Drupal花园的龙马指点终于安装成功...

阅读全文
如何在Drupal中避免重复列末尾的Margin

作者: Airen

发布日期: 7月08,11

点击量: 1,488

drupal

在页面中创建列表项，大家并不陌生，常见的一种就是产品展示页面，制作过程中大家肯定碰到了每行最后一个列表项的margin不太好处理。当然如果是在静态页面中，这样的问题很轻松解决，在每行的最后一列加上一个class名，比如last，并定义相应的样式就完全搞定了；但是对于一个C...

阅读全文
CSS3 Multi-columns 之跨列

作者: Airen

发布日期: 7月07,11

点击量: 1,081

css3

前面集中精力介绍了CSS3 Multi-columns中的column-width、column-count以及column-gap、column-rule。而其中Multi-columns中还有列的分栏符（break-before,break-after,break-i...

阅读全文
CSS3 Multi-columns 之column-gap column-rule

作者: Airen

发布日期: 7月05,11

点击量: 734

css3

上一节主要介绍了"Multi-column"中多列布局模块（CSS Multi-column Layout Module）的《CSS3 Multi-columns 之列数和列宽》,今天主要来和大家一起继续学习其中的第二部分：column-gap和column-rule。c...

阅读全文
CSS3 Multi-columns 之列数和列宽

作者: Airen

发布日期: 6月29,11

点击量: 1,672

css3

“Multi-column”译成中文就是“多列”，这个"Multi-column"是W3C给CSS3增加的一个多列布局模块（CSS Multi-column Layout Module）。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并不陌生，因为报纸和杂志上...

阅读全文
CSS ::Selection

作者: Airen

发布日期: 6月26,11

点击量: 1,383

css

前天在一个前端群中碰到一个网友问了一个有关于唐人的CSS帝国中关于选择文本，背景是红色，而文本是白色的问题，如下图所示：或许大家对这样的实现并不陌生，可是有很多童鞋可能跟我一样，并不知道是如何实现，因为在默认情况下，选择网站文本都是深蓝的背景，白色的字体,就如下本站的而言...

阅读全文
CSS3 Multiple Backgrounds

作者: Airen

发布日期: 6月26,11

点击量: 790

css3

前面几节和大家一起学习了CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。这样一来，CSS3中的Background功能就更强大了，那...

阅读全文
CSS Background-origin

作者: Airen

发布日期: 6月24,11

点击量: 984

css3

Background-origin是CSS3为Background扩展的第三个属性，从Background-origin字面上不难发现是指背景图片的原点，其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（backgr...

阅读全文
CSS3 Background-clip

作者: Airen

发布日期: 6月24,11

点击量: 1,139

css3

上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一，今天和大家一起来学习CSS3中有关于Background的第二新属性Background-clip。CSS3中的Background-clip属性，其主要是用来确定...

阅读全文
CSS3 Background-size

作者: Airen

发布日期: 6月22,11

点击量: 2,702

css3

Background大家一定不会陌生，但是ＣＳＳ3开始，给这个Background属性增加了几个新的属性值：Background-size,Background-clip和Background-origin。那么从今天开始分几节内容分别来介绍一下background-s...

阅读全文
CSS3 @font-face

作者: Airen

发布日期: 6月19,11

点击量: 3,297

css3

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-fac...

阅读全文
CSS3 Box-sizing

作者: Airen

发布日期: 6月18,11

点击量: 1,889

css3

box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box...

阅读全文
CSS3 Word-wrap

作者: Airen

发布日期: 6月14,11

点击量: 2,231

css3

CSS3中有关于文本效果的属性，前面在《CSS3 Text-shadow》和《CSS3 Text-overflow》介绍了文本阴影，文本注解的使用，今天主题是超长英文文本自动换行word-wrap的使用，在介绍这个属性的同时，我还把word-break和white-spa...

阅读全文
CSS3 Text-overflow

作者: Airen

发布日期: 6月10,11

点击量: 1,756

css3

CSS3中Text Effects属性一共有三个；text-shadow;text-overflow;word-wrap。其中text-shadow是CSS3中一个常用的属性，在《CSS3 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主...

阅读全文
jQuery的选择器——可见性过滤选择器

作者: Airen

发布日期: 6月05,11

点击量: 915

jquery

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个：可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构，方便学习这两个选择器的使用： <div class="wrap">...

阅读全文
Html5的Reset 和Base样式的结合

作者: Airen

发布日期: 6月05,11

点击量: 2,329

html5

今天无意在网上看到一个介绍Normalize.css文章，觉得很有意思，于是学习了一下，发现他和reset.css一样的功能。大部分情况下，我们在页面中使用CSS Resets解决不同浏览器对HTML元素的默认CSS设置的差异。CSS normalization则与CSS...

阅读全文
CSS3 Border-image

作者: Airen

发布日期: 6月03,11

点击量: 1,239

css3

CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color，只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后，大家一定会很...

阅读全文
CSS3 Border-color

作者: Airen

发布日期: 5月31,11

点击量: 1,450

css3

CSS3中有关于Border的属性一共有三个：圆角border-radius，图片边框border-image,边框多颜色border-color，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现，具体...

阅读全文
CSS3 Animation

作者: Airen

发布日期: 5月31,11

点击量: 4,145

css3

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性An...

阅读全文
CSS3 Transition

作者: Airen

发布日期: 5月27,11

点击量: 5,055

css3

上一节花了大篇幅整理了CSS3中动画属性中的Transform，今天我们接着一起来看CSS3动画属性中的另一个属性Transition。W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。...

阅读全文
CSS3 Transform

作者: Airen

发布日期: 5月24,11

点击量: 4,269

css3

前面我们一起学习了CSS3中的渐变、圆角、阴影等几个属性的使用，今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变...

阅读全文
CSS3 box-shadow

作者: Airen

发布日期: 5月11,11

点击量: 4,311

css3

上一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法，今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置...

阅读全文
CSS3的文字阴影—text-shadow

作者: Airen

发布日期: 5月10,11

点击量: 5,216

css3

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还...

阅读全文
Drupal7中解决IE6的png透明问题

作者: Airen

发布日期: 5月08,11

点击量: 2,658

drupal

做前端的朋友都知道，png32的透明图片在IE下显示会带有一种兰色背景色一样，为了处理这样的兼容问题，我想大家都很头痛，以前只在静态页面下通过DD_belatedPNG的js来处理过这样的bug，但在Drupal下fix这样的bug还是第一次，因此也是费了很久的时间，还多...

阅读全文
jQuery的选择器——内容过滤选择器

作者: Airen

发布日期: 5月04,11

点击量: 2,208

jquery

前面我们一起探讨过了jQuery的选择器中的基本选择器、层次选择器和过滤选择器中的的基本过滤选择器，今天我们一起来学习和探讨一下jQuery选择器的过滤选择器中的内容过滤选择器。jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上，主要包括...

阅读全文
CSS3的圆角Border-radius

作者: Airen

发布日期: 4月26,11

点击量: 5,583

css3

前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是...

阅读全文
jQuery的选择器—基本过滤选择器

作者: Airen

发布日期: 4月24,11

点击量: 1,278

jquery

前面我们初步介绍了jQuery选择器中的基本选择器和层次选择器，今天我们在一起探讨和学习一下jQuery的另一种选择器的方法：过滤选择器中的基本过滤选择器。过滤从字面上大家非常清楚，就是过滤掉自己不想要的东西，也就是说经过过滤后留下来的都是自己需要的，那么其用到jQuer...

阅读全文
jQuery的选择器—层次选择器

作者: Airen

发布日期: 4月23,11

点击量: 1,691

jquery

前面有一篇《jQuery的选择器—基本选择器》主要介绍了几种jQuery选择器的最基本方法，也是最常用的方法，今天继续规纳一下jQuery的第二种选择器方法——层次选择器。在DOM元素之间的层次关系主要包含元素的后代元素、子元素、相邻元素和兄弟元素等，那么我们在通过选择D...

阅读全文
CSS3 RGBA

作者: Airen

发布日期: 4月22,11

点击量: 4,085

css3

前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形...

阅读全文
CSS3 Gradient

作者: Airen

发布日期: 4月21,11

点击量: 6,036

css3

CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿...

阅读全文
jQuery的选择器—基本选择器

作者: Airen

发布日期: 4月20,11

点击量: 1,086

jquery

初学jQuery，为了更好的系统学习好jQuery，今天特意把自己学习心得归纳一下，贴上来与初学者共进退，今天我主要总结的是jQuery的基本选择器。jQuery的基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它主要是通过元素的ID,CLASS,元素的标签...

阅读全文
Drupal7中设置用户头像

作者: Airen

发布日期: 4月19,11

点击量: 798

drupal

前几天碰到一个制作用户头像的东西，也就是当用户登录后需要打印其头像，如下图所示虽然在drupal6中做过类似的东西，但是换到drupal7中就不会有效果了，几经寻找，今天终于给弄出来了。稍做整理后放上来跟大家一起共享。首先来看看其在drupal6的实现方法，主要分两大步，...

阅读全文
jQuery制作go to top按钮

作者: Airen

发布日期: 4月17,11

点击量: 2,725

jquery

每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部，羡慕死人了，但自己就是做不出这样的效果。后来在google和baidu搜寻了一下，仔细思考，并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。我们先来看看效果图吧：这个效果是“点我加到页面顶部”...

阅读全文
玩转Drupal7的User Login

作者: Airen

发布日期: 4月15,11

点击量: 1,749

drupal

网站的登录和注册，大家肯定不会陌生了，而对于玩drupal的朋友来说，更不会陌生吧。接触drupal不久，也并不怎么会使用其核心的东西，就比如说我要在页面头部加一个“登录 | 退出”这样的链接，就会让我够受的了，如果要像下面图示的User Login框头就更大了。所以这次...

阅读全文
Jquery和CSS3打造靓丽的动画进度条

作者: Airen

发布日期: 4月15,11

点击量: 1,137

jquery

今天在做项目中碰到一个需要用制作一个动画的进度条，一开始搞不清楚是怎么一回事，后在google中搜索了css progress bar，真的太多这样的资料，后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。CSS Globe为我们提供了一...

阅读全文
用JQ控制Drupal7 中block内容显示与隐藏

作者: Airen

发布日期: 4月13,11

点击量: 1,050

jquery

今天在drupal建站游逛时，发现其左边栏的JQ效果特吸引人，就拿其中的一个用户登录的block来说吧。一开始进入的时候如下图所示：当你在标题处点击时就会把block中的内容隐藏起来，就成了下面这个样子：在次点击时又会回到图一的效果。如想真实体会一下，你可以登录Drupa...

阅读全文
如何覆写node中的submitted

作者: Airen

发布日期: 4月12,11

点击量: 632

drupal

弄过drupal的，对blog中的submitted都不会太陌生吧，Submitted by admin on Tue, 04/12/2011 – 11:54这是其默认的一种风格，今天我...

阅读全文
Drupal主题的基础样式—reset、base、layout、print

作者: Airen

发布日期: 4月10,11

点击量: 1,654

drupal

从事Drupal工作有一年多了，每每一个新项目开始时，都不免一些重复的样式工作设置，这次特意花了点时间总结了一下，贴出来与大家一起分享。当然这里虽然说是在Drupal中应用，我们也可以应...

阅读全文
Drupal7基础教程--用户(三)

作者: Airen

发布日期: 4月07,11

点击量: 1,655

drupal

前面在Drupal7基础教程─用户，第一，第二篇我们介绍了如何在Drupal注册用户，管理员管理用户，设置用户权限等，今天我们在花一节时间主要来介绍一下用户头像设置。用户头像 ...

阅读全文
Drupal7基础教程--用户(二)

作者: Airen

发布日期: 4月06,11

点击量: 1,436

drupal

前面我们在Drupal7基础教程--用户（一）中主要介绍了用户的注册、管理员如何增加、删除用户等内容，今天我们接着介绍第二部分：用户角色和用户权限。我们现在就开始进入正题吧。用户角色（User Ro...

阅读全文
notepad++结合Zen Coding快速编写HTML代码

作者: Airen

发布日期: 4月05,11

点击量: 4,819

html

经朋友介绍认识了Zend Coding一款快速编写HTML代码的插件，然后在google搜索一下其使用，让在下激动不以，今天特意写了一篇blog来跟大家一起分享。 ...

阅读全文
Drupal7基础教程--用户(一)

作者: Airen

发布日期: 4月02,11

点击量: 1,425

drupal

用户注册（User Registration）Drupal提供了几种注册用户的方法：1、管理员的邀请2、访客的注册，但需要管理员的审批3、任何访客访客可注册你的网站的会员，可以点击首页的"User Login”block中的"Create new account”，如下图...

阅读全文
input 按钮在IE下兼容问题

作者: Airen

发布日期: 3月30,11

点击量: 2,910

css

这段时间在处理网页默认的input 按钮时，IE下常显现不一致的宽度问题，让人感到很纠结。所以今天请教了几位高手把这个问题解决了，现在贴出来和大家共享一下，当然这个方法在网上曾有人写过，大家可以一起来相互探讨一下。Html Code: <input type...

阅读全文
Drupal7 的菜单管理栏

作者: Airen

发布日期: 3月27,11

点击量: 1,448

drupal

Drupal7的菜单管理栏（The administration menu bar ），此工具将带你到网站所有设置区域，如下图所示:此菜单主要包括以下几个选项：一、Home:如上图中的房子图标，你点击他可以进入你的网站的首页页面。例如...

阅读全文