后台管理系统是企业级开发中必不可少的组成部分，一般来说其页面是比较简单的，包含登录页面和登录后的管理页面即可。登录之后，可以使用导航树来加载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-input"></span>
</div>
<div id="user-checkcode">
<span class="item">验证码:</span>
<span class="input"><input type="text" name="checkCode" class="form-input"></span>
<span class="checkcode-span"></span>
</div>
<div id="error-tip">
<span id="tip-text"></span>
</div>
<div id="button-group">
<input type="submit" class="btn" value="提交"/>
<input type="reset" class="btn" value="重置"/>
</div>
</div>
页面元素都很好理解，那么来看看CSS：
#mainPanel #right{
float:left;
position:relative;
height:90%;
width:49%;
top:5%;
}
#welcome{
margin-top:20px;
height:60px;
width:100%;
vertical-align: middle;
display: inline-block;
line-height: 60px;
text-align:center;
}
#welcome #welcome-text{
font-size:38px;
font-weight:bold;
font-family:微软雅黑;
text-shadow: 0 1px 1px #F6F6F6;
}
#user-name{
height:35px;
width:100%;
margin-top:20px;
vertical-align: middle;
display: inline-block;
line-height: 35px;
}
#user-password{
margin-top:20px;
height:35px;
width:100%;
vertical-align: middle;
display: inline-block;
line-height: 35px;
}
#user-checkcode{
margin-top:20px;
height:35px;
width:100%;
vertical-align: middle;
display: inline-block;
line-height: 35px;
}
#button-group{
margin-top:10px;
height:35px;
width:100%;
vertical-align: middle;
display: inline-block;
line-height: 35px;
text-align:center;
}
#error-tip{
margin-top:20px;
margin-left:5%;
height:40px;
width:90%;
vertical-align: middle;
display: inline-block;
line-height: 35px;
text-align:center;
border-bottom:2px solid #F6F6F6;
border-bottom-style:groove;
}
#error-tip #tip-text{
font-size:18px;
font-weight:bold;
font-family:微软雅黑;
color:red;
}
.item{
margin-left:20px;
font-family:微软雅黑;
font-size:20px;
font-weight:bold;
float: left;
width:80px;
margin-top: 3px;
text-align: center;
text-shadow: 0 1px 1px #F6F6F6;
}
.input{
vertical-align: middle;
display: inline-block;
}
#checkcode-img{
margin-top:3px;
height:20px;
width:60px;
}
.form-input{
height:20px;
}
.btn{
border:1px solid #cccccc;
cursor:pointer;
margin:10px 5px;
height:40px;
width:80px;
text-align:center;
border-radius: 4px;
border-color: #636263 #464647 #A1A3A5;
text-shadow: 0 1px 1px #F6F6F6;
background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));
}
这里面可特别说的也不多，来看看效果吧：
最后添加一下footer内容：
<div id="footer]
<div id="text">Copyright © 2009-2011 All Rights Reserved Powered By Nan Lei[/align]
</div>
相应的CSS为：
#footer{
margin-top:20px;
width:100%;
}
#footer #text{
text-align:center;
font-size:14px;
font-family:微软雅黑;
font-weight:bold;
}
那么我们的登录页面就完成了：
下次内容我们将开始编写登录后的后台页面，总体效果如下：
本部分内容源码可以直接从文章中拷贝，都是完整的，涉及到的图片请从附件中下载，待本部分内容全部写完后贴出最终的完整代码。请参考
下一篇。
欢迎交流，希望对使用者有用。
- 大小: 28.3 KB
- 大小: 48.7 KB
- 大小: 58.1 KB
- 大小: 65.1 KB
- 大小: 62.8 KB
- 大小: 47.9 KB
分享到：
相关推荐
在本篇中，我们将深入探讨基于HTML5和CSS3构建的清爽后台管理页面的设计与实现。HTML5作为现代网页开发的基石，引入了许多新的元素、属性和API，极大地提升了网页的功能性和用户体验。而CSS3则提供了更丰富的样式...
【CSS3后台登录页面模板】是一种基于CSS3技术设计的网页模板，主要应用于网站的后台管理系统，为用户提供简洁明了的登录界面。该模板采用蓝色调，呈现出专业且清爽的视觉效果，同时考虑到多设备兼容性，既适用于个人...
本项目提供的"HTML5绿色清爽商城后台管理模板"，则是一个专为此目的设计的静态页面模板，包含了HTML、JavaScript（JS）和CSS等关键组件，能够满足基础的后台管理界面需求。 首先，我们来探讨HTML（HyperText Markup...
HTML5通用后台管理系统模板是一种基于HTML5技术构建的网页应用框架，主要应用于企业级的后台管理系统，提供了一套完整且用户友好的界面设计，旨在提升开发效率，优化用户体验。本模板以其绿色清爽的设计风格，为管理...
总结：这款“html【极简】”后台管理系统html模板，基于HTML5技术，以其简洁的设计和高效的开发流程，为开发者提供了强大的工具。它简化了前端代码开发，使后台管理系统界面更加直观，用户体验更佳。通过预设的HTML...
该压缩包文件包含一个名为"水果果汁餐饮网站模板，基于HTML5+CSS3实现，单页设计，清爽大气，效果不错。"的网页模板，这是一个专门为水果果汁餐饮行业设计的网站模板，利用了现代Web技术HTML5和CSS3，旨在为用户呈现...
综合以上信息，我们可以推断这个压缩包包含了一个基于Bootstrap和HTML5构建的响应式登录页面模板，其中使用了CSS3和可能的JavaScript库来实现动态效果和图表展示。开发者可以通过解压这个文件，根据自己的需求进行...
这款扁平化后台管理系统模板基于HTML5技术，是为网站后台管理界面设计的专业模板，旨在提供高效、直观且美观的操作环境。 HTML5是超文本标记语言的第五个版本，它在传统HTML的基础上引入了更多新的元素、API接口和...
这是一个基于HTML5技术构建的通用后台管理系统模板，适用于商城或其他管理平台的前端界面设计。该模板以其绿色清爽的风格为特点，提供了丰富的功能模块和组件，以满足不同类型的后台管理需求。 1. HTML5技术：作为...
在这些标签 "html5" 和 "html" 中，我们了解到这个模板是基于HTML5标准构建的，HTML5是目前网页开发的主流标准，它引入了许多新的元素、属性和API，旨在提高网页的语义性、性能以及对多媒体的支持。 压缩包内的文件...
"Kode后台管理 bootstrap3 模板"是一个专为网站后台设计的模板，它基于流行的前端框架Bootstrap 3构建。Bootstrap 3是Twitter推出的一个开源的用于前端开发的工具包，它提供了丰富的HTML、CSS以及JavaScript组件，...
Ace Admin 是一个基于HTML5和CSS3的扁平化后台管理界面模板，它设计简洁、直观，具有丰富的功能和组件，适用于开发Web应用程序的后台管理界面。这个模板使用了Ace框架，该框架以其高效、可定制性和良好的用户体验而...
在【压缩包子文件的文件名称列表】中，虽然只给出了"清爽后台管理员模板"这一条信息，但可以推测压缩包内包含了所有必要的模板文件，如HTML文件（用于页面结构）、CSS文件（用于样式定义）、JavaScript文件（用于...
Bootstrap是一款广泛应用于网页设计与开发的前端框架，其蓝色清爽后台管理系统网站源码是一套基于Bootstrap构建的，专为后台管理界面设计的网页模板。这个模板以其简洁、专业的蓝色调和清晰的布局，为管理员提供了一...
【标题】"win10风格博客后台管理模板"是一款针对Windows 10用户界面设计的网站后台管理系统模板，强调简洁、清新以及现代化的界面风格。该模板以蓝色为主色调，营造出专业且大气的视觉效果，旨在提升用户体验，使得...
总之，浅蓝色清爽公司官网模板结合了HTML5、CSS3和PHP等技术，提供了美观且功能完善的网站解决方案。无论你是打算搭建一个新的企业网站，还是希望更新现有的在线形象，这款模板都是一个不错的选择。其响应式设计、...
首先，"jQuery后台管理系统模板"通常是指基于jQuery库，结合HTML5、CSS3等技术设计的一套完整的后台管理界面布局。这种模板以简洁明快的页面风格为特点，旨在提供良好的用户体验，使管理员能够高效地进行数据管理和...
总结来说，这个“简洁的CMS后台管理系统HTML静态模板”是前端开发中一个实用的起点，涵盖了HTML5、CSS3、JavaScript等基础技术，以及响应式设计、前端框架、API交互等多个方面的知识点，为CMS的后台管理提供了直观、...
2. "win10风格博客后台管理模板是一款蓝色清爽大气风格的网站后台模板下载"：此文件名可能是个重复或错误，正常情况下应该是模板的HTML、CSS、JavaScript等源代码文件，或者是预览图像或示例数据。 在实际使用中，...