现代 CSS

CSS3+jQuery制作切角的Tabs

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

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

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

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

HTML Code

我们先来看看HTML Code

jQuery制作多级导航菜单

前面在《jQuery+Superfish制作下拉菜单》中介绍了使用jQueryJoel Birch写的Superfish插件制作下拉导航菜单。使用起来是方便,而且还可以制作出不同的导航,功能强大,但有时我们只是需要做一个多级导航菜单,没有必要使用插件来制作。假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说

jQuery制作随机变色

大家都知道,我们可以通过:hover来改变元素悬停状态下的相关参数,特别是元素的色彩,但:hover在现代浏览器上实现是没有问题,可在IE6下就只能适用在<a>元素上,其他元素就无法正常显示(具体可以看《浏览器兼容之旅的第四站:IE常见Bug——part2》)。但是我们可以通过jQuery来实现各个元素的相关属性改变。今天主要和大家一起来学习用jQuery随机改变元素的相关颜色,比如说:背景色,前景色,边框颜色等。

目标

我们今天主要来看一个实例——随机改变链接元素的前景色和背景色

jQuery制作平滑动画菜单

最近在学习jQuery的相关知识点,今天在buildinternet.com看到一篇由Zach Dunn执笔介绍的《How to Make a Smooth Animated Menu with jQuery》,此文主要介绍如何用jQuery制作平滑的动画菜单。觉得效果蛮好的,而且代码也简单。特意整理一下,贴上来与大家一起分享。

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

有关于IE的Bug系列,我们前面一共介绍了四个部分:

jQuery+Superfish制作下拉菜单

最早接触Superfish还是整Drupal时的下拉菜单,那时只知道SuperfishDrupal的一个Module,用来制作类似下图的菜单:

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

浏览器兼容之旅的第三站:IE常见Bug——part1》中介绍了IE浏览器下十种经典的Bug产生的原因,以及如何在写代码中避免这些Bug的产生,或者说Bug发生后,又如何来解决这些Bug。这节我们接着来看IE下的相关Bug。尽量了解并掌握他们,只有知已知彼才能百战百胜。因为大家都尝过IE下的苦楚,有时为了一个Bug纠结一两天,或者更长的都有,以致于都想头撞南墙,不想活了,这都是IE给逼的呀。不过随着时间往后的推移,我也不觉得他有什么恐怖的,我认为写代码时,结构上多加注意,写样式时尽量避免。这样一来,也没有多少Bug会缠着你。别的不说了,我们继续下面的内容——IE的Bug处理。

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

Internet Explorer——前端攻城师的的恶梦,十个有九个前端人员都认为他为祸人间不浅,本应早点灭掉他,可是上天有好生之德,因而没有灭之,在此情况下,前端的攻程师们将就将就过吧。前面在《浏览器兼容之旅的第一站:如何创建条件样式》和《浏览器兼容之旅的第二站:各浏览器的Hack写法》中了解了一些处理兼容的基本方法。那么这节开始浏览器兼容之旅的第三站:IE常见Bug,在本节中,您可以了解IE中常见的Bugs,以及这些Bugs要如何去避免发生,或者发生了,我们将如何去解决他。大家有兴趣吗?有兴趣的童鞋们就开始我们的旅行吧。

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

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

虽然和大家在一起学习各浏览器的Hack的写法,但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西,我力求处理浏览器兼容,尽量不使用Hack写法来处理,除非实在没有办法的情况下,再加以使用。”下面我们先来简单的了解一下什么是CSS Hack。

页面

返回顶部