基于HTML5/CSS3的清馨后台管理页面（二）
日期：2014-05-17 浏览次数：20603 次
基于HTML5/CSS3的清爽后台管理页面（二）
本文接上一篇继续来介绍企业级开发中后台管理页面的制作。
一般来说，后台管理系统的登录后页面就是系统的主页，这个主页的显示效果是不变的，就是在这个页面上有导航按钮和导航树，仅仅变化的是主面板上的一个iframe。这就是比较传统的做法，也比较简单。我们沿用这一习惯，稍微添加一些效果。首先来看一下页面框架：
页面元数据的声明就不多说了，页面背景我们仍然使用渐变的恬静的蓝色。在header中我们设置有Logo位置，title位置，menu位置和user_info位置。其中的menu下会设置详细的菜单信息。那么对应的CSS为：
设置的信息都比较简单，没什么多说的，主要是body中设置的最小宽度和最小高度，这需要根据需求去自行调整。下面来看看菜单的设置：
本文接上一篇继续来介绍企业级开发中后台管理页面的制作。
一般来说，后台管理系统的登录后页面就是系统的主页，这个主页的显示效果是不变的，就是在这个页面上有导航按钮和导航树，仅仅变化的是主面板上的一个iframe。这就是比较传统的做法，也比较简单。我们沿用这一习惯，稍微添加一些效果。首先来看一下页面框架：
<!DOCTYPE html> <html> <head> <title>Home Page</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">LOGO</div> <div id="title">后台管理系统</div> <div id="menu"> </div> <div id="user_info"> <div id="welcome">欢迎 Nan Lei 使用本系统</div> <div id="logout">安全退出</div> </div> </div> </div> </body> </html>
页面元数据的声明就不多说了，页面背景我们仍然使用渐变的恬静的蓝色。在header中我们设置有Logo位置，title位置，menu位置和user_info位置。其中的menu下会设置详细的菜单信息。那么对应的CSS为：
* {
background: none repeat scroll 0 0 transparent;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body{
min-height:600px;
min-width:1280px;
overflow-y:hidden;
}
#wrapper {
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));
font-family: "lucida Grande",Tahoma,Arial;
font-size: 12px;
overflow: hidden;
height:100%;
width:100%;
height:100%;
}
#header {
float: left;
height: 62px;
position: relative;
width: 100%;
z-index: 10;
text-align:center;
}
#logo {
float: left;
height: 38px;
line-height:38px;
vertical-align:middle;
margin: 15px 0 0 1%;
width: 60px;
}
#title {
float: left;
height: 38px;
line-height:38px;
vertical-align:middle;
margin: 15px 0 0 1%;
width: 260px;
font-family:微软雅黑;
font-size:18px;
font-weight:bold;
text-align:center;
}
#menu{
position:absolute;
left:50%;
margin-top:15px;
margin-left:-300px;
float: float;
height: 38px;
width:615px;
line-height:38px;
vertical-align:middle;
text-align:center;
border-radius: 8px;
background-color:#000000;
opacity:0.5;
}
#user_info {
height: 35px;
line-height:35px;
vertical-align:middle;
position: relative;
float:right;
margin-top:15px;
margin-right:15px;
width:240px;
font-weight:bold;
font-size:14px;
}
#welcome{
position: relative;
float:left;
}
#logout{
position: relative;
float:right;
}
设置的信息都比较简单，没什么多说的，主要是body中设置的最小宽度和最小高度，这需要根据需求去自行调整。下面来看看菜单的设置：
<div id="menu_container">
<ul id="menu_items">
<li class="menu_item on" style="border-radius:8px 0 0 8px" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#77D1F6';this.style.borderRadius='8px 0 0 8px'"><a>系统管理</a></li>
<li class="menu_item" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'"><a>用户管理</a></li>
<li class="menu_item" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'"><a>新闻管理</a></li>
<li class="menu_item" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'"><a>网盘管理</a></li>
<li class="menu_item" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'"><a>相册管理</a></li>
<li class="menu_item" styl
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
