iteye/csdn/cnblogs后台管理风格的tab-优快云博客

本文介绍了一种使用纯CSS实现的类似iteye、csdn、cnblogs等网站后台管理风格的Tab菜单效果。通过简单的HTML结构（仅使用ul和li元素），结合精心设计的CSS样式，实现了美观且响应式的Tab导航栏。

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>