Web标准:八、下拉及多级弹出菜单

知识点:

1.带下拉子菜单的导航菜单
2.绝对定位和浮动的区别和运用
3.CSS自适应宽度滑动门菜单
 
1)带下拉子菜单的导航菜单
带下拉子菜单的就是在一级导航下加一个二级菜单。这个在上一节第七节课上我已经做出来了,这里就不再写了。再重温一下注意点:如果要在一级菜单下增加二级菜单,二级菜单需要加一个float:none;来去掉浮动,否则二级菜单也会浮动到一行上去了。
 
2)绝对定位和浮动的区别和运用
绝对定位:它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器中使用相对定位时)。绝对定位使元素脱离文档流,因此不占空间。普通元素的布局就当绝对定位不存在时一样,因为绝对定位的框与文档流无关,所以它可以覆盖其他页面上的其他元素。
比如二级菜单因为使用了绝对定位,所以出现时不会把下面的元素挤开,而是在之上显示的。
浮动元素:它的定位是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或右侧。文字内容环绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补它原先的空间。它只改变了文档流的显示,而没有脱离文档流。
注意:一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。
 
3)CSS自适应宽度滑动门菜单
自适应宽度的滑动门菜单,因为有些css按钮的字数不一样,需要显示的长度不一致,所以需要用到自适应。
要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,然后分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐(是指获取背景图片时一个左对齐一个右对齐)。如下的原理图:
四条辅助线内为一个按钮元素,绿色部为span,定义他的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时会将span撑开,者实现了自适应宽度的按钮了。
之所以要这样,可以看下图的按钮背景图片,左右两侧是有边框的,所以要定义两个背景,将左右两侧的边框都取到。
CSS样式如下:
结果如下图:
说明:1.注意要想使按钮中的文字与左右留开距离,可以在a标签和span标签中分别加个padding。
        2.根据以前学的CSS Sprites技术,将两张图片放到一张图片上,图片从右侧取直接给url()后加 right -40px no-repeat即可。
 
PS:因为这个图片是直接用截图下来的,所以尺寸不精确,所以边框显示会不正确。

Web标准:八、下拉及多级弹出菜单的更多相关文章

  1. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  2. 移动端web禁止长按选择文字以及弹出菜单

    /*如果是禁用长按选择文字功能,用css*/ * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select: ...

  3. 安卓系统浏览器中select下拉按钮无法弹出选择面板奇怪问题解决

    今天遇到个让人崩溃的问题: 平台: 安卓 4.0 描述: 使用 appcan 开发 hybrid 应用,手机上点击下拉选框按钮无法弹出选择面板. 说明: 发现 webkit 内核 position:f ...

  4. 解决bootStrap selectpicker 下拉栏上方弹出

    最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...

  5. 【selenium】下拉框和弹出框处理

    #-*-coding=utf-8 from selenium import webdriver import os,time driver= webdriver.Firefox() driver.ge ...

  6. 多级弹出菜单jQuery插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...

  7. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  8. Web标准:四、纵向导航菜单及二级弹出菜单

    Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位   1)纵向列表 可以看 ...

  9. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

随机推荐

  1. noi2017 day1 题解

    d1t1 sol1:用线段树维护区间是否全0/全1,叶子上压位维护对应位置的数位,加法首先对叶子加,如需进位则向右找到第一个不是全1的叶子+1,中间部分全1部分打上反转标记,减法同理. #includ ...

  2. EasyMall 项目记录-环境搭建

    一.搭建项目运行的环境 (1)修改hosts文件 更改:C:\Windows\System32\drivers\etc目录下hosts文件 添加:127.0.0.1        www.easyma ...

  3. android手机版本

    1.判断安卓手机是64位,还是32位 adb pull /system/bin/cat file cat 32位 64位 2.判断安卓手机CPU是64位,还是32位 adb shell getprop ...

  4. 针对IE6浏览器下,zoom:1的问题

    一.css代码如下: .message .con .word {font-size:14px;color:#333333; border-radius:3px; padding:10px;border ...

  5. 激活函数sigmoid、tanh、relu、Swish

    激活函数的作用主要是引入非线性因素,解决线性模型表达能力不足的缺陷 sigmoid函数可以从图像中看出,当x向两端走的时候,y值越来越接近1和-1,这种现象称为饱和,饱和意味着当x=100和x=100 ...

  6. securecrt8注册码

    securecrt8注册码,两个可用 Name:meisiCompany:TEAM ZWTSerial Number:03-14-367662License Key:ACCFAX R9FHJ7 QZV ...

  7. UML类图的画法

    http://blog.csdn.net/kevin_darkelf/article/details/11371353

  8. mysql5.5版本以后插入中午显示问号的解决办法

    先看看中午变问号的结果 现在看看我们建立数据库和建表的操作 看到这里相信大家都知道创建成功了,没错,数据库跟表是创建成功了,可当你录入的信息带中文的时候就显示问号. 现在用传统的解决办法 在查看下表的 ...

  9. X-Requested-With

    最近工作中发现,使用angular $http跨域的时候,虽然后台已经配置了跨域允许,但是还是报错. 查资料发现,angular $http 的request的请求头中,默认有: Access-Con ...

  10. Introducing Deep Reinforcement

    The manuscript of Deep Reinforcement Learning is available now! It makes significant improvements to ...