html5&CSS实现后台管理页面

最新推荐文章于 2024-09-08 09:38:17 发布
最新推荐文章于 2024-09-08 09:38:17 发布
阅读量5.7k 收藏 52
点赞数 6
分类专栏： web开发 文章标签： css html5 class float 微软 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangsijing22/article/details/7178933
版权
 后台管理系统是企业级开发中必不可少的组成部分，一般来说其页面是比较简单的，包含登录页面和登录后的管理页面即可。登录之后，可以使用导航树来加载iframe嵌套其它页面。做页面也是程序员比较头疼的问题，那么我们就来看看企业级开发中后台页面的做法。我们使用HTML5/CSS3来简化开发达到清爽效果，但不太适用于IE9以下用户。
    首先编写页面的基本骨架：
Html代码 复制代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>Login Page</title>  
  6. </head>  
  7. <body>  
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Login Page</title>
</head>
<body>

    加入背景的CSS：
Css代码 复制代码  收藏代码
  1. body{   
  2.     margin:0px;   
  3.     padding:0px;   
  4.     overflow:hidden;   
  5. }   
  6. #wrapper{   
  7.     position:absolute;   
  8.     width:100%;   
  9.     height:100%;   
  10.     min-width:1280px;   
  11.     min-height:680px;   
  12.     overflow-x:hidden;   
  13.     overflow-y:hidden;   
  14.     background-image: -moz-linear-gradient(top,#77D1F6, #2F368F);   
  15.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6),color-stop(1, #2F368F));   
  16. }  
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部分：
Html代码 复制代码  收藏代码
  1. <div id="header">  
  2.     <div id="logo"></div>  
  3.     <div id="heading">  
  4.         <div id="title">后台管理系统</div>  
  5.         <div id="subTitle">Ver 1.0</div>  
  6.     </div>  
  7. </div>  
	<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如下：
Css代码 复制代码  收藏代码
  1. #header{   
  2.     height:100px;   
  3.     width:100%;   
  4. }   
  5. #logo{   
  6.     position:absolute;   
  7.     float:left;   
  8.     margin-left:5%;   
  9.     margin-top:30px;   
  10.     height:40px;   
  11.     width:160px;   
  12.     text-align:center;   
  13. }   
  14. #heading{   
  15.     position:relative;   
  16.     float:left;   
  17.     margin-left:20%;   
  18.     margin-top:-18px;   
  19.     height:110px;   
  20.     width:60%;   
  21.     border-radius: 18px;   
  22.     background-color:#1C75BC;   
  23.     opacity:0.6;   
  24. }   
  25. #heading #title{   
  26.     margin-top:40px;   
  27.     text-align:center;   
  28.     font-family:微软雅黑;   
  29.     font-size:24px;   
  30.     font-weight:bold;   
  31. }   
  32. #heading #subTitle{   
  33.     margin-top:10px;   
  34.     text-align:center;   
  35.     font-family:Courier New;   
  36. }  
#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仅仅对字体进行调整，那么现在的效果为：

    然后设置主面板部分：
Html代码 复制代码  收藏代码
  1. <div id="main">  
  2.     <div id="mainBg">  
  3.         <div id="mainPanel">  
  4.             <div id="left">  
  5.                 <div id="image"></div>  
  6.             </div>  
  7.         </div>  
  8.     </div>  
  9. </div>  
	<div id="main">
		<div id="mainBg">
			<div id="mainPanel">
				<div id="left">
					<div id="image"></div>
				</div>
			</div>
		</div>
	</div>

    这里分为背景和面板两部分，面板又分为左右两侧，先来看背景和左侧的代码设置：
