小女巫 发表于 2015-1-16 10:39:01

CSS教程之CSS网页结构进门教程14:纵向下拉及多级弹出式菜单

通常把清除浮动写成单独的
放在所有浮动div的最下方。

[*]
[*]
本站2010年9月新增《十天学会web尺度(div+css)》系列教程,接待进修!
学完了上节教程,我想关于这于这节的进修就简单很多了。
横向菜单是经由过程div及JavaSprict完成下拉把持,纵向菜单呢?谜底是一定的。我们如今要做的就是一个纵向菜单,css代码:
ul{margin:0;padding:0;list-style:none;width:120px;border-bottom:1pxsolid#ccc;font-size:12px;}
ulli{position:relative;}
liul{position:absolute;left:119px;top:0;display:none;}
ullia{width:108px;display:block;text-decoration:none;color:#666666;background:#fff;padding:5px;border:1pxsolid#ccc;border-bottom:0px;}
ullia:hover{background-color:#ddd;}
/*办理ul在IE下显现不准确的成绩*/
*htmlulli{float:left;height:1%;}
*htmlullia{height:1%;}
/*end*/
li:hoverul,li.overul{display:block;}

css代码的编写基础上坚持了与横导游航不异的思绪,分歧的是,为了完成导航中的子导航与主导航在完成鼠标交互的同时,坚持其绝对地位分歧,我们利用了对ulli{}利用了position:relative;使其定位体例转为绝对定位。而对liul{}即子导航接纳了position:absolute;相对导航的相对定位体例,了其鼠标交互后的地位分歧。
大概您已发明,这里在css代码未尾增添了一段正文的界说*htmlulli与*htmlullia。这里用到的是CSShack,这是由于分歧的扫瞄器对代码的剖析分歧,用来完成在各扫瞄器上显现不异的效果而利用的。这段代码只要IE扫瞄器能剖析,别的扫瞄器置若罔闻。有关csshack的更多教程,请在www.ckuyun.com网站外调找。
本例的终极显现效果以下:
<!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{margin:0;padding:0;list-style:none;width:120px;border-bottom:1pxsolid#ccc;font-size:12px;}ulli{position:relative;}liul{position:absolute;left:119px;top:0;display:none;}ullia{width:108px;display:block;text-decoration:none;color:#666666;background:#fff;padding:5px;border:1pxsolid#ccc;border-bottom:0px;}ullia:hover{background-color:#ddd;}/*办理ul在IE下显现不准确的成绩aa25.cn*/*htmlulli{float:left;height:1%;}*htmlullia{height:1%;}/*end*/li:hoverul,li.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><li><ahref="">摇滚</a></li><li><ahref="">纯音乐</a></li><li><ahref="">古典金曲</a></li><li><ahref="">影戏原声</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
以下的内容是一位网友的DIVCSS编码笔记,是值得大家学习的,在实际工作与开发中,将工作中的点滴记录下来,回首这些过往,你也会收获很多

第二个灵魂 发表于 2015-1-18 07:44:32

由CS4版本开始,则转用WebKit排版引擎(亦即GoogleChrome和AppleSafari浏览器所用的排版引擎)作为网页预览。

兰色精灵 发表于 2015-1-26 16:36:01

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

愤怒的大鸟 发表于 2015-2-4 20:47:52

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.

海妖 发表于 2015-2-10 10:09:22

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

再见西城 发表于 2015-3-1 10:14:37

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。

金色的骷髅 发表于 2015-3-10 17:28:53

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

小妖女 发表于 2015-3-17 09:34:25

俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。

灵魂腐蚀 发表于 2015-3-24 06:33:11

学Dreamweaver技术的过程其实是一个增加信心的过程。
页: [1]
查看完整版本: CSS教程之CSS网页结构进门教程14:纵向下拉及多级弹出式菜单