汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

采用CSS动态创建多级导航菜单样式

作者:admin 发布时间:2019-08-11
刚写完了 ,但有时候导航出现分级的情况,就需要创建多级导航系统,CSS可以创建静态的多级导航系统,动态的也可以创建,静态多级导航系统仅仅只在列表中加入列表就实现了。也就是 ul ul li /li /ul li /li /ul 的模式。为了做实验,这里也创建一个多级导航系统: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=gb2312 / title CSS创建多级导航菜单样式 /title style type= text/css !--body{width:400px;font-size:14px;}.nav{width:150px;}ul{list-style-type:none;margin:0;padding:0;}ul li{line-height:20px;border-bottom:2px solid #333333;}ul li a:link{border-left:10px solid #000000;border-right:5px solid #999999;color:#0000CC;background-color:#999999;padding:0 0 0 10px;text-decoration:none;display:block;}ul li a:visited{border-left:10px solid #000000;border-right:5px solid #999999;color:#990000;background-color:#999999;padding:0 0 0 10px;text-decoration:none;display:block;}ul li a:hover{border-left:10px solid #000000;border-right:5px solid #999999;color:#FF0000;background-color:#999999;padding:0 0 0 10px;text-decoration:none;background-color:#CCCCCC;display:block;}ul ul{padding-left:12px;color:#FFFFFF;}ul ul li{margin:0;}-- /style   /head body div "" title="" src="http://www.i1766.com/zb_users/upload/201203061311286776.jpg" />CSS创建多级导航菜单样式相关:。
网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1