最简单的css水平菜单

Nov 15, 2004 Author: | Filed under: Uncategorized

初学者可以看看。

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-language" content="gb2312" /> <style type="text/css" media="all"> .menu4 { width: 100%; margin: 1em 0; padding: 0; background: #fff none; } .menu4 ul { margin: 0; padding: 0; list-style-type: none; } .menu4 li { margin: 0; padding: 0; float: left; width: 7em; margin-right: 1em; background: #eee none; text-align: center; } .menu4 a { color:#000; display: block; width: 100%; text-decoration: none; } .menu4 a:hover { background: #ff9 none; } </style> </head> <body> <div class="menu4"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3 (long)</a></li> <li><a href="">Item 4</a></li> </ul> </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]