虚线边框的CSS垂直菜单

2024-09-05 12:19:46

字体：大中小

来源：转载

供稿：网友

个款竖向垂直布局的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>虚线边框的垂直菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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>主页</li><li>About Us</li><li>Default</li><li>网页特效</li><li>Games</li><li>友情链接</li></ul></div></body></html>

上一篇：完全CSS实现的下拉导航菜单

下一篇：黑色竖排的CSS导航菜单