iteye/csdn/cnblogs后台管理风格的tab
仅用ul li 元素完成
图片效果:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>iteye-tab</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { text-align: left; font-family: Helvetica,Tahoma,Arial,sans-serif; font-size: 12px; line-height: 1.5; color: black; } .menu { text-align: center; border-bottom: 1px solid rgb(51, 102, 170); height: 31px; padding-left:12px; margin:60px 0 0 12px; } .menu li { width:120px; margin-left:12px; list-style: none outside none; float: left; } .menu a { display: block; color: black; text-decoration: none; background: none repeat scroll 0% 0% rgb(221, 221, 221); padding: 0.5em 2em; border-color: rgb(51, 102, 170) rgb(51, 102, 170) rgb(255,255,255); border-width: 1px 1px medium; border-style: solid solid none; border-top-left-radius: 3px; border-top-right-radius: 4px; } .menu li.activetab a, ul.menu a:hover { background: none repeat scroll 0% 0% rgb(255, 255, 255); border-bottom: 1px solid white; } </style> </head> <body> <ul class="menu"> <li><a href="#">首页</a></li> <li class="activetab"><a href="#">通讯录</a></li> <li><a href="#">应用中心</a></li> <li><a href="#">收件箱</a></li> <li><a href="#">写信给</a></li> </ul> </body> </html>