web标准(复习)--8

时间：2021-02-07 15:56:02

今天我们开始学习下拉及多级弹出菜单，包含以下内容和知识点：

带下拉子菜单的导航菜单
绝对定位和浮动的区别和运用
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>

二、绝对定位和浮动的区别和运用
学习到现在，定位和浮动也都涉及到了，但有些朋友可能还在迷惑，两者都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

相关文章