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

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

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

<!DOCTYPE html>
<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”>left</div>
<div class=”right”>
<div class=”top”>top</div>
<div class=”right_con”>right_con
<p>01</p>
<p>02</p>
<p>03</p>
<p>04</p>
<p>05</p>
<p>06</p>
<p>07</p>
<p>08</p>
<p>09</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
</div>
</div>
<div class=”copyright”>bottom</div>
</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 点赞

仿wordpress管理后台设计的后台管理框架相关推荐

3. 在WordPress管理后台撰写第一篇博客文章
3. 发布第一篇博客文章在前面的文章中,我们首先介绍了1. 购买云服务器和域名的基本操作,然后又成功2. 搭建最简单的博客网站,如果你还没完成上面这些操作,请提前点击查看. 这篇文章我们首先熟悉下网 ...
后台产品的基石：权限管理体系设计
后台产品的基石:权限管理体系设计什么是后台产品? 简而言之,我们日常使用的互联网应用,有一些需要做数据/信息的呈现,管理维护这些数据/信息的产品,就是后台产品. 举个例子:在音乐app中有很多的歌曲 ...
Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理
Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理 ...
dtree 后台管理例子_产品的后台设计整理与总结
做B端产品有三年吧,最近闲来无事,对于产品的后台设计进行了整理与总结. 一,什么是产品后台产品后台就是是对前端信息页面的映射,也就是说,前端有什么展示,我后端就显示什么.产品后端是适用于产品的前端, ...
电商后台设计：品类管理
商品作为整个电商平台中的核心,系统中所有的业务都需要根据它来展开,所以设计一套易用.可扩展的商品模块是非常重要的.文章从品类管理的基本业务出发,对具体的功能模块展开了梳理说明,希望通过此文能够加深你对 ...
轻量化后台管理HTML设计页面
轻量化后台管理HTML设计页面下面为大家推荐一下自己开发的轻量化的后台管理页面设计,文件大小仅为10KB,可实现秒开. 如下图所示,可供大家参考.
后台管理界面--管理页设计
本章我们开始进行后台管理界面的设计,本节课设计一下登录后的管理页. 一．登录验证首先,创建一个数据库:easyui: 其次,创建一个表:easyui_admin: 然后,创建三个字段:id(自动编 ...
电商后台设计：属性管理
编辑导语:电商平台上出售着各种各样的商品,买家通过读取这些商品的属性介绍才能了解它的信息,确定自己需不需要.适不适合.电商平台中商品数量庞大,各商品的属性又千差万别,所以设计一套可复用的属性管理功能就 ...
基于Vue的管理后台设计（布局篇）
文章系列: 基于Vue的管理后台设计(布局篇) 基于Vue的管理后台设计(登录鉴权篇) 基于Vue的管理后台设计(打包部署篇) 前言我打算把接下来要写的几篇文章写成一个系列,用来记录一下如何基于Vu ...

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

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

仿wordpress管理后台设计的后台管理框架相关推荐

最新文章

热门文章