基于HTML5/CSS3的清新后台管理页面（一）
日期：2014-05-17 浏览次数：20767 次
基于HTML5/CSS3的清爽后台管理页面（一）
后台管理系统是企业级开发中必不可少的组成部分，一般来说其页面是比较简单的，包含登录页面和登录后的管理页面即可。登录之后，可以使用导航树来加载iframe嵌套其它页面。做页面也是程序员比较头疼的问题，那么我们就来看看企业级开发中后台页面的做法。我们使用HTML5/CSS3来简化开发达到清爽效果，但不太适用于IE9以下用户。
首先编写页面的基本骨架：
加入背景的CSS：
设置最小的宽度和高度，渐变背景等信息，可以根据各自的需求进行修改。下面添加header部分：
包含了logo区域和heading区域，heading中包含了title和subtitle两个元素，相应的CSS如下：
这里面heading使用了圆角矩形并设置margin-top为负数，即向上隐藏一部分，同时设置了透明度效果。Title和subtitle仅仅对字体进行调整，那么现在的效果为：
然后设置主面板部分：
这里分为背景和面板两部分，面板又分为左右两侧，先来看背景和左侧的代码设置：
这里也是主要设置背景和图片，并设置一下边框效果等：
这里的图片可以自行替换，这没有什么好说的，那么该右侧部分了，也就是用户名，密码，验证码了：
后台管理系统是企业级开发中必不可少的组成部分，一般来说其页面是比较简单的，包含登录页面和登录后的管理页面即可。登录之后，可以使用导航树来加载iframe嵌套其它页面。做页面也是程序员比较头疼的问题，那么我们就来看看企业级开发中后台页面的做法。我们使用HTML5/CSS3来简化开发达到清爽效果，但不太适用于IE9以下用户。
首先编写页面的基本骨架：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Login Page</title>
</head>
<body>加入背景的CSS：
body{
margin:0px;
padding:0px;
overflow:hidden;
}
#wrapper{
position:absolute;
width:100%;
height:100%;
min-width:1280px;
min-height:680px;
overflow-x:hidden;
overflow-y:hidden;
background-image: -moz-linear-gradient(top,#77D1F6, #2F368F);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6),color-stop(1, #2F368F));
}设置最小的宽度和高度，渐变背景等信息，可以根据各自的需求进行修改。下面添加header部分：
<div id="header"> <div id="logo"></div> <div id="heading"> <div id="title">后台管理系统</div> <div id="subTitle">Ver 1.0</div> </div> </div>
包含了logo区域和heading区域，heading中包含了title和subtitle两个元素，相应的CSS如下：
#header{
height:100px;
width:100%;
}
#logo{
position:absolute;
float:left;
margin-left:5%;
margin-top:30px;
height:40px;
width:160px;
text-align:center;
}
#heading{
position:relative;
float:left;
margin-left:20%;
margin-top:-18px;
height:110px;
width:60%;
border-radius: 18px;
background-color:#1C75BC;
opacity:0.6;
}
#heading #title{
margin-top:40px;
text-align:center;
font-family:微软雅黑;
font-size:24px;
font-weight:bold;
}
#heading #subTitle{
margin-top:10px;
text-align:center;
font-family:Courier New;
}这里面heading使用了圆角矩形并设置margin-top为负数，即向上隐藏一部分，同时设置了透明度效果。Title和subtitle仅仅对字体进行调整，那么现在的效果为：
然后设置主面板部分：
<div id="main"> <div id="mainBg"> <div id="mainPanel"> <div id="left"> <div id="image"></div> </div> </div> </div> </div>
这里分为背景和面板两部分，面板又分为左右两侧，先来看背景和左侧的代码设置：
#main{
margin-top:20px;
height:500px;
width:100%;
}
#mainBg{
position:relative;
float:left;
margin-left:20%;
margin-top:0px;
height:500px;
width:60%;
border-radius: 18px;
background-color:#000000;
opacity:0.5;
}
#mainPanel{
position:relative;
margin:25px;
height:450px;
border-radius: 18px;
background-image: -moz-linear-gradient(top,#EBEBEB, #BFBFBF);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB),color-stop(1, #BFBFBF));
}
#mainPanel #left{
float:left;
border-right:2px solid #F6F6F6;
position:relative;
top:10%;
height:80%;
width:49%;
border-right-style:groove;
}
#mainPanel #image{
position:relative;
height:256px;
width:256px;
left:15%;
top:12%;
background-image:url('./images/admin.png');
}这里也是主要设置背景和图片，并设置一下边框效果等：
这里的图片可以自行替换，这没有什么好说的，那么该右侧部分了，也就是用户名，密码，验证码了：
<div id="right">
<div id="welcome">
<span id="welcome-text">管 理 登 录</span>
</div>
<div id="user-name">
<span class="item">用户名:</span>
<span><input type="text" name="userName" class="form-input"></span>
</div>
<div id="user-password">
<span class="item">密 码:</span>
<span class="input"><input type="password" name="password" class="form-inpu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
