“滑动门”的版本间的差异
来自Blueidea
小 |
|||
| 第3行： | 第3行： | ||
== 滑动门是一种利用CSS来控制自适应导航栏外观的一种技术。 == | == 滑动门是一种利用CSS来控制自适应导航栏外观的一种技术。 == | ||
| + | 滑动门使用最频繁的地方是导航栏。其实，当一个容器中的文字数量不定的时候，容器左部和右部背景图能自动靠齐，这与显示生活中的滑动门类似，因此取名为滑动门。 | ||
| 第8行： | 第9行： | ||
# 导航边框样式为非矩形，或者导航栏背景图片有阴影等装饰性效果。 | # 导航边框样式为非矩形，或者导航栏背景图片有阴影等装饰性效果。 | ||
| − | # | + | # 在未知文字数量的情况下，导航栏'''自动适应'''宽度。 |
在制作滑动门以前，您需要斟酌到底能不能用低成本的方法实现。不是所有的效果图上的自适应导航都能用滑动门来实现。壁如，当效果图上的文字使用了特殊效果（阴影，浮雕，外发光等等），因为无法通过修改xhtml中的文字,来达到修改图片上文字，因此，滑动门在这种情况下并不适用。 | 在制作滑动门以前，您需要斟酌到底能不能用低成本的方法实现。不是所有的效果图上的自适应导航都能用滑动门来实现。壁如，当效果图上的文字使用了特殊效果（阴影，浮雕，外发光等等），因为无法通过修改xhtml中的文字,来达到修改图片上文字，因此，滑动门在这种情况下并不适用。 | ||
| − | + | == 滑动门范例 == | |
| + | *http://www.w3cn.org/article/translate/2005/112.html CSS中的滑动门技术 | ||
| + | *http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/ 一款简洁的导航 | ||
| + | *http://demo.rexsong.com/200705/css_background_menus/ 滑动门效果（23例） | ||
| − | + | ==滑动门与Tab选项卡== | |
| + | 很多新手接触滑动门的时候，经常与[[Tab选项卡]]混为一谈。请记住，在某些情况下，Tab选项卡可能会使用滑动门技术，因为一组Tab选项卡看起来和导航非常类似。滑动门主要是靠控制CSS的各种属性实现的。而Tab选项卡主要是靠书写[[JavaScript]]脚本来实现的，尽管有时候需要使用滑动门技术来改善其外观。 | ||
| − | + | ==滑动门的某些缺点== | |
| − | + | ||
| + | 滑动门频繁出现的场合是导航栏，而导航栏是一组链接集。 | ||
| + | 某些时候，为了增强导航栏的交互表现，我们会使用伪类:hover来对链接做一些小小的改变，以强调鼠标指针已经移上这一事实。这种改变一般体现在文字的颜色、背景、下划线上。 | ||
| − | + | 当背景图需要改变的时候，除了要在背景图上做一些改变，还需要添加额外的标签。这种情况一般出现在，链接的左右部分都为圆角或其它形状。在CSS2.1规范中，一个容器只能定义一副背景图片，这就决定了滑动门对待:hover上的局限性，但我们可以通过添加额外标签来解决，或使用JavaScript来实现。 | |
| − | + | 在CSS3的草案中，W3C相关工作小组已经在为CSS多重背景图而努力，因此在未来，就不需要再使用这些额外的标签。 | |
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | [[Category:CSS|CSS技术]] | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | [[Category:CSS]] | + | |
2009-02-17T23:05:49的版本
该文档正在不断扩充。
滑动门是一种利用CSS来控制自适应导航栏外观的一种技术。
滑动门使用最频繁的地方是导航栏。其实，当一个容器中的文字数量不定的时候，容器左部和右部背景图能自动靠齐，这与显示生活中的滑动门类似，因此取名为滑动门。
当满足以下条件，则可能需要使用到滑动门技术：
- 导航边框样式为非矩形，或者导航栏背景图片有阴影等装饰性效果。
- 在未知文字数量的情况下，导航栏自动适应宽度。
在制作滑动门以前，您需要斟酌到底能不能用低成本的方法实现。不是所有的效果图上的自适应导航都能用滑动门来实现。壁如，当效果图上的文字使用了特殊效果（阴影，浮雕，外发光等等），因为无法通过修改xhtml中的文字,来达到修改图片上文字，因此，滑动门在这种情况下并不适用。
滑动门范例
- http://www.w3cn.org/article/translate/2005/112.html CSS中的滑动门技术
- http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/ 一款简洁的导航
- http://demo.rexsong.com/200705/css_background_menus/ 滑动门效果（23例）
滑动门与Tab选项卡
很多新手接触滑动门的时候，经常与Tab选项卡混为一谈。请记住，在某些情况下，Tab选项卡可能会使用滑动门技术，因为一组Tab选项卡看起来和导航非常类似。滑动门主要是靠控制CSS的各种属性实现的。而Tab选项卡主要是靠书写JavaScript脚本来实现的，尽管有时候需要使用滑动门技术来改善其外观。
滑动门的某些缺点
滑动门频繁出现的场合是导航栏，而导航栏是一组链接集。 某些时候，为了增强导航栏的交互表现，我们会使用伪类:hover来对链接做一些小小的改变，以强调鼠标指针已经移上这一事实。这种改变一般体现在文字的颜色、背景、下划线上。
当背景图需要改变的时候，除了要在背景图上做一些改变，还需要添加额外的标签。这种情况一般出现在，链接的左右部分都为圆角或其它形状。在CSS2.1规范中，一个容器只能定义一副背景图片，这就决定了滑动门对待:hover上的局限性，但我们可以通过添加额外标签来解决，或使用JavaScript来实现。
在CSS3的草案中，W3C相关工作小组已经在为CSS多重背景图而努力，因此在未来，就不需要再使用这些额外的标签。
