NO.47 【转】纯CSS选项卡 - 00fairy00

实质就是一个切换卡，关键是如何让鼠标从按钮移到面板上时，面板不会消失。用到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;

    width:800px;

    height:500px;

    top:0;

    left:150px;

    z-index:1;

    border-radius:10px;

    background:#8ed2f3;

}

.column_title{

    width: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;

    width:800px;

    height:500px;

}

.main_column:hover .main_panel_wraper{

    display:block;

}

/*真正用于放置内容的地方*/

.main_panel{

    width:780px;

    height:480px;

    border-radius:10px;

    margin:10px;

    background:#dff9fb;

}
 
代码<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.main_console{
    border-top:30px solid #c2e1f8;
    padding: 40px;
    height:500px;
    background: #c2e1f8;
    border-radius:10px;
    position:relative;
}
.main_client {
    position:absolute;
    width:800px;
    height:500px;
    top:0;
    left:150px;
    z-index:1;
    border-radius:10px;
    background:#8ed2f3;
}
 
.column_title{
    width: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;
    width:800px;
    height:500px;
}
.main_column:hover .main_panel_wraper{
    display:block;
}
/*真正用于放置内容的地方*/
.main_panel{
    width: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>

posted on 2011-02-17 17:00 00fairy00 阅读(321) 评论(0) 收藏举报

刷新页面返回顶部