仿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 点赞
时间： 2024-10-09 14:34:05