- 浏览: 1748023 次
- 性别:
- 来自: 大连
博客专栏
-
Spring数据库访问系列...
浏览量:172816
-
Android学习笔记
浏览量:366549
-
iBatis开发详解
浏览量:188303
-
Objective-C学习...
浏览量:98739
最新评论
-
iLidy:
引用[/c
Hibernate持久化对象的生命周期详解 -
fengzigogo:
您好,有这个项目架构的源码下载地址吗?
一种Java Web应用开发框架的构建(基于Struts2+Spring+FreeMarker)之一 -
spring_springmvc:
可以参考最新的文档:如何在eclipse jee中检出项目并转 ...
用Maven构建Java Web开发环境(Jetty容器)之二 -
springdata_springmvc:
spring mvc demo教程源代码下载,地址:http: ...
Spring 3之MVC & Security简单整合开发(二) -
赵庆辉:
看帖回复是美德,楼主讲的很清晰明了,看了豁然开朗.
Java String对象的经典问题(new String())
本文接上一篇继续来介绍企业级开发中后台管理页面的制作。
一般来说,后台管理系统的登录后页面就是系统的主页,这个主页的显示效果是不变的,就是在这个页面上有导航按钮和导航树,仅仅变化的是主面板上的一个iframe。这就是比较传统的做法,也比较简单。我们沿用这一习惯,稍微添加一些效果。首先来看一下页面框架:
页面元数据的声明就不多说了,页面背景我们仍然使用渐变的恬静的蓝色。在header中我们设置有Logo位置,title位置,menu位置和user_info位置。其中的menu下会设置详细的菜单信息。那么对应的CSS为:
设置的信息都比较简单,没什么多说的,主要是body中设置的最小宽度和最小高度,这需要根据需求去自行调整。下面来看看菜单的设置:
我们编写了ul和li才存放菜单项,先不看外部CSS,嵌入的CSS中包含了两边的圆角矩形设置。然后就是javascript脚本,主要控制鼠标的移入和移出,也就是设置一下这两个事件的样式,主要是颜色和字体的变化,下面是CSS:
现在来看一下效果:
我们看到背景并没有是全屏的,仅仅出现在了header上,不用担心,我们后面要设置页面的自适应效果。下面就是页面的剩余元素了:
很容易看出,navigator是导航树,main就是主面板的iframe,footer是一些版权信息了,加上之后,我们来看一下CSS:
这些CSS也很简单,加上之后,我们来看一下效果:
也不是很好看,还是挤在了一起,只要加入下面的脚本段就可以调整了:
脚本中的像素调整可以根据需要自行进行,我们来看一下最终的显示效果:
其中导航树的制作这里不再详细介绍,请参考之前的相关文章,主面板的内容的设计也不是什么难事,请参考附件中的代码。
本部分内容就介绍完了,欢迎交流,希望对使用者有用。
番外篇-给页面加把锁,点击查看
调整js方法中的像素值,或者本身限制的像素值即可。不能使用不支持HTML5和CSS3的浏览器
谷歌浏览器也不行呀。我的19存的显示器,浏览器最大时才没有问题,浏览器只要放小一点就不行了,div就对不齐了。
调整js方法中的像素值,或者本身限制的像素值即可。不能使用不支持HTML5和CSS3的浏览器
一般来说,后台管理系统的登录后页面就是系统的主页,这个主页的显示效果是不变的,就是在这个页面上有导航按钮和导航树,仅仅变化的是主面板上的一个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" style="border-radius:8px 0 0 8px;border:0px;" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.borderRadius='0 8px 8px 0';this.style.fontWeight='bold'"><a>邮件管理</a></li> </ul> </div>
我们编写了ul和li才存放菜单项,先不看外部CSS,嵌入的CSS中包含了两边的圆角矩形设置。然后就是javascript脚本,主要控制鼠标的移入和移出,也就是设置一下这两个事件的样式,主要是颜色和字体的变化,下面是CSS:
#menu_container{ position:relative; margin:2px; height: 34px; line-height:34px; vertical-align:middle; border-radius: 8px; 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)); } #menu_items{ list-style:none; line-height: normal; height: 34px; line-height:34px; vertical-align:middle; font-size:14px; border:2px solid solid; border-right-style:groove; } .menu_item{ display: list-item; float:left; width:100px; border-right:2px solid #F6F6F6; border-right-style:groove; cursor:pointer; } .on{ display: list-item; float:left; width:100px; background:#77D1F6; font-weight:bold; } .menu_item a{ height: 34px; line-height:34px; display:block; }
现在来看一下效果:
我们看到背景并没有是全屏的,仅仅出现在了header上,不用担心,我们后面要设置页面的自适应效果。下面就是页面的剩余元素了:
<div id="navigator"> <iframe src="tree.html"></iframe> </div> <div id="main"> <iframe name="MainFrame" src="main.html"></iframe> </div> <div id="footer">Copyright © 2009-2011 All Rights Reserved Powered By Nan Lei</div>
很容易看出,navigator是导航树,main就是主面板的iframe,footer是一些版权信息了,加上之后,我们来看一下CSS:
#navigator{ position:relative; float:left; width:200px; margin:5px 2px 5px 2px; left:5px; border-color: #77D1F6; border-width: 2px; border-style: solid; border-radius: 12px; -moz-box-shadow: 6px 6px 12px #282828; -webkit-box-shadow: 6px 6px 12px #282828; } #main{ position:relative; float:left; width: 80%; margin:5px; left:5px; border-color: #77D1F6; border-width: 2px; border-style: solid; border-radius: 12px 12px; -moz-box-shadow: 6px 6px 12px #282828; -webkit-box-shadow: 6px 6px 12px #282828; } iframe{ height:100%; width:100%; background:#FFF; position:relative; border-radius:12px; overflow:hidden; }
这些CSS也很简单,加上之后,我们来看一下效果:
也不是很好看,还是挤在了一起,只要加入下面的脚本段就可以调整了:
<script type="text/javascript"> function screenAdapter(){ document.getElementById('footer').style.top=document.documentElement.scrollTop+document.documentElement.clientHeight- document.getElementById('footer').offsetHeight+"px"; document.getElementById('navigator').style.height=document.documentElement.clientHeight-100+"px"; document.getElementById('main').style.height=document.documentElement.clientHeight-100+"px"; document.getElementById('main').style.width=window.screen.width-230+"px"; } window.onscroll=function(){screenAdapter()}; window.onresize=function(){screenAdapter()}; window.onload=function(){screenAdapter()}; </script>
脚本中的像素调整可以根据需要自行进行,我们来看一下最终的显示效果:
其中导航树的制作这里不再详细介绍,请参考之前的相关文章,主面板的内容的设计也不是什么难事,请参考附件中的代码。
本部分内容就介绍完了,欢迎交流,希望对使用者有用。
番外篇-给页面加把锁,点击查看
评论
12 楼
gabrunzie
2014-06-18
TreeLin 写道
真不错 顶下
11 楼
hhqhqs
2014-05-14
win8.1 ie11 样式显示不正常
10 楼
qzwlf
2014-01-11
很喜欢这样的风格!~~很清爽哦
9 楼
Mynameisyuan
2013-02-24
很清爽 不错
8 楼
jiangsoft
2012-04-24
真不错 顶下
7 楼
TreeLin
2012-02-10
真不错 顶下
6 楼
weir2009
2011-10-25
document.getElementById('main').style.width=document.documentElement.clientWidth-230+"px";
你把这个写错了。
你把这个写错了。
5 楼
weir2009
2011-10-25
sarin 写道
weir2009 写道
还是有问题左右div不在一行。
调整js方法中的像素值,或者本身限制的像素值即可。不能使用不支持HTML5和CSS3的浏览器
谷歌浏览器也不行呀。我的19存的显示器,浏览器最大时才没有问题,浏览器只要放小一点就不行了,div就对不齐了。
4 楼
sarin
2011-10-24
weir2009 写道
还是有问题左右div不在一行。
调整js方法中的像素值,或者本身限制的像素值即可。不能使用不支持HTML5和CSS3的浏览器
3 楼
weir2009
2011-10-24
还是有问题左右div不在一行。
2 楼
shaohaiz141
2011-10-12
哈哈.很不错哦~!很喜欢.....顶!~~~
1 楼
matt911
2011-10-02
很喜欢这样的风格!~~很清爽哦
发表评论
-
Objective-C学习笔记12:高级数据类型一
2013-03-03 21:52 5001接上文 之前介绍过变量和数据类型,那么我们来看 ... -
Objective-C学习笔记11:多态和动态类型
2013-03-03 11:20 8830接上文 多态是一个典型的面向对象概念。Obje ... -
Objective-C学习笔记十:继承二
2013-03-02 21:27 4725接上文 之前 ... -
Objective-C学习笔记九:继承一
2013-01-12 20:32 14942接上文 继承是面向对象的一个核心概念。在Obj ... -
Objective-C学习笔记八:类的定义二
2013-01-06 11:00 5272接上文 我们继续来扩展分数类Fraction, ... -
Android学习笔记17:中级视图组件DatePicker和TimePicker
2013-01-05 12:08 16154接上文 HTML5出现之前,我们在Wweb开发 ... -
Objective-C学习笔记七:类的定义一
2013-01-05 10:53 8617接上文 我们还是结合之前分数的示例来说明,只是 ... -
Objective-C学习笔记六:选择结构二
2013-01-03 20:24 5523接上文 之前介绍的都是独立的if选择结构,其实 ... -
Objective-C学习笔记五:选择结构一
2013-01-02 21:37 5676接上文 选择结构,或者称为分支结构,是编程语言 ... -
Android学习笔记16:布局管理器的嵌套
2012-12-31 12:29 9652接上文 布局管理器的嵌套就是将多种布局管理器混 ... -
Objective-C学习笔记四:循环结构
2012-12-31 11:07 8591接上文 ... -
Android学习笔记15:绝对布局管理器AbsoluteLayout
2012-12-29 12:13 11432接上文 有相对布局管理器,对应的,我们还有绝对 ... -
Objective-C学习笔记三:基本数据类型和表达式
2012-12-29 12:06 10114接上文 任何编程语言都会有数据类型,比如在Ja ... -
Objective-C学习笔记二:面向对象概述
2012-12-29 11:49 7104接上文 从字面来理解Objective-C就是 ... -
Android学习笔记14:相对布局管理器RelativeLayout
2012-12-28 13:25 14688接上文 相对 ... -
Objective-C学习笔记一:第一个应用程序
2012-12-27 12:17 14347iOS程序是基于Object ... -
Android学习笔记13:表格布局管理器TableLayout
2012-12-27 11:54 18959接上文 在Web开发中,我们会接触到形形色色的 ... -
Android学习笔记12:框架布局管理器FrameLayout
2012-10-10 10:09 19873接上文 框架布局管理器是Android布局管理 ... -
Android学习笔记11:线性布局管理器LinearLayout
2012-10-02 13:51 15769接上文 和Java GUI部分的概念类似,布局 ... -
Android学习笔记十:基本视图组件:ImageView和ImageButton
2012-09-08 14:05 21535接上文 在Web ...
相关推荐
精仿2345网址导航2015清爽版修正更新: 2015.11.04.修复了由于文本批量替换造成的代码错误. 2015.11.03.... 2015.11.03....2015.06.30....2015.06.30....后台页面: 相关阅读 同类推荐:搜索/网址导航源码
ZYCH自由策划餐饮业网站管理系统程序说明: ZYCH自由策划餐饮业网站管理系统为智能ASP网站管理程序,是基于自由策划企业网站系列的改版,本系统结合之前版所有的版本的...后台页面: 相关阅读 同类推荐:企业网站
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统1.4后为满足婚纱摄影行业网站源码市场的稀缺,由自由策划网络工作室设计开发的一套用于婚纱摄影行业的网站系统,同样以其它企业网站系统一样,不管是在程序的内部结构还是界面风格及...
酷睿股票私募网站管理系统,是国内首家采用WAP手机及电脑WEB同步访问的股票私募系统,该系统基于ASP+DIV+CSS+AJAX+XML+MSSQL技术专门为股票私募网站开发的一款CMS网站管理系统,是一个经过完善设计并适用于各种...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
ZYCH自由策划网站管理系统婚纱摄影版 v1.4,系统为自由策划网站管理系-婚纱摄影版,是基于自由策划企业网站管理系统1.4后为满足婚纱摄影行业网站源码市场的稀缺,由自由策划网络工作室设计开发的一套用于婚纱摄影...