橘黄色的虚线边框CSS垂直菜单代码
代码简介:
个款竖向垂直布局的CSS菜单,不同的是它的菜单项之间用虚线间隔,我们来看它是怎么实现的。它同样是用UL、LI列表打造的菜单,只不过设置菜单的的下边框border的属性为 dashed ,也就是虚线,其实方法非常简单,你可以对照CSS手册,查一下border属性的边框取值,这只是其中之一。
代码内容:
<!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> <title>橘黄色的虚线边框CSS垂直菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> #vertmenu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; width: 160px; padding: 0px; margin: 0px; } #vertmenu h1 { display: block; background-color:#FF9900; font-size: 90%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:159px; } #vertmenu ul { list-style: none; margin: 0px; padding: 0px; border: none; } #vertmenu ul li { margin: 0px; padding: 0px; } #vertmenu ul li a { font-size: 80%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; color: #666666; width:160px; } #vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #eeeeee; } </style> </head> <body> <div id="vertmenu"> <h1>垂直的菜单</h1> <ul> <li><a href="http://www.webdm.cn" tabindex="1">网页代码站</a></li> <li><a href="/" tabindex="2">About Us</a></li> <li><a href="/" tabindex="3">WebDm.cn</a></li> <li><a href="http://www.webdm.cn" tabindex="4">网页特效</a></li> <li><a href="/" tabindex="5">Games</a></li> <li><a href="/" tabindex="6">友情链接</a></li> </ul> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/8852a9ae-b730-46c4-bef8-9206a064972e.html