Css代码 复制代码  收藏代码
  1. #main{   
  2.     margin-top:20px;   
  3.     height:500px;   
  4.     width:100%;   
  5. }   
  6. #mainBg{   
  7.     position:relative;   
  8.     float:left;   
  9.     margin-left:20%;   
  10.     margin-top:0px;   
  11.     height:500px;   
  12.     width:60%;   
  13.     border-radius: 18px;   
  14.     background-color:#000000;   
  15.     opacity:0.5;   
  16. }   
  17. #mainPanel{   
  18.     position:relative;   
  19.     margin:25px;   
  20.     height:450px;   
  21.     border-radius: 18px;   
  22.     background-image: -moz-linear-gradient(top,#EBEBEB, #BFBFBF);   
  23.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB),color-stop(1, #BFBFBF));   
  24. }   
  25. #mainPanel #left{   
  26.     float:left;   
  27.     border-right:2px solid #F6F6F6;   
  28.     position:relative;   
  29.     top:10%;   
  30.     height:80%;   
  31.     width:49%;   
  32.     border-right-style:groove;   
  33. }   
  34. #mainPanel #image{   
  35.     position:relative;   
  36.     height:256px;   
  37.     width:256px;   
  38.     left:15%;   
  39.     top:12%;   
  40.     background-image:url('./images/admin.png');   
  41. }  
#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');
}

    这里也是主要设置背景和图片，并设置一下边框效果等：

    这里的图片可以自行替换，这没有什么好说的，那么该右侧部分了，也就是用户名，密码，验证码了：
Html代码 复制代码  收藏代码
  1. <div id="right">  
  2.                     <div id="welcome">  
  3.                         <span id="welcome-text">管&nbsp;理&nbsp;登&nbsp;录</span>  
  4.                     </div>  
  5.                     <div id="user-name">  
  6.                         <span class="item">用户名:</span>  
  7.                         <span><input type="text" name="userName" class="form-input"></span>  
  8.                     </div>  
  9.                     <div id="user-password">  
  10.                         <span class="item">密&nbsp;&nbsp;&nbsp;码:</span>  
  11.                         <span class="input"><input type="password" name="password" class="form-input"></span>  
  12.                     </div>  
  13.                     <div id="user-checkcode">  
  14.                         <span class="item">验证码:</span>  
  15.                         <span class="input"><input type="text" name="checkCode" class="form-input"></span>  
  16.                         <span class="checkcode-span"></span>  
  17.                     </div>  
  18.                     <div id="error-tip">  
  19.                         <span id="tip-text"></span>  
  20.                     </div>  
  21.                     <div id="button-group">  
  22.                         <input type="submit" class="btn" value="提交"/>  
  23.                         <input type="reset" class="btn" value="重置"/>  
  24.                     </div>  
  25.                 </div>  
<div id="right">
					<div id="welcome">
						<span id="welcome-text">管&nbsp;理&nbsp;登&nbsp;录</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">密&nbsp;&nbsp;&nbsp;码:</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：
