Rumah > Artikel > hujung hadapan web > CSS实现有立体感的横向按钮式菜单效果
这篇文章主要为大家介绍了CSS实现有立体感的横向按钮式菜单效果代码,可实现鼠标滑过呈现按钮按下的效果,具有极强的3D立体效果,涉及css基于hover属性的border边框设置技巧,需要的朋友可以参考下
本文实例讲述了CSS实现有立体感的横向按钮式菜单效果代码。分享给大家供大家参考。具体如下:
这是一款横向有立体感的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"> <p 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> </p> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Atas ialah kandungan terperinci CSS实现有立体感的横向按钮式菜单效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!