|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
首先你要知道，当你开始学习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{padding:0;margin:0;list-style:none;}
li{float:left;width:100px;}
我们但愿导航是横向的经由过程对li设置float:left属性，将一切的li向左浮动，构成了横向的结构，并实验利用每一个li的宽度为100px，持续编写代码：liul的界说在这里所指的是一切li上面的ul元素，除顶级的ul元素外，一切li上面界说的ul元素都将遭到这部分款式的界说。利用display:none让这部分被埋没起来。css中的的有元素基础上都可使用display属性来把持显现仍是埋没。li:hoverul,.overul{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;}
<!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"><!--//--><![CDATA[//><!--startList=function(){if(document.all&&document.getElementById){navRoot=document.getElementById("nav");for(i=0;i<navRoot.childNodes.length;i++){node=navRoot.childNodes;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为我们提供的标签。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:39:01
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-17 10:10:28