Css代码 复制代码  收藏代码
  1. #mainPanel #right{   
  2.     float:left;   
  3.     position:relative;   
  4.     height:90%;   
  5.     width:49%;   
  6.     top:5%;   
  7. }   
  8. #welcome{   
  9.     margin-top:20px;   
  10.     height:60px;   
  11.     width:100%;   
  12.     vertical-align: middle;   
  13.     display: inline-block;   
  14.     line-height: 60px;   
  15.     text-align:center;   
  16. }   
  17. #welcome #welcome-text{   
  18.     font-size:38px;   
  19.     font-weight:bold;   
  20.     font-family:微软雅黑;   
  21.     text-shadow: 0 1px 1px #F6F6F6;   
  22. }   
  23. #user-name{   
  24.     height:35px;   
  25.     width:100%;   
  26.     margin-top:20px;   
  27.     vertical-align: middle;   
  28.     display: inline-block;   
  29.     line-height: 35px;   
  30. }   
  31. #user-password{   
  32.     margin-top:20px;   
  33.     height:35px;   
  34.     width:100%;   
  35.     vertical-align: middle;   
  36.     display: inline-block;   
  37.     line-height: 35px;   
  38. }   
  39. #user-checkcode{   
  40.     margin-top:20px;   
  41.     height:35px;   
  42.     width:100%;   
  43.     vertical-align: middle;   
  44.     display: inline-block;   
  45.     line-height: 35px;   
  46. }   
  47. #button-group{   
  48.     margin-top:10px;   
  49.     height:35px;   
  50.     width:100%;   
  51.     vertical-align: middle;   
  52.     display: inline-block;   
  53.     line-height: 35px;   
  54.     text-align:center;   
  55. }   
  56. #error-tip{   
  57.     margin-top:20px;   
  58.     margin-left:5%;   
  59.     height:40px;   
  60.     width:90%;   
  61.     vertical-align: middle;   
  62.     display: inline-block;   
  63.     line-height: 35px;   
  64.     text-align:center;   
  65.     border-bottom:2px solid #F6F6F6;   
  66.     border-bottom-style:groove;   
  67. }   
  68. #error-tip #tip-text{   
  69.     font-size:18px;   
  70.     font-weight:bold;   
  71.     font-family:微软雅黑;   
  72.     color:red;   
  73. }   
  74. .item{   
  75.     margin-left:20px;   
  76.     font-family:微软雅黑;   
  77.     font-size:20px;   
  78.     font-weight:bold;   
  79.     float: left;   
  80.     width:80px;   
  81.     margin-top: 3px;   
  82.     text-align: center;   
  83.     text-shadow: 0 1px 1px #F6F6F6;   
  84. }   
  85. .input{   
  86.     vertical-align: middle;   
  87.     display: inline-block;   
  88. }   
  89. #checkcode-img{   
  90.     margin-top:3px;   
  91.     height:20px;   
  92.     width:60px;   
  93. }   
  94. .form-input{   
  95.     height:20px;   
  96. }   
  97. .btn{   
  98.     border:1px solid #cccccc;   
  99.     cursor:pointer;   
  100.     margin:10px 5px;   
  101.     height:40px;   
  102.     width:80px;   
  103.     text-align:center;   
  104.     border-radius: 4px;   
  105.     border-color: #636263 #464647 #A1A3A5;   
  106.     text-shadow: 0 1px 1px #F6F6F6;   
  107.     background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);   
  108.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));   
  109. }  
#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内容：
Html代码 复制代码  收藏代码
  1. <div id="footer]   
  2.     <div id="text">Copyright © 2009-2011 All Rights Reserved Powered By Nan Lei[/align]   
  3. </div>  
	<div id="footer]
		<div id="text">Copyright © 2009-2011 All Rights Reserved Powered By Nan Lei[/align]
	</div>

    相应的CSS为：
Css代码 复制代码  收藏代码
  1. #footer{   
  2.     margin-top:20px;   
  3.     width:100%;   
  4. }   
  5. #footer #text{   
  6.     text-align:center;   
  7.     font-size:14px;   
  8.     font-family:微软雅黑;   
  9.     font-weight:bold;   
  10. }  
#footer{
	margin-top:20px;
	width:100%;
}
#footer #text{
	text-align:center;
	font-size:14px;
	font-family:微软雅黑;
	font-weight:bold;
}

    那么我们的登录页面就完成了：

    下次内容我们将开始编写登录后的后台页面，总体效果如下：

