日期:2014-05-17 浏览次数:20642 次
<!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>
* { 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; }
<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