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打造黑色简洁菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> * { margin:0; padding:0; } body { font-family:宋体; font-size:12px; background:#666; } #main_nav { list-style:none; margin:100px; } #main_nav li { float:left; } #main_nav li a { display:block; padding: 10px 20px; background:#000; color:#FFF; border:1px solid #000; text-decoration:none; text-transform:capitalize; } #main_nav li a:hover { background:#ccc; color:#000; border:1px solid #000; } </style> </head> <body> <ul id="main_nav"> <li><a href="/">Ajax/JavaScript下载</a></li><li><a href="/">ExtJS实例</a></li><li><a href="/">jQuery代码</a></li><li><a href="http://www.webdm.cn">CSS特效</a></li><li><a href="/">HTML精选</a></li><li><a href="http://www.webdm.cn">在线编辑器</a></li><li><a href="/">Mootools举例</a></li><li><a href="/">Prototype框架</a></li> </ul> </body> </html> <br> <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
代码来自:http://www.webdm.cn/webcode/f0f6fcc0-eb54-4f83-af9a-6863b67bdfbc.html