四个角都为弧形的纯CSS圆角导航栏

2024-09-05 12:19:57

字体：大中小

来源：转载

供稿：网友

上、下、左、右四个角都为弧形的纯CSS圆角导航栏，实际上就是一个竖向排列的导航菜单，当鼠标放到某一项的时候会切换背景色，另外导航箭头会消失，以区分当前是在哪一个菜单栏，默认是蓝色风格，四个角用到了图片，请自己下载。

<!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>爱好者首页</dd>	<dd>网站地图</dd>	<dd>网站留言</dd>	<dd>最新更新</dd>	<dd>下载排行</dd>	<dd>网页特效</dd></dl></div></body></html>

上一篇：兼容好的CSS横向导航条

下一篇：像电灯开关一样的竖直菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注