仓酷云

标题: CSS教程之第八天　下拉及多级弹出菜单 [打印本页]
作者: 第二个灵魂    时间: 2015-1-16 10:33
标题: CSS教程之第八天　下拉及多级弹出菜单
通常把清除浮动写成单独的
放在所有浮动div的最下方。
明天我们入手下手进修《十天学会web尺度(div+css)》的下拉及多级弹出菜单，包括以下内容和常识点：

1、带下拉子菜单的导航菜单

下拉菜单在一些企业网站使用尤其普遍，它存在利用便利，占用空间小等特性。之前纵导游航教程中已利用过二级导航，明天制造下横导游航菜单的二级菜单，办法和纵向一样，只不外由纵向改动为横向罢了，上面我们以上一章第二节用图片丑化的横导游航中的实例举行修正。
CSS教程之第八天　下拉及多级弹出菜单
登录/注册后可看大图

先在html代码增添二级菜单的代码：
<divid="menu">
<ul>
<li><aid="current"href="#">首页</a></li>
<li><ahref="#">网页版式</a>
<ul>
<li><ahref="#">自顺应宽度</a></li>
<li><ahref="#">流动宽度</a></li>
</ul>
</li>
<li><ahref="#">web教程</a>
<ul>
<li><ahref="#">老手进门</a></li>
<li><ahref="#">视频教程</a></li>
<li><ahref="#">罕见成绩</a></li>
</ul>
</li>
<li><ahref="#">web实例</a></li>
<li><ahref="#">经常使用代码</a></li>
</ul>
</div>
增添完代码后，在扫瞄器里预览一下：
CSS教程之第八天　下拉及多级弹出菜单
登录/注册后可看大图

是否是一看头都年夜了，怎样酿成如许了。别懵，我们剖析一下庞杂的缘故原由。起首我们看下“自顺应宽度”和“流动宽度”两个二级菜单也承继了一级菜单的背景和横向分列，以是我们先把二级菜单的背景和浮动扫除失落，增添以下css代码：
#menuulliulli{float:none;}
#menuulliullia{background:none;}
如今预览看下，二级菜单是否是已回位了，但鼠标划过期还承继了一级菜单的款式，以是也改成最后的效果上的玄色背景红色笔墨，另有下拉菜单的灰色边框和灰色背景也一并加上，修正并增添以下代码：
CSS教程之第八天　下拉及多级弹出菜单
登录/注册后可看大图
#menuulliul{border:1pxsolid#ccc;}
#menuulliulli{float:none;width:85px;background:#eee;margin:0;}
#menuulliullia{background:none;}
#menuulliullia:hover{background:#333;color:#fff;}
第一行设置二级菜单的灰色边框；为了美妙，我们把下拉菜单的宽度设置成和一级菜单宽度不异，第二行的width:85px再加上第一行上设置的边框摆布各1px后恰好是87px，和一级菜单宽度不异。margin:0是为了扫除失落承继一级菜单中margin-left:2px；最初一行设置鼠标划过期的款式。
再预览一下，是否是基础的款式已完成了。
CSS教程之第八天　下拉及多级弹出菜单
登录/注册后可看大图

