使用dl,dt,dd制作CSS垂直菜单
- 2021-12-23
- 来源/作者： onegreen.org / 佚名
- 2 次浏览
我一直在提倡不要使用列表来制作菜单，而且我一直在研究可以替换用列表制作菜单的方法。现在我依然反对使用无序列表来制作菜单，但我做了让步，用释义列表来制作CSS菜单比起无序列表要好多了。
通过释义列表你有两个不同的方法可以让你选择使用（或许是三个）
- 1.使用"dt"来作为导航标题，"dd"则作为导航链接
- 2.使用"dt"作为导航链接，"dd"则用来为连接做进一步说明。
- 3.使用"dt"作导航链接，"dd"作为连接的说明并可以在"dd"文字区域加上额外的链接。
比起无序列表使用释义列表可以更灵活且更容易地定义标签的样式，你甚至可以只针对连接进行样式化并忽略"dl"和"dt"它们的样式，或许"dd"的默认缩进是唯一需要删除的样式。
上面的菜单在"dl"里有张背景图片，在"dt"和"dd"也有背景图片，在碰到选择大号字体的时候这样就不会发生问题。
CSS代码：
| #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(media/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(media/arrow.gif) no-repeat 10px 10px; width:125px; } #gallery a:hover {background: #258 url(media/arrowr.gif) no-repeat 11px 10px; color:#9cf;} ol li {font-size:11px;} |
HTML代码：
| <div id="menu"> <dl id="gallery"> <dt>网站运营</dt> <dd><a href="http://webmaster.syku.net/exp/" title="建站经验">建站经验</a></dd> <dd><a href="http://webmaster.syku.net/plan/" title="策划盈利">策划盈利</a></dd> <dd><a href="http://webmaster.syku.net/story/" title="站长聊吧">站长聊吧</a></dd> <dd><a href="http://webmaster.syku.net/qianyan/" title="站长必读">站长必读</a></dd> <dd><a href="http://webmaster.syku.net/wzyh/" title="网站优化">网站优化</a></dd> <dd><a href="http://webmaster.syku.net/wztg/" title="网站推广">网站推广</a></dd> </dl> </div> |
