纯CSS制作菜单实例：一个红色黑边的纵向菜单

　　从一本书籍的实例中剥出来的CSS菜单制作教程，经过了改动，删除了过多冗余代码，更简洁干净了。这款菜单实际上是半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> <title>CSS菜单制作教程：黑色纵排菜单</title> <style> #navigation { width: 180px; padding: 0; margin: 0; border-collapse: collapse; } #navigation td { height: 26px; border-bottom: 2px solid #460016; background-color: #FFDFEA; color: #460016; } #navigation a:link, #navigation a:visited { margin-left: 12px; color: #460016; background-color: transparent; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; } </style> </head> <body> <table id="navigation"> <tr> <td> <a href="#">Recipes</a> </td> </tr> <tr> <td> <a href="#">Contact Us</a> </td> </tr> <tr> <td> <a href="#">Articles</a> </td> </tr> <tr> <td> <a href="#">Buy Online</a> </td> </tr> </table> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

纯CSS制作菜单实例：一个红色黑边的纵向菜单

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

纯CSS制作菜单实例：一个红色黑边的纵向菜单

由 dawei

相关文章

导航界面推荐广告？蔚来回应 不会用车机屏幕展开广告业务

第四届进博会进入布展阶段 首批展品已进入场

他们是数字经济领域的弄潮儿，2021年度数字新浙商榜单发布

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

导航界面推荐广告？蔚来回应不会用车机屏幕展开广告业务

第四届进博会进入布展阶段首批展品已进入场