IT博客汇 | [原]仿wordpress管理后台设计的后台管理框架

[原]仿wordpress管理后台设计的后台管理框架

XTQueen_up发表于 2015-03-17 11:03:52

仿wordpress管理后台设计的后台管理框架

本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

html的padding-top来实现整体下移，然后top使用position：fixed定位到顶部。
leftbg的position:absolute来实现左侧背景定位。
左右分栏是利用float特性，让右侧可以自动适应。


<html>

<head>
<meta charset=”utf-8″ />
<title>后台框架设计title>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
<link rel=”stylesheet” type=”text/css” href=”css/reset.css” />
head>

<body>
<div class=”mainbox”>
<div class=”leftbg”>div>
<div class=”left”>leftdiv>
<div class=”right”>
<div class=”top”>topdiv>
<div class=”right_con”>right_con
<p>01p>
<p>02p>
<p>03p>
<p>04p>
<p>05p>
<p>06p>
<p>07p>
<p>08p>
<p>09p>
<p>10p>
<p>11p>
<p>12p>
<p>13p>
<p>14p>
<p>15p>
<p>16p>
<p>17p>
<p>18p>
<p>19p>
<p>20p>
<p>21p>
<p>22p>
<p>23p>
<p>24p>
<p>25p>
<p>26p>
<p>27p>
<p>28p>
<p>29p>
<p>30p>
<p>31p>
<p>32p>
<p>33p>
<p>34p>
<p>35p>
<p>36p>
<p>37p>
<p>38p>
<p>39p>
<p>40p>
<p>41p>
<p>42p>
<p>43p>
<p>44p>
<p>45p>
<p>46p>
<p>47p>
<p>48p>
<p>49p>
<p>50p>
<p>51p>
<p>52p>
<p>53p>
<p>54p>
<p>55p>
<p>56p>
<p>57p>
<p>58p>
<p>59p>
<p>60p>
div>
div>
<div class=”copyright”>bottomdiv>
div>
body>

html>

html ,body {height: 100%;}
html {padding-top: 50px; overflow-x: hidden;}
body {min-width: 600px;}
.mainbox {height: auto; min-height: 100%; position: relative;}
.leftbg {width: 200px; background-color: #333333; position: absolute; top: 0px; bottom: 0em; z-index: -1;}
.left {width: 200px; float: left; position: fixed; color: red;}
.right {background-color: #FFF; margin-left: 210px; height: 100%;}
.top {height: 50px; background-color: #929292; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;}
.right_con {}
.copyright {height: 2em; background-color: beige; position: absolute; bottom: 0; left: 200px; right: 0;}
@media screen and (max-width:600px) {
.leftbg {width: 30px;}
.left {width: 30px;}
.right {margin-left: 40px;}
.copyright {left: 30px;}
}

第一次用CSDN-markdown编辑器发表文章感觉不错高大上 GOOD 点赞