ul,li布局的横向CSS菜单,有立体感的按钮菜单

发布时间：2018-08-13 12:08:15 所属栏目：创业来源：站长网

导读：横向有立体感的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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如