«

css自适应宽度滑动门菜单

admin 发布于 阅读:6712 PHP


html css width 自适应

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

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

css自适应宽度滑动门菜单

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

css自适应宽度滑动门菜单

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

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

css自适应宽度滑动门菜单

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

编程 代码 php html css


扫描二维码,在手机上阅读

推荐阅读: