不容错过的漂亮界面框架-IN ADMIN PANEL

 查看演示  website  立即下载

Admin Panel 为我们提供了一个后台界面的框架。界面真的是很不错，相信大家一定会喜欢。

预览图

width="474" height="300" title="界面的框架,Admin Panel " alt="界面的框架,Admin Panel "/>

框架构成

首先我们来看看Admin Panel的整体框架

<div id="main_container">  
    <div class="header">
        顶部
    </div>
    <div class="main_containt">
        <div class="menu">
            菜单
        </div>
        <div class="center_content">   
            <div class="left_content">
                左侧
            </div>
            <div class="right_content">
                右侧
            </div>
        </div>
    </div>
    <div class="footer">
         
    </div>
</div>		

整个框架符合我们大多数的后台框架，顶部、菜单、左侧、右侧、底部。
座椅我们在实际的运用中可以将这个作为模板，需要改变的只是右侧的内容，其它部分都应该保持一致即可。
接下来我就讲解每个部分的标签
顶部header
这里面包含了左边的Logo图片，右边的一个数字模拟时钟（当然你也可以去掉）和登陆的用户状态信息。

<div class="header">
    <div class="logo">
        <a href="#"><img src="images/logo.gif" alt="" title="" border="0"></a>
    </div>
    <div class="right_header">
        Welcome Admin, <a href="#">Visit site</a> | <a href="#" class="messages">(3) Messages</a> | <a href="#"class="logout">Logout</a>
    </div>
    <div id="clock_a">
        <div style="position:relative;margin:auto;width:82px;height:82px;overflow:visible;">   
            <div id="cnum12"style="position:absolute;top:-16px;left:8.999999999999995px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
                <span style="font-size:60%;">||</span>
            </div>
            <div id="cnum11"style="position:absolute;top:-12.650635094610958px;left:-3.5000000000000107px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;"> ?
            </div>
            <div id="cnum10"style="position:absolute;top:-3.5000000000000036px;left:-12.650635094610966px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;"> ?
            </div>
            <div id="cnum9"style="position:absolute;top:9.000000000000004px;left:-16px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">        -
            </div>
            <div id="cnum8"style="position:absolute;top:21.500000000000007px;left:-12.650635094610962px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">   ?
            </div>
            <div id="cnum7"style="position:absolute;top:30.65063509461097px;left:-3.4999999999999947px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">    ?
            </div>
            <div id="cnum6"style="position:absolute;top:34px;left:9.000000000000002px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
                <span style="font-size:60%;">|</span>
            </div>
            <div id="cnum5"style="position:absolute;top:30.65063509461097px;left:21.499999999999996px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
            </div>
            <div id="cnum4"style="position:absolute;top:21.499999999999996px;left:30.65063509461097px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
            </div>
            <div id="cnum3" style="position:absolute;top:9px;left:34px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
            </div>
            <div id="cnum2"style="position:absolute;top:-3.5px;left:30.650635094610966px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
            </div>
 
            <div id="cnum1"style="position:absolute;top:-12.65063509461097px;left:21.499999999999996px;visibility:visible;width:32px;height:32px;font-family:helvetica, arial, sans-serif;font-size:6.25px;color:#FFFFFF;text-align:center;padding-top:10px;z-index:1000;">
            </div>
            <div id="cmin22"style="position:absolute;top:31.798373876248842px;left:45.92324335849338px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">      
            </div>
            <div id="cmin21"style="position:absolute;top:31.489356881873896px;left:44.97218684219823px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">  
            </div>
 
            <div id="cmin20"style="position:absolute;top:31.18033988749895px;left:44.02113032590307px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin19"style="position:absolute;top:30.871322893124002px;left:43.07007380960792px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin18"style="position:absolute;top:30.562305898749052px;left:42.119017293312766px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin17"style="position:absolute;top:30.253288904374106px;left:41.16796077701761px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin16"style="position:absolute;top:29.94427190999916px;left:40.21690426072246px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin15"style="position:absolute;top:29.63525491562421px;left:39.265847744427305px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin14"style="position:absolute;top:29.326237921249263px;left:38.31479122813215px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin13"style="position:absolute;top:29.017220926874316px;left:37.363734711837px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin12"style="position:absolute;top:28.70820393249937px;left:36.412678195541844px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin11"style="position:absolute;top:28.399186938124423px;left:35.46162167924669px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin10"style="position:absolute;top:28.090169943749473px;left:34.510565162951536px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin9"style="position:absolute;top:27.781152949374526px;left:33.55950864665638px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin8"style="position:absolute;top:27.47213595499958px;left:32.60845213036123px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin7"style="position:absolute;top:27.163118960624633px;left:31.657395614066075px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin6"style="position:absolute;top:26.854101966249683px;left:30.706339097770922px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin5"style="position:absolute;top:26.545084971874736px;left:29.755282581475768px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin4"style="position:absolute;top:26.23606797749979px;left:28.804226065180615px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin3"style="position:absolute;top:25.927050983124843px;left:27.85316954888546px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin2"style="position:absolute;top:25.618033988749893px;left:26.902113032590307px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="cmin1"style="position:absolute;top:25.309016994374947px;left:25.951056516295154px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:997;">
                 
            </div>
 
            <div id="chour16"style="position:absolute;top:39.937286823955226px;left:30.7338871927248px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour15"style="position:absolute;top:39.003706397458025px;left:30.375519243179504px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour14"style="position:absolute;top:38.070125970960824px;left:30.017151293634203px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour13"style="position:absolute;top:37.13654554446362px;left:29.658783344088903px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour12"style="position:absolute;top:36.20296511796642px;left:29.300415394543602px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour11"style="position:absolute;top:35.26938469146922px;left:28.942047444998302px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour10"style="position:absolute;top:34.33580426497202px;left:28.583679495453px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour9"style="position:absolute;top:33.40222383847482px;left:28.2253115459077px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour8"style="position:absolute;top:32.46864341197762px;left:27.8669435963624px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour7"style="position:absolute;top:31.535062985480412px;left:27.5085756468171px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour6"style="position:absolute;top:30.60148255898321px;left:27.150207697271803px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour5"style="position:absolute;top:29.66790213248601px;left:26.7918397477265px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour4"style="position:absolute;top:28.73432170598881px;left:26.433471798181202px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour3"style="position:absolute;top:27.800741279491604px;left:26.0751038486359px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour2"style="position:absolute;top:26.867160852994402px;left:25.7167358990906px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="chour1"style="position:absolute;top:25.9335804264972px;left:25.3583679495453px;visibility:visible;width:2px;height:2px;font-size:2px;background-color:#FFFFFF;z-index:998;">
                 
            </div>
 
            <div id="csec22"style="position:absolute;top:46.519247216143725px;left:29.574057197990705px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec21"style="position:absolute;top:45.54109961540992px;left:29.366145507172945px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec20"style="position:absolute;top:44.562952014676114px;left:29.158233816355185px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec19"style="position:absolute;top:43.58480441394231px;left:28.950322125537426px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec18"style="position:absolute;top:42.6066568132085px;left:28.742410434719666px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec17"style="position:absolute;top:41.6285092124747px;left:28.534498743901906px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec16"style="position:absolute;top:40.65036161174089px;left:28.326587053084147px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec15"style="position:absolute;top:39.672214011007085px;left:28.118675362266387px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec14"style="position:absolute;top:38.69406641027328px;left:27.910763671448628px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec13"style="position:absolute;top:37.715918809539474px;left:27.70285198063087px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec12"style="position:absolute;top:36.73777120880567px;left:27.494940289813112px;visibility:visible;width:1px;height:1px;font-size:1px;background-color:#FFFFFF;z-index:999;">
                 
            </div>
 
            <div id="csec11"style="position:absolute;top:

PREVIOUS:
NEXT:
JQUERY页面平滑滚动插件-JQUERY-SMOOTH-SCROLL
完全自定义的LOADING动画-SPIN