现代 CSS

Airen的博客

CSS3制作垂直手风琴

说起手风琴的制作,大家肯定首选就是使用jQuery来制作,我在《如何使用jQuery制作手风琴效果》也简单的介绍了使用jQuery制作手风琴效果。但今天我在Saud Khan的《Cross Browser Pure CSS3 Vertical Accordion》中学习了一种使用纯CSS制作手风琴效果,稍加整理了一下,贴上来与大家一起分享。

jQuery制作水平手风琴

上回在《如何使用jQuery制作手风琴效果》一文中介绍了使用jQuery制作垂直手风琴效果,今天我们一起在来看一个水平手风琴效果,如下图所示:

在这个例子中,我创建了一个水平手风琴效果,用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。

使用jQuery和CSS控制元素对齐

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

在Web页面中创建一个Web表单时(比如说注册信息表单,或者联系表单),你都必须做出一个功能和视觉对齐的布局。如下图所示:

自定义表单——jQuery制作个性化Checkbox

要让表单中的元素具有个性化风格,仅仅通过样式来实现是相当困难的,大家都很清楚,每种内核的浏览器、每种系统平台下对form元素解析的风格都是不一致的。如果你想让form元素在各种平台或者说各种浏览器具有统一的样式风格,仅仅通过CSS来制作是很难达到统一的标准,但实现他也并不是一件很难的事情,你只要借助jQuery就能轻松的实现。那么今天开始一起来学习使用jQuery制作表单元素的系列,让你不在为此感到头痛。

CSS3 制作Drop Shadow效果

在介绍CSS3系列时,我花了一篇很长的篇幅专门介绍了CSS3box-shadow属性以及其具体的使用等。

CSS3 Tips

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。

如何使用jQuery制作手风琴效果

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开,而同时其他的窗格折叠,具体效果可以点下面DEMO所示效果:

纯CSS3制作Tabs选项卡

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

CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思。其中含量最高的并不是其如何实现的Tabs,而是其中如何使用CSS3来制作切角效果,如:

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

在这节中,我们主要来学习如何使用jQuery.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时,与其相对应的相邻的主内容将会显示,当你在次点击此标题时,其对应的主内容又将会折叠起来。如下图所示:

实现上面的效果,对于jQuery来说是一件非常容易的事情,下面我们就一起看如何实现上图所展示的效果。

HTML Code

我们先来看看HTML Code

页面

返回顶部