wangsijing22
关注
专栏目录
html+css管理系统后台登录页面
04-10
html+css管理系统后台登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
基于HTML5/CSS3的清爽后台管理页面（二）
03-27
NULL 博文链接：https://sarin.iteye.com/blog/1184446
电商后台管理HTML源码模版：快速搭建后台管理界面
weixin_32005771的博客
08-27 679
本文还有配套的精品资源，点击获取 简介：本HTML源码模版专为电商网站后台管理系统设计，提供登录/注册页、首页、商品管理、订单管理、用户管理、营销活动管理、数据统计等模块的基本页面设计。开发者可结合ThinkPHP框架进行后端逻辑开发，快速搭建出专业、美观且功能完备的后台管理系统。 1. HTML源码模版介绍 HTML（超文本标记语言）是用于创建网页的标准标记语...
html+css实现后台登录界面
最新发布
weixin_45710581的博客
09-08 703
下面是一个简单的 HTML + CSS 登录界面的示例代码。这个例子创建了一个居中的登录表单，包含用户名和密码输入框以及一个登录按钮。
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
使用HTML+css3写的漂亮后台管理系统登录界面，界面非常美观，分格好看。拿来作为系统的登录界面非常合适
HTML+CSS的后台管理系统
Sweethonor的博客
11-16 1767
原生态构架的后台管理系统
HTML5后台管理界面
12-17
使用HTML5 和 CSS3 技术来制作的后台管理界面模板，非常漂亮
非常漂亮的HTML5后台管理模板
10-26
非常漂亮的HTML5后台管理模板，简约大气，适应各种业务后台使用
管理后台html页面
07-31
漂亮使用的二级菜单目录，网页代码简单易懂，欢迎下载。
60套HTML5+CSS3后台管理登录模板 响应式 bootstrap
04-05
在“60套HTML5+CSS3后台管理登录模板 响应式 bootstrap”这个资源中，你将有机会接触到一系列精心设计的后台管理界面模板，这些模板充分利用了HTML5的新特性以及CSS3的先进样式规则，旨在提供优秀的用户体验，特别是...
html 后台页面
02-02
后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面
商城后台管理系统HTML+css+jquery
06-30
一个非常完善的后台管理系统前端源码，使用HTML+css+jQuery开发。
后台管理页面设计+DIV+CSS
02-19
27款后台管理页面设计+DIV+CSS,包含了html源码，及部分CSS，js源码
HTML H5 后台管理系统全套模板资源
11-30
HTML H5 后台管理系统全套模板资源，H5,HTML页面自适应
60套HTML5+CSS3后台管理登录模板
01-11
总的来说，这60套HTML5+CSS3后台管理登录模板为开发者提供了丰富的设计资源，无论是初学者还是经验丰富的专业人士，都可以从中找到灵感和实用的代码示例，快速构建出功能完善、视觉吸引人的后台登录界面。
html5&boostrap自适应后台管理界面.zip
12-28
HTML5和Bootstrap是现代网页开发中的两个重要技术，它们共同为构建自适应的后台管理界面提供了强大的工具。这个"html5&boostrap自适应后台管理界面.zip"压缩包包含了一系列资源，帮助开发者创建功能丰富且视觉效果...
HTML5后台管理模板
springmvc_freemarker的博客
11-28 3993
HTML5后台管理模板 源代码下载地址：http://www.zuidaima.com/share/1710002933124096.htm
原生html+css实现后台管理系统布局
09-12
使用原生HTML和CSS实现后台管理系统布局需要以下步骤： 1. 首先，确定整体布局结构。根据引用和引用的描述，后台管理系统通常采用分栏布局，其中包含顶部导航栏、侧边栏和主要内容区域。可以使用`<header>`标签创建顶部导航栏，使用`<nav>`标签创建侧边栏，使用`<main>`标签创建主要内容区域。 2. 接下来，设置CSS样式。可以使用CSS的`position`属性来定位各个元素。引用和引用中提到的多页面布局可以通过使用`<link>`标签引入外部CSS文件的方式来实现，以避免样式代码的重复。 3. 对于顶部导航栏，可以使用`<ul>`和`<li>`标签创建一个水平的导航菜单。通过设置CSS样式，可以将其放置在页面的顶部，并设置背景色为100%宽度，使其与页面宽度保持一致。 4. 对于侧边栏，可以使用`<ul>`和`<li>`标签创建一个垂直的导航菜单。通过设置CSS样式，可以将其放置在页面的侧边，并设置背景色为适当的宽度。 5. 主要内容区域可以根据具体需求采用不同的布局方式。可以使用`<div>`标签创建多个区域，并设置其样式为适当的宽度和高度。 6. 为了实现响应式布局，可以使用CSS的媒体查询功能。通过在CSS文件中添加媒体查询代码，可以根据屏幕大小和设备类型来调整布局和样式。 综上所述，使用原生HTML和CSS实现后台管理系统布局的关键是确定整体布局结构，并通过设置CSS样式来实现各个元素的定位和样式效果。同时，可以考虑使用外部CSS文件和媒体查询来实现多页面布局和响应式设计。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值