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; .........完整代码请登录后点击上方下载按钮下载查看