css自适应宽度滑动门菜单

2015-7-23 / 0 评论 PHP / Mrxn

本文共计 405 字,感谢您的耐心浏览与评论.

html css width 自适应

什么是CSS自适应宽度滑动门菜单?

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。

自适应宽度按钮的效果是怎样的呢?

那么,自适应宽度按钮,是怎么实现的呢?

要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐

绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会把span撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的css Sprites技术,把背景图片和鼠标经过图片放到一张图片上。

标签: 编程 代码 php html css

转载:转载请注明原文链接 - css自适应宽度滑动门菜单


0条回应:“css自适应宽度滑动门菜单”


发表评论

{view_code_no}