纯CSS后台框架

实质就是一个切换卡，关键是如何让鼠标从按钮移到面板上时，面板不会消失。用到div:hover与CSS3圆角。

 <div class="main_console">
            <div class="main_column">
                <div class="column_title">AAAAA</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">AAAA的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">BBBB</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">BBBB的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">CCCC</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">CCCC的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">DDDD</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">DDDD的面板</div>
                </div>
            </div>
            <div class="main_client"></div>
        </div>

   
            .main_console{
                border-top:30px solid #c2e1f8;
                padding: 40px;
                height:500px;
                background: #c2e1f8;
                border-radius:10px;
                position:relative;
            }
            .main_client {
                position:absolute;
                800px;
                height:500px;
                top:0;
                left:150px;
                z-index:1;
                border-radius:10px;
                background:#8ed2f3;
            }

            .column_title{
                150px;
                height:30px;
                border-top:1px solid #fff;
                border-left:1px solid #fff;
                border-bottom:1px solid #3183a1;
                line-height:30px;
                text-align:center;
                color:#3183a1;
                font-size:12px;
            }

            .main_column:hover .column_title{
                background:#8ed2f3;
                color:#fff;
            }
            /*.main_panel_wraper的作用是用于防止它移到面板上时面板立即消失*/
            .main_panel_wraper{
                position:absolute;
                left:148px;/*注意这里，一定要把它与main_column处于交集状态*/
                top:0;
                z-index:2;
                display:none;
                800px;
                height:500px;
            }
            .main_column:hover .main_panel_wraper{
                display:block;
            }
            /*真正用于放置内容的地方*/
            .main_panel{
                780px;
                height:480px;
                border-radius:10px;
                margin:10px;
                background:#dff9fb;
            }

<!DOCTYPE HTML>
<html>
    <head>
        <title>纯CSS后台框架 by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
           .main_console{
               border-top:30px solid #c2e1f8;
                padding: 40px;
                background: #c2e1f8;
                height:500px;
                border-radius:10px;
                position:relative;
            }
            .main_client {
                position:absolute;
                800px;
                height:500px;
                top:0;
                left:150px;
                z-index:1;
                border-radius:10px;
                background:#8ed2f3;
            }

.column_title{
                150px;
                height:30px;
                border-top:1px solid #fff;
                border-left:1px solid #fff;
                border-bottom:1px solid #3183a1;
                line-height:30px;
                text-align:center;
                color:#3183a1;
                font-size:12px;
            }

.main_column:hover .column_title{
                background:#8ed2f3;
                color:#fff;
            }
            /*.main_panel_wraper的作用是用于防止它移到面板上时面板立即消失*/
            .main_panel_wraper{
                position:absolute;
                left:148px;/*注意这里，一定要把它与main_column处于交集状态*/
                top:0;
                z-index:2;
                display:none;
                800px;
                height:500px;
            }
            .main_column:hover .main_panel_wraper{
                display:block;
            }
            /*真正用于放置内容的地方*/
            .main_panel{
                780px;
                height:480px;
                border-radius:10px;
                margin:10px;
                background:#dff9fb;
            }
        </style>
    </head>
    <body>
        <div class="main_console">
            <div class="main_column">
                <div class="column_title">AAAAA</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">AAAA的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">BBBB</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">BBBB的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">CCCC</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">CCCC的面板</div>
                </div>
            </div>
            <div class="main_column">
                <div class="column_title">DDDD</div>
                <div class="main_panel_wraper">
                    <div class="main_panel">DDDD的面板</div>
                </div>
            </div>
            <div class="main_client"></div>
        </div>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width;initial-scale=1.3;maximum-scale=1.0;user-scalable=0;" />
<title>CSS_Tab</title>
<style type="text/css">body {
	margin:0;
	font-size:12px;
	background:#666;
}
#box {
	400px;
	height:300px;
	margin:100px auto 0;
}
#tab_nav {
	margin:0;
	padding:0;
	height:25px;
	line-height:24px;
}
#tab_nav li {
	float:left;
	margin:0 3px;
	list-style:none;
	border:1px solid #999;
	border-bottom:none;
	height:24px;
	60px;
	text-align:center;
	background:#FFF;
}
a {
	font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
	color:green;
	text-decoration:none;
}
a:hover {
	color:red;
}
#tab_content {
	398px;
	height:273px;
	border:1px solid #999;
	font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	background:#FFF;
	overflow:hidden;
}
#t_1, #t_2, #t_3 {
	100%;
	height:273px;
}
</style>
</head>
<body>
<div id="box">
  <ul id="tab_nav">
    <li><a href="#t_1">tab_1</a></li>
    <li><a href="#t_2">tab_2</a></li>
    <li><a href="#t_3">tab_3</a></li>
  </ul>
  <div id="tab_content">
    <div id="t_1">tab_aaaa</div>
    <div id="t_2">tab_bbbb</div>
    <div id="t_3">tab_cccc</div>
  </div>
</div>
</body>
</html>