今天来学习CSS网页结构进门教程13：下拉及多级弹出式菜单
首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。[*]
[*]
本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
下拉及弹出式菜单是网站计划中经常使用导航情势，这类菜单情势可以充实使用页面如今空间埋没与显现更多内容，并能对内容举行公道的分类显现，是一种十分优异的导航情势。
初期的下拉或弹出式菜单经由过程埋没的layer或div来完成内容的埋没，经由过程JavaScript剧本来呼应用户的操纵，今朝也接纳JavaScript+div或别的元素的情势来制造此类导航，分歧的是全部导航都将利用切合尺度的css结构来打造，不再利用表格来制造菜单，下拉式菜单是下面提到的横导游航与纵导游航的分离，并且经由过程css关于属性的浩瀚撑持，统一个菜单不再必要多个div互相共同完成，利用css结构来制造下拉菜单，乃至能够间接把持ul或li元素，如今来实验一个最复杂的下拉菜单的制造，必要增补的是，下拉式菜单的完成使用了良多JavaScript手艺，在这里对JavaScript手艺不作过量的语法上的综合懂得，只想经由过程现有的实例来告知人人因为css元素属性的天真性，而利用制造网页上的元素加倍复杂便利。先看一下今朝所计划的导航的XHTML部分代码：
<ulid="nav">
<li><ahref="">文章</a>
<ul>
<li><ahref="">CSS教程</a></li>
<li><ahref="">DOM教程</a></li>
<li><ahref="">XML教程</a></li>
<li><ahref="">FLASH教程</a></li>
</ul>
</li>
<li><ahref="">参考</a>
<ul>
<li><ahref="">XHTML</a></li>
<li><ahref="">XML</a></li>
<li><ahref="">CSS</a></li>
</ul>
</li>
<li><ahref="">BLOG</a>
<ul>
<li><ahref="">全体</a></li>
<li><ahref="">网页手艺</a></li>
<li><ahref="">UI手艺</a></li>
<li><ahref="">FLASH手艺</a></li>
</ul>
</li>
</ul>
<ul>
<li><ahref="">摇滚</a></li>
<li><ahref="">纯音乐</a></li>
<li><ahref="">古典金曲</a></li>
<li><ahref="">影戏原声</a></li>
</ul>
一个尺度的接纳ul布局的菜单组成，但与后面所分歧的是，这里的代码布局触及嵌套，在第一层的li之间拔出了另外一个ul的布局，这就是多级菜单的一个代码组成形式，XHTML代码同意经由过程嵌套元从来完成想要的效果大概布局。下一步，我们实验编写一些复杂的css款式让菜单酿成所但愿的横向式：
ul{padding:0;margin:0;list-style:none;}
li{float:left;width:100px;}
第一步，对导航体系一切ul元素举行基础设置，list-style:none属功能够匡助我们往失落ul中的一切圆点标识。list-style属性具有别的更丰厚的利用办法，将在前面的列表元素中重点懂得。
我们但愿导航是横向的经由过程对li设置float:left属性，将一切的li向左浮动，构成了横向的结构，并实验利用每一个li的宽度为100px，持续编写代码：
liul{display:none;}
liul的界说在这里所指的是一切li上面的ul元素，除顶级的ul元素外，一切li上面界说的ul元素都将遭到这部分款式的界说。利用display:none让这部分被埋没起来。css中的的有元素基础上都可使用display属性来把持显现仍是埋没。
li:hoverul,.overul{display:block;}
li:hoverul界说了li元素下的ul元素。经由过程逗号分开，让这两种情形下都能利用display:block属性，display:block属性和display:none属性恰好相反，一个是埋没，一个是显现，当设置为display:block时，不但其指派的元素将显现，并且还显现成一个块状，假如不举行display:block时，元素只会按本人的内容在屏幕上占据的地区举行显现，而利用display:block时，元素将本人构成一个广块作为本人的点位符，这类设置关于做年夜按钮来讲长短常便利的。
在最下边的预览内代码你能够看到，里边加上了一段js代码，它是用来把持在IE扫瞄器下显现下拉菜单的，原本li:hoverul这句是能够的，但IE对css的撑持还还完美，以是必要借助JS来把持。
上面我们实验给下拉菜单增添一些款式：
ullia{display:block;font-size:12px;border:1pxsolid#ccc;margin-top:2px;margin-left:3px;padding:3px;text-decoration:none;color:#777;}
ullia:hover{background-color:#ddd;}
css结构的下拉菜单把持重点在于对元素的埋没与显现。
<!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"/><title>下拉及多级弹出式菜单www.ckuyun.com</title><scripttype="text/javascript"><!--//--><!;if(node.nodeName=="LI"){node.onmou搜索引擎优化ver=function(){this.className+="over";}node.onmou搜索引擎优化ut=function(){this.className=this.className.replace("over","");}}}}}window.onload=startList;//--><!]]></script><style>ul{padding:0;margin:0;list-style:none;}li{float:left;width:100px;}ullia{display:block;font-size:12px;border:1pxsolid#ccc;margin-top:2px;margin-left:3px;padding:3px;text-decoration:none;color:#777;}ullia:hover{background-color:#ddd;}liul{display:none;}li:hoverul,.overul{display:block;}</style></head><body><ulid="nav"><li><ahref="">文章</a><ul><li><ahref="">CSS教程</a></li><li><ahref="">DOM教程</a></li><li><ahref="">XML教程</a></li><li><ahref="">FLASH教程</a></li></ul></li><li><ahref="">参考</a><ul><li><ahref="">XHTML</a></li><li><ahref="">XML</a></li><li><ahref="">CSS</a></li></ul></li><li><ahref="">BLOG</a><ul><li><ahref="">全体</a></li><li><ahref="">网页手艺</a></li><li><ahref="">UI手艺</a></li><li><ahref="">FLASH手艺</a></li></ul></li></ul><ul><li><ahref="">摇滚</a></li><li><ahref="">纯音乐</a></li><li><ahref="">古典金曲</a></li><li><ahref="">影戏原声</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
此例子只是解说标签的天真使用及css的壮大功效。在实践使用时请参考http://www.ckuyun.com/393.shtml
我们应当活用HTML为我们提供的标签。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 滚动条)层属性--溢出(visible/hidden/scroll/auto)
页:
[1]