css布局实现一个简单简洁主机后台管理页面代码
代码语言：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">
<h4 class="fl">
基本信息</h4>
<div class="megmeau-but fr">
<p>
当前数据库状态: <span id="txt_sql_state">
启动</span></p>
<input id="intpt_sq_nme" type="hidden" name="intpt_sq_nme" value="sq_jhm58">
<a id="sql_state" href="javascript:void(0)" onclick="upSqlState(2)" class="a-f">暂停数据库</a>
<a href="javascript:void(0)" onclick="msgHref('')" class="a-o">
Mysql数据管理</a>
</div>
<div class="megmeau-but fr">
</div>
<div class="clear">
</div>
</div>
<div class="m-con-o">
<div class="m-con-o-m">
<div class="m-con-o-m-tit">
<p class="fl">
运行状态</p>
<div class="clear">
</div>
</div>
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div>
<p>
产品编号：</p>
<span>
10229165</span>
<div class="clera">
</div>
</div>
</td>
<td>
<div>
<p>
当前字符集：</p>
<span>
utf8</span>
<div class="clera">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>
产品名称：</p>
<span class="span-o">
香港MySQL5.5(100M)</span>
<div class="clera">
</div>
</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0