ul,li结构的横向CSS菜单,有立体感的按钮菜单

发布时间：2018-08-14 21:20:28 所属栏目：政策来源：站长网

导读：横向有立体感的CSS按钮式菜单，采用了CSS常用的UL/LI结构，布局方便，将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。代码演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w

　　横向有立体感的CSS按钮式菜单，采用了CSS常用的UL/LI结构，布局方便，将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。

　　代码演示：

<!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按钮式菜单</title> <style> #navigation { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 4px; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { margin-right: 2px; padding: 3px 10px 2px 10px; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } </style> </head> <body id="contact"> <div id="navigation"> <ul> <li class="recipes"><a href="#">源码爱好者</a></li> <li class="contact"><a href="#">开源源码</a></li> <li class="articles"><a href="#">网页特效</a></li> <li class="articles"><a href="#">官方博客</a></li> <li class="articles"><a href="#">友情链接</a></li> <li class="buy"><a href="#">联系我们</a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!