今天我们开始学习html列表，包含以下内容和知识点：

横向列表菜单
用图片美化的横向导航
css Sprites
一、横向列表菜单
前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>

为了用户体验更加友好，还是把a转换成块级元素，也可以给a设置背景色或背景图片来更加美观了，另外再设置鼠标放上时的样式。

#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left;}
#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}

三、 CSS Sprites技术
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

讲CSS Sprites之前，先把背景图片给搞清楚

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少，这和padding的简写方式是不 一样，一定不要弄混。另外再强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）；no-repeat表示背景图片向哪个方向重复，此时为不重复。

还需说明一点的是定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，就是靠背景图片定位来实现的。把三张背景图片整合到一张上，如下图：

web标准(复习)--7 横向导航菜单的更多相关文章

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

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

  2. Web标准：七、横向导航菜单

    Web标准:七.横向导航菜单 知识点: 1.横向列表菜单 2.用图片美化的横向导航 3.css Sprites   1)横向列表菜单 可以在第四节课的基础上来实现横向导航菜单,只要给li一个float ...

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

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

  4. web标准(复习)--6 html列表

    今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...

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

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

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

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

  7. web标准(复习)--1

    XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...

  8. 符合web标准的网页下拉菜单

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> < ...

  9. web标准(复习)--2 列布局

    今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分, ...

随机推荐

  1. linux应用程序地址布局

    Linux应用程序在内存中的布局,由高地址到低地址依次为:栈.堆.BSS段.数据段.代码段.代码段的起始地址固定为0x8048000,无论哪一个应用程序它的代码段起始地址一定是0x8048000,这里 ...

  2. RenderBody, RenderPage and RenderSection methods in MVC 3

    原文地址:http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in R ...

  3. SQL-Customers Who Never Order

    Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...

  4. matrix矩阵求逆 与解方程模板 留做备用 (有bug,待补充)

    // // main.cpp // 矩阵求逆 // // Created by 唐 锐 on 13-6-20. // Copyright (c) 2013年 唐 锐. All rights reser ...

  5. CDH-5.4.3离线安装

    使用CM离线安装CDH-5.4.3,如下: cdh5.4.3安装 配置/etc/hosts vim /etc/hosts 192.168.10.1 s1 192.168.10.2 s2 192.168 ...

  6. C - Critical Links - uva 796（求桥）

    题意:有一些网络通过一些线路连接,求关键的连接,也就是桥,如果删除这个链接那么会产生两个子树 分析:注意一下图不是连通图即可 ************************************* ...

  7. java(17) - 增强for循环、装箱拆箱、可变参数

    一.增强型for循环: 语法格式: 打印: A B C D E 当遍历集合或数组时,如果需要访问集合或数组的下标时,最好使用旧的方法来便利或循环,而不要用增强型for循环,因为它丢失了下标信息. 对于 ...

  8. Server Job: error: String or binary data would be truncated. The statement has been terminated.

    "String or binary data would be truncated. The statement has been terminated" most probabl ...

  9. 添加链接服务器 SQL SERVER

    使用sql语句: exec sp_addlinkedserver @server='serverontest',@provider='sqloledb',@srvproduct='',@datasrc ...

  10. springMVC 注解版

    http://blog.csdn.net/liuxiit/article/details/5756115 http://blog.csdn.net/hantiannan/article/categor ...