Web标准:七、横向导航菜单

知识点:

1.横向列表菜单
2.用图片美化的横向导航
3.css Sprites
 
1)横向列表菜单
可以在第四节课的基础上来实现横向导航菜单,只要给li一个float:left;即可。
注意:如果要在一级菜单下增加二级菜单,二级菜单需要加一个float:none;来去掉浮动,否则二级菜单也会浮动到一行上去了。
 
2)用图片美化的横向导航
给li的链接上加一个a标签,给a标签加上display:block;把它转换成块级元素,然后给a设置背景色或者图片使它更加美观。
这里用到了三张背景图片,一张是初始的样式,一张是滑过的hover样式,一张是给他一个选中的样式。
选中的样式需要单给他增加一个id来标记,命名为#current。
 
3)CSS Sprites技术
CSS Sprites在国内和多人叫CSS精灵或CSS雪碧,他是把网页中一些背景推按整合到一张图片文件中,再利用CSS背景图片定位到要显示的位置。这样做可以减少文件体积,减少对服务器的请求次数,提高效率。
 
背景图片代码如下:
#menu ul li a{background:#ccc url(images/na_bg2.gif) 0 0 no-repeat;}
说明:1.url()里面是图片的地址,后面跟的参数第一个表示距左多少,第二个表示据上多少。no-repeat表示向哪个方向重复(repeat-x或repeat-y或repeat),此时为不重复。
          2.CSS中值为0的可以不带单位,其他数值必须带单位(line-height、zoom、z-index除外)
          3.定位图片位置的参数是以图片的左上角为圆点的,所以如果是向左的距离,会使用正数(例10px);如果是向上的距离,会用负数(-10px之类的)。
例子:使用的图片
引用图片中间位置的CSS样式(此图片高150px):
 
展示效果:

Web标准:七、横向导航菜单的更多相关文章

  1. web标准(复习)--7 横向导航菜单

    今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...

  2. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  3. SharePoint自动化系列——Site/Web/List级别的导航菜单

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 需求:在不同的测试用例中,对脚本中不确定的因素需要和用户交互来确定,比如选择哪个site,选择哪个 ...

  4. 顶 企业站常用css横向导航菜单

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  5. web标准(复习)--8

    今天我们开始学习下拉及多级弹出菜单,包含以下内容和知识点: 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一.带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛 ...

  6. css 导航菜单+下拉菜单

    一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

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

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

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

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

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

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

随机推荐

  1. C++进阶--const变量

    //############################################################# // const // - 编译时的限制:一个对象不能被修改 // in ...

  2. Bootstrap-CSS:网格系统

    ylbtech-Bootstrap-CSS:网格系统 1.返回顶部 1. Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap ...

  3. 去除adb传输中的^M

    学习sed过程中,在文本中每行追加内容,发现使用adb会在行末追加一个看不到^M. 场景一:adb保存到文件 adb shell ps|head -n 10 > text.txt,使用sed进行 ...

  4. android手机版本

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

  5. SpringBoot学习记(一)第一个SpringBoot Web服务

    工具IDEA 一.构建项目 1.选择Spring Initializr 2.填写项目信息 3.勾选webService 4.勾选Thymeleaf 5.项目建立完成,启动类自动生成 二.写个Contr ...

  6. Python 实现双向链表(图解)

    原文:https://blog.csdn.net/qq490691606/article/details/49948263 git 路径 https://github.com/wangpanjun/d ...

  7. url的命名与反向解析

    url命名和反向解析  1. 命名   # url(r'^press_list/$', views.press_list,name='press_list'),     url(r'^pre/$', ...

  8. python函数入门

    知识内容: 1.函数的作用 2.函数的定义与调用 3.函数的返回值 4.函数的参数 5.局部变量与全局变量 6.作用域 一.函数的作用 1.复用代码 将可能重复执行的代码封装成函数,并在需要执行的地方 ...

  9. tornado-简单的服务器

    安装tornado pip install tornado 安装sqlalchemy 1.大概代码的解释 import tornado.ioloop #开启循环,等待访问 import tornado ...

  10. 《GPU高性能编程CUDA实战》第八章 图形互操作性

    ▶ OpenGL与DirectX,等待填坑. ● basic_interop #include <stdio.h> #include "cuda_runtime.h" ...