css布局实现一个简单简洁主机后台管理页面代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个简单简洁主机后台管理页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=0;user-scalable=yes">

    <style>
        @charset "utf-8";
/* CSS Document */
*{margin:0;padding:0; }
html, body, div, h1, h4, ul, dl, li, dt, dd, p, form, table, td, span, input {margin:0;padding:0;}
body {  color:#7c7c7c; font-family:"Microsoft Yahei","微软雅黑",Arial,Helvetica,sans-serif;  font-size: 14px; background:#fff; line-height:24px; min-width: 1260px; overflow:auto}
li { list-style:none; }
i { font-style:normal; font-weight:normal; }
a {  color: #fff; text-decoration: none; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;}
a:hover { cursor:pointer; text-decoration:none; color:#666;}
.clear { clear:both; line-height:0px; overflow:hidden; zoom:1; font-size:0px; content:'.'; }
.clera { clear:both; line-height:0px; overflow:hidden; zoom:1; font-size:0px; content:'.'; }
img{ padding:0; margin:0; display:block;}
h1, h4{ font-weight:normal; font-size:12px;}
.fl{float:left;}
.fr{float: right;}
img, input{border:0; display:inline-block; outline:none; font-family:"Microsoft Yahei","微软雅黑"}
div{ display:block;}

.top{ width:100%; height:40px; line-height:40px; background:#3c3d40; color:#eee; font-size:12px; position:relative; z-index:4}
.top-logo{ padding:0 20px 0 20px; line-height: 14px; margin-top: 13px; font-size: 14px; font-weight: bold; color: #fff; border-right:1px solid #4d4e51;}
.top-logo.fy-logo{  line-height:40px; margin-top:0; padding-left:20px}
.top .top-side{ padding-right:14px; cursor:pointer; padding:0 20px 0 38px; background: url(../images/idc-spri.png) no-repeat; background-position: 16px 13px; position:relative; z-index:4}
.top .top-side i{background-position:-118px -4px; display:inline-block; margin-left:8px; width:6px; height:4px; vertical-align:2px;}
.top-down { position:relative;}
.top-int{ border-left:1px solid #4d4e51; color:#eeeeee; position:relative;}
.top-int ul{display:none; width:100%; border-top:1px solid #e5e5e5; position:absolute; left:0; top:39px;  text-align:center;  background: #fff;-webkit-box-shadow: 1px 2px 2px #b8b8b8;-moz-box-shadow: 1px 2px 2px #b8b8b8;box-shadow: 1px 2px 2px #b8b8b8; z-index:3}
.top-int a{  height:40px; line-height:40px; background:#fff; color:#333}
.top-int a:hover{ color:#ff6800}
.top-int .top-side{ background:none; padding:0 20px;}
.megmeau{ width:100%; height:60px; line-height:60px; background:#fff; border-bottom:1px solid #dcdcdc; -webkit-box-shadow:0 0px 6px rgba(0,0,0,.2); -moz-box-shadow:0 0px 6px rgba(0,0,0,.2); box-shadow:0 0px 6px rgba(0,0,0,.2); position:relative; z-index:3}
.megmeau-tit{ color:#bbbbbb; font-size:20px; padding:0 0 0 20px; width:170px;}
.megmeau-but a{ width:90px; height:30px; display:inline-block; border:1px solid #49b719; background:#4bcc14; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; line-height:30px; text-align:center; font-size:13px; margin-left:5px;}
.megmeau-but a:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.8; color:#fff;}
.megmeau-but a.a-f{ background:#db3e26; border-color:#e4432b}

.main{ background:#f4f4f4;}
.main-l{ width:219px; margin-right:-100%; background:#f4f4f4; position:relative; z-index:2}
.main-l ul{ width:100%;}
.main-l ul li{ width:100%; border-bottom:1px solid #e7e7e7;}
.main-l ul li a{ width:217px; border-left:2px solid #f4f4f4; background:#f4f4f4; color:#333333; font-size:14px; display:block; text-indent:17px; line-height:38px;}
.main-l ul li a:hover{ color:#ff6800;}
.main-l ul li.on a{ background:#fff; color:#ff6800; border-color:#ff6800;}
.main-r{ width:100%; position:relative; z-index:1}
.main-r-m{ margin-left: 219px; padding: 20px 20px 30px 20px; background-color: #fff;  border-left:1px solid #dcdcdc;}
.r-m-tit{ margin-bottom:15px; float:left; width:100%}
.r-m-tit h4{ color:#666666; font-size:16px; line-height:16px; border-left:1px solid #dbdbdb; padding-left:11px; margin-top:8px;}
.main-r-m .nswer{ float:left; position:relative; margin-right:1%; margin-top:5px;}
.main-r-m .nswer i{width: 14px;height: 14px; display: block; cursor: pointer; }
.main-r-m .nswer dl { position: absolute; background: #fefee7; width:200px; left:50%; bottom:24px; margin-left:-100px; display:none}
.main-r-m .nswer dl dt { font-size: 12px; color: #666; padding:7px 10px; line-height: 18px; border: 1px solid #b9b9b9; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.main-r-m .nswer dl dd {width: 12px; height: 8px;}
.m-con table{width: 100%;border-collapse: collapse;border-spacing: 0;background: #fff; color: #666; font-size:12px; float:left;}
.m-con table tr{ border:1px solid #eeeeee;}
.m-con table td{ border:0; padding:7px 0;}
.m-con-o{width:100%}
.m-con-o-m{ width:100%; margin-bottom:20px;}
.m-con-o-m-tit{ width:100%; background:#f6f7fb; border:1px solid #eeeeee; height:40px; line-height:40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float:left;}
.m-con-o-m-tit p{ font-size:14px; color:#333333; text-indent:15px;}
.m-con .m-con-o-m table td{ width:50%}
.m-con-o-m table p{ float:left; text-indent:15px;}
.m-con-o-m table span{ float:left; color:#333; margin:0 3% 0 1%}
.m-con-o-m table span.span-o{ color:#ff6800}
.m-con-o-m table a{ float:left; color:#2768d2; font-size:12px; margin-right:2%}
.m-con-o-m table a:hover{ text-decoration:underline;}

/*数据库*/
.database-bg{ background:#f2f2f2; padding:20px;}
.database-main{ border:1px solid #ececec}
.database-main.main,.database-main .main-l{ background:#f8f8f8}
.database-main .main-l ul li{ border-bottom-color:#f8f8f8}
.database-main .main-l ul li.on{ border-bottom-color:#ececec}
.database-main .main-l ul li a{background:#f8f8f8}
.database-main .main-l ul li.on a{ background:#fff; width:218px;}
.megmeau-but p{ display:inline-block; font-size:12px; color:#333}
.megmeau-but p span{ color:#55911f;}
.megmeau-but a{ padding:0 10px; width:inherit;}
    </style>


</head>

<body>

    <div class="top">

        <h1 class="top-logo fy-logo fl">LOGO</h1>

        <div class="top-int top-down fr">
            <p class="top-side">
                <span>
               wwwwww
            </span><i></i>
            </p>
           
        </div>

        <div class="clear">
        </div>
    </div>


    <div class="megmeau">
        <p class="megmeau-tit fl">数据库管理</p>
        <ul class="megmeau-nav fl">

            <div class="clear"></div>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="database-bg">
        <div class="main database-main">


            <div class="main-l fl">
                <ul id="left_ul_on">
                    <li class="on"><a href="">基本信息</a></li>
                    <li><a href="">备份还原</a></li>
                    <li><a href="">提交问题</a></li>
                    <li><a href="">问题列表</a></li>





                </ul>
            </div>
            <div class="main-r fl">
                <div class="main-r-m" style="min-height: 529px;">
                    <!--主机管理 begin-->
                    <div class="m-con">


                        <div class="r-m-tit">
    .........完整代码请登录后点击上方下载按钮下载查看