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

发布时间：2018-08-13 22:01:08 所属栏目：政策来源：站长网

导读：从一本书籍的实例中剥出来的CSS菜单制作教程，经过了改动，删除了过多冗余代码，更简洁干净了。这款菜单实际上是半CSS结构，因为使用了传统的表格标签，用表格固定了菜单元素，呵呵，有些落后，不过菜单看上去挺美。演示： !DOCTYPE html PUBLIC -//W3C//

　　从一本书籍的实例中剥出来的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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：安阳站长网）

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