1:效果图
效果:
1:侧边导航的手风琴效果
2:部分页面切换效果(点击用户管理,不需要刷新)
2:代码部分
注:三个页面复制到一个项目里,可以直接运行看效果
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台布局</title>
<style type="text/css">
/* 清除默认reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration: