纯CSS后台框架

最新推荐文章于 2024-11-13 10:31:31 发布

weixin_33736048

最新推荐文章于 2024-11-13 10:31:31 发布

阅读量110

点赞数

文章标签： xhtml

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

运行代码

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

运行代码