资源预览内容
第1页 / 共6页
第2页 / 共6页
第3页 / 共6页
第4页 / 共6页
第5页 / 共6页
第6页 / 共6页
亲,该文档总共6页全部预览完了,如果喜欢就下载吧!
资源描述
一、带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点。之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。先在 html 代码增加二级菜单的代码:首页网页版式自适应宽度固定宽度web 教程新手入门视频教程常见问题web 实例常用代码增加完代码后,在浏览器里预览一下:怎么变成这样了?别懵,分析一下错乱的原因。首先看“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列,所以把二级菜单的背景和浮动清除掉,增加以下 css 代码:#menu ul li ul li float:none;#menu ul li ul li a background:none;现在预览看下,二级菜单是不是已经归位了,但鼠标划过时还继承了一级菜单的样式,所以也改为最终效果上的黑色背景白色文字,还有下拉菜单的灰色边框和灰色背景也一并加上,修改并增加如下代码:#menu ul li ul border:1px solid #ccc;#menu ul li ul li float:none; width:85px; background:#eee; margin:0;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#333; color:#fff;第一行设置二级菜单的灰色边框;为了美观,我们把下拉菜单的宽度设置成和一级菜单宽度相同,第二行的 width:85px 再加上第一行上设置的边框左右各 1px 后正好是 87px,和一级菜单宽度相同。margin:0 是为了清除掉继承一级菜单中 margin-left:2px;最后一行设置鼠标划过时的样式。再预览一下,是不是基本的样式已实现了。下一步就该把二级菜单隐藏,当鼠标划过时显示出来了。增加如下代码:#menu ul li ul display:none; border:1px solid #ccc;#menu ul li:hover ul display:block;注意第二行的写法,#menu ul li:hover ul 这个样比较难理解,它的意思是定义当鼠标划过 #menu 下 ul 下 li 时,li 下的 ul 的样式(有点饶舌) ,这里设置为 display:block,意思是鼠标划过时显示这块内容。开始隐藏,鼠标划过时显示, 这就实现了我们想要的效果。目前 IE6 只支持 a 的伪类,其它标签的伪类不支持,所以要想在 IE6下也显示正确,需要借助 js 来实现。我们定义一个类.sfhover (自己命名,需和 JS 中相同)的属性为display:block;然后当鼠标划过后,用 JS 给当前 li 添加上这个样式上,根据 css 的优先级:指定的高于继承的原则,就实现了 IE6 下的正确显示。所以增加如下代码:#menu ul li.sfhover ul display:block; 认真跟着教程制作的朋友可能已经发现,现在应用的 JS 和纵向导航时应用的不样,但最终实现的效果是一样的。同理 css 在布局网站时,也是可以多种方法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。JS 部分本例不做讲解,如果你想弄清楚 JS 是如何实现的,请学习 js 相关内容。到这里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menu ul li ul 增加 position:absolute;属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了。完整的预览代码如下:0? : ) + sfhover;sfElsi.onMouseDown=function() this.className+=(this.className.length0? : ) + sfhover;sfElsi.onMouseUp=function() this.className+=(this.className.length0? : ) + sfhover;sfElsi.onmouseout=function() this.className=this.className.replace(new RegExp( ?|)sfhoverb), );window.onload=menuFix;/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; margin:0 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(http:/www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;#menu ul li a:hover background:url(http:/www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;#menu ul li a#current background:url(http:/www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 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:0;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#333; color:#fff;#menu ul li:hover ul display:block;#menu ul li.sfhover ul display:block;首页网页版式自适应宽度固定宽度web 教程新手入门视频教程常见问题web 实例常用代码二、绝对定位和浮动的区别和运用学习到现在,定位和浮动也都涉及到了,但有些朋友可能还在迷惑,两者都可以分栏布局,到底什么时候用浮动,什么时候用定位呢?当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时) 。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。三、 css 自适应宽度滑动门菜单CSS 自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿上边的实例来说,是按 4 个字的宽度来设计的,如果其中一项为 5 个字或更多,就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是 css 自适应宽度菜单。你是否还记得在第五章时学习的 css 按钮实例(如下图) ,当时只做了一个按钮,它这里是三个按钮,而且宽度不一样,今天我们还以这个按钮为基础,制作宽度自应适应的按钮。那么它的实现原来是什么?我们看下边一张图。要想实现自适应宽度,需要在文字上增加一个辅助标签,如 span,分别在 a 上和 span 上设置背景,一个左侧对齐,一个右侧对齐,如下的原理图,四条辅助线内为一个按钮元素,绿色部分为 span,然后定义它的背景图片靠右侧对齐,而左侧的部分为 a的背景图片,定义靠左侧对齐。当文字多时,会把 span 撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的 css Sprites 技术,把背景图片和鼠标经过图片放到一张图片上。a display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; a:hover background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;免费注册登录在淘宝网上开店预览显示效果如下所示,因背景图片比较长,所以右侧显示不太友好,下一步就需要把 a 的宽度给去掉,设置 span 的背景,使右侧显示正常,另外把三个按钮横向排列在 a 上增加如下代码:float:left; margin:5px;横向排列,并增加 5px 的外边距,现在看下效果吧。为了美观,下一步需要 a 的左侧增加填充,使文字不死贴左侧,同理 span 右侧需要增加一个同样的填充。a display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; a span display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;a:hover background: url(btn_bg.gif) no-repeat 0px -37px;a:hover span background: url(btn_bg.gif) no-repeat right -37px;
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号