帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Div+CSS从入门到精通 >> 阅读文章

Div+CSS速成第八天:下拉及多级弹出菜单

来源:远方教程 作者:远方教程 发布时间:2015-03-28 查看次数:10605 访问[新版]



二、绝对定位和浮动的区别和运用
学习到现在,定位和浮动也都涉及到了,但有些朋友可能还在迷惑,两者都可以分栏布局,到底什么时候用浮动,什么时候用定位呢?
当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。 一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。
三、 css自适应宽度滑动门菜单
CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿上边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。下面我们讲一下自适应宽度按钮,和菜单原理是一样,因为自适应宽度菜单在《新手常见问题》中已经讲过了
你是否还记得在第五章时学习的css按钮实例(如下图),当时只做了一个按钮,它这里是三个按钮,而且宽度不一样,今天我们还以这个按钮为基础,制作宽度自应适应的按钮。

 

DIV CSS教程——第8天下拉及多级弹出菜单

那么它的实现原来是什么?我们看下边一张图。要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐,如下的原理图,

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部