使用CSS 制作导航菜单
| <html> |
| <head> |
| <title>无需表格的菜单</title> |
| <style> |
| <!-- |
| body{ |
| background-color:#ffdee0; |
| } |
| #navigation { |
| width:200px; |
| font-family:Arial; |
| } |
| #navigation ul { |
| list-style-type:none; /* 不显示项目符号 */ |
| margin:0px; |
| padding:0px; |
| } |
| #navigation li { |
| border-bottom:1px solid #ED9F9F; /* 添加下划线 */ |
| } |
| #navigation li a{ |
| display:block; /* 区块显示 */ |
| padding:5px 5px 5px 0.5em; |
| text-decoration:none; |
| border-left:12px solid #711515; /* 左边的粗红边 */ |
| border-right:1px solid #711515; /* 右侧阴影 */ |
| width:175px; /* xg_超连接以外的部分也触发CSS样式效果 */ |
| } |
| #navigation li a:link, #navigation li a:visited{ |
| background-color:#c11136; |
| color:#FFFFFF; |
| } |
| #navigation li a:hover{ /* 鼠标经过时 */ |
| background-color:#990020; /* 改变背景色 */ |
| color:#ffff00; /* 改变文字颜色 */ |
| } |
| --> |
| </style> |
| </head> |
| <body> |
| <div id="navigation"> |
| <ul> |
| <li><a href="#">Home</a></li> |
| <li><a href="#">News</a></li> |
| <li><a href="#">Sports</a></li> |
| <li><a href="#">Weather</a></li> |
| <li><a href="#">Contact Me</a></li> |
| </ul> |
| </div> |
| </body> |
| </html> |
效果如下：
浙公网安备 33010602011771号