zoukankan      html  css  js  c++  java
  • 纯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;
                }
    


  • 相关阅读:
    【刷题】UOJ #274 【清华集训2016】温暖会指引我们前行
    【刷题】BZOJ 3669 [Noi2014]魔法森林
    【刷题】BZOJ 2594 [Wc2006]水管局长数据加强版
    (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM
    (84)Wangdao.com第十八天_JavaScript Promise 对象
    (83)Wangdao.com第十七天_JavaScript 定时器
    (82)Wangdao.com第十六天_JavaScript 异步操作
    (81)Wangdao.com第十六天_JavaScript 严格模式
    (80)Wangdao.com第十六天_JavaScript Object 对象的相关方法
    (79)Wangdao.com第十五天_JavaScript 对象的继承_prototype原型对象_封装_函数式编程
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1955486.html
Copyright © 2011-2022 走看看