DIV+CSS教程第八天下拉及多级弹出菜单Word文档格式.docx
《DIV+CSS教程第八天下拉及多级弹出菜单Word文档格式.docx》由会员分享,可在线阅读,更多相关《DIV+CSS教程第八天下拉及多级弹出菜单Word文档格式.docx(13页珍藏版)》请在冰豆网上搜索。
/a>
/li>
ahref="
网页版式<
自适应宽度<
固定宽度<
/ul>
web教程<
新手入门<
视频教程<
常见问题<
web实例<
常用代码<
/div>
增加完代码后,在浏览器里预览一下:
是不是一看头都大了,怎么变成这样了。
别懵,我们分析一下错乱的原因。
首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列,所以我们先把二级菜单的背景和浮动清除掉,增加以下css代码:
#menuulliulli{float:
none;
}
#menuulliullia{background:
现在预览看下,二级菜单是不是已经归位了,但鼠标划过时还继承了一级菜单的样式,所以也改为最终效果上的黑色背景白色文字,还有下拉菜单的灰色边框和灰色背景也一并加上,修改并增加如下代码:
#menuulliul{border:
1pxsolid#ccc;
width:
85px;
background:
#eee;
margin:
0;
#menuulliullia:
hover{background:
#333;
color:
#fff;
第一行设置二级菜单的灰色边框;
为了美观,我们把下拉菜单的宽度设置成和一级菜单宽度相同,第二行的width:
85px再加上第一行上设置的边框左右各1px后正好是87px,和一级菜单宽度相同。
margin:
0是为了清除掉继承一级菜单中margin-left:
2px;
最后一行设置鼠标划过时的样式。
再预览一下,是不是基本的样式已实现了。
下一步就该把二级菜单隐藏,当鼠标划过时显示出来了。
增加如下代码:
#menuulliul{display:
border:
#menuulli:
hoverul{display:
block;
注意第二行的写法,#menuulli:
hoverul这个样比较难理解,它的意思是定义当鼠标划过#menu下ul下li时,li下的ul的样式(有点饶舌),这里设置为display:
block,意思是鼠标划过时显示这块内容。
开始隐藏,鼠标划过时显示,这就实现了我们想要的效果。
目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现。
我们定义一个类.sfhover(自己命名,需和JS中相同)的属性为display:
然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:
指定的高于继承的原则,就实现了IE6下的正确显示。
所以增加如下代码:
#menuulli.sfhoverul{display:
}
认真跟着教程制作的朋友可能已经发现,现在应用的JS和纵向导航时应用的不样,但最终实现的效果是一样的。
同理css在布局网站时,也是可以多种方法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。
JS部分本例不做讲解,如果你想弄清楚JS是如何实现的,请学习js相关内容。
到这里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menuulliul增加position:
absolute;
属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了(欲更多了解绝对定位,请查看之前教程或
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
scripttype=text/javascript>
--//-->
[CDATA[//>
--
functionmenuFix(){
varsfEls=document.getElementById("
).getElementsByTagName("
li"
);
for(vari=0;
i<
sfEls.length;
i++){
sfEls[i].onmouseover=function(){
this.className+=(this.className.length>
0?
:
"
)+"
sfhover"
;
sfEls[i].onMouseDown=function(){
sfEls[i].onMouseUp=function(){
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("
(?
|^)sfhover\\b"
),
window.onload=menuFix;
//-->
]]>
/script>
styletype="
text/css"
body{font-family:
Verdana;
font-size:
12px;
line-height:
1.5;
}
a{color:
#000;
text-decoration:
none;
a:
hover{color:
#F00;
#menu{width:
500px;
height:
28px;
0auto;
border-bottom:
1pxsolid#E10001;
#menuul{list-style:
0px;
padding:
#menuulli{float:
left;
margin-left:
2px;
#menuullia{display:
87px;
text-align:
center;
url(00no-repeat;
14px;
#menuullia:
#menuullia#current{background:
font-weight:
bold;
display:
position:
/style>
/head>
body>
/body>
/html>
提示:
可以先修改部分代码后再运行
二、绝对定位和浮动的区别和运用
学习到现在,定位和浮动也都涉及到了,但有些朋友可能还在迷惑,两者都可以分栏布局,到底什么时候用浮动,什么时候用定位呢?
当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。
绝对定位使元素脱离文档流,因此不占据空间。
普通文档流中元素的布局就当绝对定位的元素不存在时一样。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。
文字内容会围绕在浮动元素周围。
当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。
一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。
有关定位的视频教程请参看:
三、css自适应宽度滑动门菜单
CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿上边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了。
那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。
下面我们讲一下自适应宽度按钮,和菜单原理是一样,因为自适应宽度菜单在《新手常见问题》中已经讲过了,如果学会自适应按钮,你还不会制作自适应菜单的话,请阅读
你是否还记得在第五章时学习的css按钮实例(如下图),当时只做了一个按钮,它这里是三个按钮,而且宽度不一样,今天我们还以这个按钮为基础,制作宽度自应适应的按钮。
那么它的实现原来是什么?
我们看下边一张图。
要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐,如下的原理图,
四条辅助线内为一个按钮元素,绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。
当文字多时,会把span撑开,这实现了自适应宽度的按钮了。
这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的cssSprites技术,把背景图片和鼠标经过图片放到一张图片上。
拿第五章css按钮的例子代码进行修改,先改为背景图片使用上图,再增加两个字数不等按钮,并在文字上增加span标签
a{display:
block;
34px;
107px;
2;
center;
url(/upload/2010-08/17/091722_btn_bg.gif)no-repeat0px0px;
#d84700;
14px;
bold;
padding-top:
3px;
url(/upload/2010-08/17/091722_btn_bg.gif)no-repeat0px-37px;
p>
span>
免费注册<
/span>
登录<
在淘宝网上开店<
/p>
预览显示效果如下所示,因背景图片比较长,所以右侧显示不太友好,下一步就需要把a的宽度给去掉,设置span的背景,使右侧显示正常,另外把三个按钮横向排列
在a上增加如下代码:
float:
5px;
横向排列,并增加5px的外边距,现在看下效果吧。
为了美观,下一步需要a的左侧增加填充,使文字不死贴左侧,同理span右侧需要增加一个同样的填充。
float:
37px;
line-height:
url(btn_bg.gif)no-repeat0px0px;
padding-left:
18px;
aspan{display:
url(btn_bg.gif)no-repeatright0px;
padding-right:
20px;
url(btn_bg.gif)no-repeat0px-37px;
hoverspan{background:
url(btn_bg.gif)no-repeatright-37px;
对比以上代码,可能你已经发现,原来a顶部的3px给去掉了,把高度改为37px了,行高也改为37px了,为什么这么做,大家动手试下就明白了。
然后设置a下span的背景图片,span默认是内联元素,所以需先转换为块级元素;
另外需增加鼠标经过时span的样式。
显示效果如下,对比一下实例图,是不是实现了这样的效果。
url(/upload/2010-08/17/091722_btn_bg.gif)no-repeatright0px;
url(/upload/2010-08/17/091722_btn_bg.gif)no-repeatright-37px;