框架预览：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">//载入图标库<style type="text/css"> ???body{ ???????margin: 0; ???} ???.header{ ???????height:48px; ???????background-color: #2459a2; ???????color: white; ???????line-height: 48px; //将字体上下居中 ???} ???.header .icons{ ???????padding:0 10px;//内变宽 ???????font-size: 2px; ???} ???.header .fort{ ???????display: inline-block; ???padding: 0px 5px; ???background-color: red; ???border-radius: 64%; ???line-height: 20px; ?//行高 ???} ???.header .icons:hover{//鼠标滑过就会出现背景框 ???????background-color: #020d1f ???} ???.header .logo{ ???????width: 200px; ???????text-align: center;//字体左右居中 ???} ???.header .user{ ???????height: 48px; ???????margin-right: 77px; ???????padding: 0 20px; ???????position: relative; ???} ???.header .user:hover{ ?????background-color: #020d1f ???} ???.header .user .a img{ ????????z-index: 20 ; ???????width: 40px; ???????height:40px; ???????margin-top: 4px; ???????border-radius: 50%; ???} ???.header .user .b { ???????z-index: 20; ???????background-color: ghostwhite; ???????color: black; ???????position: absolute; ???????top:48px; ???????right: 40px; ???????width: 160px; ???????display: none; ???} ????.header .user:hover .b{ ???????display: block; ???} ???.header .user .b a{ ???????display: block; ???} ???.left{ ???????float: ?left ; ???} ???.right{ ???????float: right; ???} ???.content .menu{ ??????position: fixed; ???????top: 48px; ???????left: 0; ???????bottom: 0; ???????width: 200px; ???????background-color: #dddddd; ???} ???.content .menu1{ ???????position: absolute; ???????top:48px; ???????right:0; ???????bottom:0; ???????left: 200px; ???????background-color: purple; ???????z-index: 10; ???????overflow: auto; //设置滚动条，永远固定在某个窗口位置上，relative--单独无意义，absolute--第一次定位，可以指定，滚动时，就不在了 ???}</style></head><body> ???<div class="header"> ???????<div class="logo left"> ???????????Python ????????????</div> ???????<div class="user right "> ???????????<a class="a" href="#"> ???????????????<img ???src=" 416.jpg"> ???????????</a> ???????????<div class="b"> ???????????????<a>我的资料</a> ???????????????<a>修改资料</a> ???????????????<a>进入空间</a> ???????????????<a>退出登入</a> ???????????</div> ???????</div> ???????????????????<div class="icons right"> ???????????????<i class="fa fa-tv" aria-hidden="true"></i> ????????????????<span style="font-size: 2px">数据中心</span> ???????????????????</div> ???????<div class="icons right"> ????????????<i class="fa fa-envelope-o" aria-hidden="true"> ?我的邮件</i> ????????<span class="fort">99+</span> ????????????</div> ???????<div class="icons right"> ????????????<i class="fa fa-user-circle" aria-hidden="true"> ?我的主页</i> ????????????</div> ???????</div> ???<div class="content"> ???????<div class="menu left"></div> ???????<div class="menu1 left"> ???????</div> ???</div> ???<div class="footer"></div><script src="commons.js"></script></body></html>html前端后台导航框架
原文地址：http://www.cnblogs.com/Mjonj/p/7580855.html