四个角都为弧形的纯CSS圆角导航栏
上、下、左、右四个角都为弧形的纯CSS圆角导航栏，实际上就是一个竖向排列的导航菜单，当鼠标放到某一项的时候会切换背景色，另外导航箭头会消失，以区分当前是在哪一个菜单栏，默认是蓝色风格，四个角用到了图片，请自己下载。
当前位置：编程学习 > JS >>
答案：<!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">
#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(/jscss/demoimg/200906/bottom.gif) no-repeat bottom left;}
#menu dt {margin:0; padding: 10px; font-size: 9pt; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(/jscss/demoimg/200906/top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}
#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;
background: #47a url(/jscss/demoimg/200906/arrow.gif) no-repeat 10px 10px; width:125px;
}
#gallery a:hover {background: #258 url(/jscss/demoimg/200906/arrowr.gif) no-repeat 11px 10px; color:#9cf;}
ol li {font-size:11px;}
</style>
</head>
<body>
<div id="menu">
<dl id="gallery">
<dt>精品栏目导航…</dt>
<dd><a href="#" title="">爱好者首页</a></dd>
<dd><a href="#" title="">网站地图</a></dd>
<dd><a href="/guestbook/" title="">网站留言</a></dd>
<dd><a href="#" title="">最新更新</a></dd>
<dd><a href="#" title="">下载排行</a></dd>
<dd><a href="/jscss/" title="">网页特效</a></dd>
</dl>
</div>
</body>
</html>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。