基于HTML5 CSS3的清爽后台管理页面（二） .pdf

基于HTML5/CSS3 的清爽后台管理页面 （二） 一般来说，后台管理系统的登录后页面就是系统的主页，这个主页的显示效果是不变的， 就是在这个页面上有导航按钮和导航树，仅仅变化的是主面板上的一个iframe。这就是比较 传统的做法，也比较简单。我们沿用这一习惯，稍微添加一些效果。首先来看一下页面框架： Html 代码 1. !DOCTYPE html 2. html 3. head 4. titleHome Page/title 5. meta http-equiv=content-type content=text/html;charset=UTF-8 6. link rel=stylesheet type=text/css href=css/index.css / 7. /head 8. body 9. div id=wrapper 10. div id=header 11. div id=logoLOGO/div 12. div id=title后台管理系统/div 13. div id=menu 14. /div 15. div id=user_info 16. div id=welcome欢迎 Nan Lei 使用本系统/div 17. div id=logout安全退出/div 18. /div 19. /div 20. /div 21. /body 22. /html 页面元数据的声明就不多说了，页面背景我们仍然使用渐变的恬静的蓝色。在header 中我们设置有Logo 位置，title 位置，menu 位置和user_info 位置。其中的menu 下会设置 详细的菜单信息。那么对应的CSS 为： Css 代码 1. * { 2. background: none repeat scroll 0 0 transparent; 3. border: 0 none; 4. margin: 0; 5. padding: 0; 6. vertical-align: baseline; 7. } 8. body{ 9. min-height:600px; 10. min-width:1280px; 11. overflow-y:hidden; 12. } 13. #wrapper { 14. background-image: -moz-linear-gradient(top,#77D1F6, #2F368F); 15. background-image:-webkit-gradient(linear, left top, left bottom, color-s top(0, #77D1F6),color-stop(1, #2F368F)); 16. font-family: lucida Grande,Tahoma,Arial; 17. font-size: 12px; 18. overflow: hidden; 19. height:100%; 20. width:100%; 21. height:100%; 22. } 23. #header { 24. float: left; 25. height: 62px; 26. position: relative; 27. width: 100%; 28. z-index: 10; 29. text-align:center; 30. } 31. #logo { 32. float: left; 33. height: 38px; 34. line-height:38px; 35. vertical-align:middle; 36. margin: 15px 0 0