下一步就该把二级菜单埋没，当鼠标划过期显现出来了。增添以下代码：
#menuulliul{display:none;border:1pxsolid#ccc;}
#menuulli:hoverul{display:block;}
注重第二行的写法，#menuulli:hoverul这个样对照难了解，它的意义是界说当鼠标划过#menu下ul下li时，li下的ul的款式（有点饶舌），这里设置为display:block，意义是鼠标划过期显现这块内容。入手下手埋没，鼠标划过期显现，这就完成了我们想要的效果。今朝IE6只撑持a的伪类，别的标签的伪类不撑持，以是要想在IE6下也显现准确，必要借助js来完成。我们界说一个类.sfhover（本人定名，需和JS中不异）的属性为display:block;然后当鼠标划事后，用JS给以后li增加上这个款式上，依据css的优先级：指定的高于承继的准绳，就完成了IE6下的准确显现。以是增添以下代码：
#menuulli.sfhoverul{display:block;}
仔细随着教程制造的伴侣大概已发明，如今使用的JS和纵导游航时使用的不样，但终极完成的效果是一样的。同理css在结构网站时，也是能够多种办法的，正所谓条条小道通罗马，但愿人人触类旁通，加深后面教程的把握。JS部分本例不做解说，假如你想弄分明JS是怎样完成的，请进修js相干内容。到这里，本例就基础完成了，另有一个成绩是以后导航下有内容的话，假如二级菜单显现，将会把下边的内容挤跑，以是必要给#menuulliul增添position:absolute;属性，当其相对定位后，它将离开本来文档流，不再占有空间，因而也不会再把下边内容挤跑了（欲更多懂得相对定位，请检察之前教程或http://www.ckuyun.com/div_css/899.shtml）。完全的预览代码以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><scripttype=text/javascript><!--//--><![CDATA[//><!--functionmenuFix(){varsfEls=document.getElementById("menu").getElementsByTagName("li");for(vari=0;i<sfEls.length;i++){sfEls.onmou搜索引擎优化ver=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onMouseDown=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onMouseUp=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onmou搜索引擎优化ut=function(){this.className=this.className.replace(newRegExp("(?|^)sfhover"),"");}}}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;margin:0auto;border-bottom:3pxsolid#E10001;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;margin-left:2px;}#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;background:url(http://www.ckuyun.com/upload/2010-06/27/nav_bg2.gif)00no-repeat;font-size:14px;}#menuullia:hover{background:url(http://www.ckuyun.com/upload/2010-06/27/nav_bg3.gif)00no-repeat;}#menuullia#current{background:url(http://www.ckuyun.com/upload/2010-06/27/nav_bg1.gif)00no-repeat;font-weight:bold;color:#fff;}#menuulliul{border:1pxsolid#ccc;display:none;position:absolute;}#menuulliulli{float:none;width:87px;background:#eee;margin:0;}#menuulliullia{background:none;}#menuulliullia:hover{background:#333;color:#fff;}#menuulli:hoverul{display:block;}#menuulli.sfhoverul{display:block;}</style></head><body><divid="menu"><ul><li><aid="current"href="#">首页</a></li><li><ahref="#">网页版式</a><ul><li><ahref="#">自顺应宽度</a></li><li><ahref="#">流动宽度</a></li></ul></li><li><ahref="#">web教程</a><ul><li><ahref="#">老手进门</a></li><li><ahref="#">视频教程</a></li><li><ahref="#">罕见成绩</a></li></ul></li><li><ahref="#">web实例</a></li><li><ahref="#">经常使用代码</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
2、相对定位和浮动的区分和使用

进修到如今，定位和浮动也都触及到了，但有些伴侣大概还在利诱，二者都能够分栏结构，究竟甚么时分用浮动，甚么时分用定位呢？
当一个元素利用相对定位后，它的地位将根据扫瞄器左上角入手下手盘算或相对父容器（在父容器利用绝对定位时）。相对定位使元素离开文档流，因而不占有空间。一般文档流中元素的结构就当相对定位的元素不存在时一样。由于相对定位的框与文档流有关，以是它们能够掩盖页面上的其他元素。
而浮动元素的定位仍是基于一般的文档流，然后从文档流中抽出并尽量远的挪动至左边大概右边。笔墨内容会环绕在浮动元素四周。当一个元素从一般文档流中抽出后，仍旧在文档流中的其他元素将疏忽该元素并弥补他本来的空间。它只是改动了文档流的显现，而没有离开文档流，了解了这一点，就很简单弄分明甚么时分用定位，甚么时分用浮动了。
一个元素浮动或相对定位后，它将主动转换为块级元素，而不管该元素自己是甚么范例。有关定位的视频教程请参看：http://www.ckuyun.com/div_css/899.shtml
3、css自顺应宽度滑动门菜单

