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;
                }
    


  • 相关阅读:
    excel多个sheet表拆分成独立的excel文件
    mysql导入报错【The MySQL server is running with the --event-scheduler=DISABLED】
    nginx环境下配置nagios-关于perl-fcgi.pl
    nginx环境下配置nagios-关于commands.cfg
    Linux非常有用的命令
    windows和linux下如何远程获取操作系统版本和主机名
    tomcat生成调试日志配置
    python批量操作Linux服务器脚本,ssh密码登录(执行命令、上传、下载)(一)
    python批量操作Linux服务器脚本,key登录(执行命令、上传、下载)(二)
    DOS批量拷贝本地目录到远程主机(定时执行)
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1955486.html
Copyright © 2011-2022 走看看