|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
通常把清除浮动写成单独的
放在所有浮动div的最下方。
明天我们入手下手进修《十天学会web尺度(div+CSS)》的下拉及多级弹出菜单，包括以下内容和常识点：
- 带下拉子菜单的导航菜单
- 相对定位和浮动的区分和使用
- css自顺应宽度滑动门菜单
1、带下拉子菜单的导航菜单
下拉菜单在一些企业网站使用尤其普遍，它存在利用便利，占用空间小等特性。之前纵导游航教程中已利用过二级导航，明天制造下横导游航菜单的二级菜单，办法和纵向一样，只不外由纵向改动为横向罢了，上面我们以上一章第二节用图片丑化的横导游航中的实例举行修正。
先在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代码：#menuulliulli{float:none;}
#menuulliullia{background:none;}
#menuulliul{border:1pxsolid#ccc;}
#menuulliulli{float:none;width:85px;background:#eee;margin:0;}
#menuulliullia{background:none;}
#menuulliullia:hover{background:#333;color:#fff;}
再预览一下，是否是基础的款式已完成了。
下一步就该把二级菜单埋没，当鼠标划过期显现出来了。增添以下代码：#menuulliul{display:none;border:1pxsolid#ccc;}
#menuulli:hoverul{display:block;} #menuulli.sfhoverul{display:block;}
<!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上增添以下代码：横向分列，并增添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;}
<!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的好处也有一定的了解了。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:33:57
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-13 08:24:17