web标准(复习)--8
今天我们开始学习下拉及多级弹出菜单，包含以下内容和知识点：
带下拉子菜单的导航菜单
绝对定位和浮动的区别和运用
css自适应宽度滑动门菜单
一、带下拉子菜单的导航菜单
下拉菜单在一些企业网站应用尤为广泛，它存在使用方便，占用空间小等特点。之前纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已，下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。
<!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" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin: auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/-//nav_bg2.gif) no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(images/-//nav_bg3.gif) no-repeat;}
#menu ul li a#current { background:url(images/-//nav_bg1.gif) no-repeat; font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
二、绝对定位和浮动的区别和运用
学习到现在，定位和浮动也都涉及到了，但有些朋友可能还在迷惑，两者都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？
当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
web标准(复习)--8的更多相关文章
- web标准(复习)--6 html列表
今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...
- web标准(复习)--1
XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...
- web标准(复习)--2 列布局
今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分, ...
- web标准(复习)--7 横向导航菜单
今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...
- web标准(复习)--5 超链接伪类
今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- web标准之道——笔记
字体设置 sans和sans-serif为通用字体,具体哪个字体被最终应用由浏览器决定,通用字体只有在其他字体都无效时才会被当作代替方案.通用字体应该放在最后面 sans衬线字体 容易阅读,一般使用在 ...
- 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历
跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...
随机推荐
- twsited(4)--不同模块用redis共享以及用web发送数据到tcpserver
上一章开头我们说,要连接之前flask系列文章中的用户,结果篇幅不够,没有实现. 今天我们把它实现一下.话说,不同模块之间,该如何联系在一起,通常都是mysql.redis.rabbitmq还有RPC ...
- 详解ios文件系统文件目录读写操作－备用
iPhone文件读写系统操作教程是本文要介绍的内容,对于一个运行在iPhone得app,它只能访问自己根目录下得一些文件(所谓sandbox).一个app发布到iPhone上后,它得目录结构如下: ...
- mongodb and .net
http://www.codeproject.com/Tips/684801/Connecting-NET-Application-to-MongoDB http://www.codeproject. ...
- delphi根据进程PID获取程序所在路径的函数（用OpenProcess取得句柄，用GetModuleFileNameEx取得程序名）
uses psapi; {根据进程PID获取程序所在路径的函数}function GetProcessExePath(PID: Cardinal): string;varpHandle: THandl ...
- Qt中 QString 和int， char等的“相互”转换，关键是QString.toLocal8Bit().data();
Qt中 int ,float ,double转换为QString 有两种方法 1.使用 QString::number(); 如: long a = 63; QString s = QString:: ...
- Linux下根据进程的名字杀死进程
以前是写了一个bash,通过ps,grep 和awk配合搜索PID再kill掉进程.果然以前傻,不知道解决问题之前先google,原来直接就有相关的pkill -f "process_nam ...
- 使用activeMQ实现jms
一:jms介绍 jms说白了就是java message service,是J2EE规范的一部分,跟jdbc差不多,sun只提供了接口,由各个厂商(provider)来进行具体的实现, ...
- 面试问题：关于java并发方面的
主要是回答一下面试中可能会碰到的问题.慢慢的积累一下.一个星期以后,补全.
- Hive 7、Hive 的内表、外表、分区(22)
Hive 7.Hive 的内表.外表.分区 1.Hive的内表 Hive 的内表,就是正常创建的表,在 http://www.cnblogs.com/raphael5200/p/5208437.h ...
- Python进阶(面向对象编程基础)(二)
1.初始化实例属性 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'ziv·chan' #定义Person类的__init__方法 ...