码迷,mamicode.com
首页 > Web开发 > 详细

【前端】css自适应宽度滑动门菜单

时间:2015-07-22 16:25:51      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

html     css    width  自适应

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

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

技术分享       技术分享

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


技术分享

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

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

技术分享

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

技术分享





版权声明:本文为博主原创文章,未经博主允许不得转载。

【前端】css自适应宽度滑动门菜单

标签:

原文地址:http://blog.csdn.net/csdn_yudong/article/details/47002855

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!