CSS自顺应宽度菜单指菜单的宽度能够跟着内容的增添而变宽，就拿上边的实例来讲，是按4个字的宽度来计划的，假如个中一项为5个字或更多，就放不下了。那末我们就必要让它的宽度能够跟着内容的增减而变更，这就是css自顺应宽度菜单。上面我们讲一下自顺应宽度按钮，和菜单道理是一样，由于自顺应宽度菜单在《老手罕见成绩》中已讲过了，假如学会自顺应按钮，你还不会制造自顺应菜单的话，请浏览http://www.ckuyun.com/div_css/898.shtml。
你是不是还记得在第五章时进修的css按钮实例（以下图），事先只做了一个按钮，它这里是三个按钮，并且宽度纷歧样，明天我们还以这个按钮为基本，制造宽度自应顺应的按钮。
那末它的完成本来是甚么？我们看下边一张图。要想完成自顺应宽度，必要在笔墨上增添一个帮助标签，如span，分离在a上和span上设置背景，一个左边对齐，一个右边对齐，以下的道理图，
四条帮助线内为一个按钮元素，绿色部分为span，然后界说它的背景图片靠右边对齐，而左边的部分为a的背景图片，界说靠左边对齐。当笔墨多时，会把span撑开，这完成了自顺应宽度的按钮了。这里必要一张以下的图片，它的宽度要宽于你所使用的最宽宽度，如许才干显现一般，同时依据之前进修的cssSprites手艺，把背景图片和鼠标经由图片放到一张图片上。
拿第五章css按钮的例子代码举行修正，先改成背景图片利用上图，再增添两个字数不等按钮，并在笔墨上增添span标签
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">a{display:block;height:34px;width:107px;line-height:2;text-align:center;background:url(/upload/2010-08/17/091722_btn_bg.gif)no-repeat0px0px;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-repeat0px-37px;}</style></head><body><p><ahref="#"><span>收费注册</span></a><ahref="#"><span>登录</span></a><ahref="#"><span>在淘宝网上开店</span></a></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
预览显现效果以下所示，因背景图片对照长，以是右边显现不太友爱，下一步就必要把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-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-left:18px;}
aspan{display:block;background:url(btn_bg.gif)no-repeatright0px;padding-right:20px;}
a:hover{background:url(btn_bg.gif)no-repeat0px-37px;}
a:hoverspan{background:url(btn_bg.gif)no-repeatright-37px;}
对照以上代码，大概你已发明，本来a顶部的3px给往失落了，把高度改成37px了，行高也改成37px了，为何这么做，人人下手试下就分明了。然后设置a下span的背景图片，span默许是内联元素，以是需先转换为块级元素；别的需增添鼠标经由时span的款式。显现效果以下，对照一下实例图，是否是完成了如许的效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">a{display:block;float:left;margin:5px;height:37px;line-height:37px;text-align:center;background:url(/upload/2010-08/17/091722_btn_bg.gif)no-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-left:18px;}aspan{display:block;background:url(/upload/2010-08/17/091722_btn_bg.gif)no-repeatright0px;padding-right:20px;}a:hover{background:url(/upload/2010-08/17/091722_btn_bg.gif)no-repeat0px-37px;}a:hoverspan{background:url(/upload/2010-08/17/091722_btn_bg.gif)no-repeatright-37px;}</style></head><body><p><ahref="#"><span>收费注册</span></a><ahref="#"><span>登录</span></a><ahref="#"><span>在淘宝网上开店</span></a></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
然后你要知道，DIV+CSS是高成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这里，你一定对DIV+CSS的好处也有一定的了解了。
作者: 活着的死人    时间: 2015-1-18 06:47
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
作者: 海妖    时间: 2015-1-24 12:09
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
作者: 山那边是海    时间: 2015-2-1 11:53
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 柔情似水    时间: 2015-2-7 07:24
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者: 再现理想    时间: 2015-2-21 03:21
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
作者: 谁可相欹    时间: 2015-3-6 19:54
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者: 仓酷云    时间: 2015-3-13 08:24
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
作者: 透明    时间: 2015-3-20 18:14
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2