后台管理页面布局
Posted 颜言
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了后台管理页面布局相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 .pg-header{ 18 height:48px; 19 background-color: #2459a2; 20 color: white; 21 } 22 .pg-content .menu{ 23 width:20%; 24 background-color: red; 25 min-width: 200px; 26 height:500px; 27 } 28 .pg-content .content{ 29 width:80%; 30 background-color: green; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="pg-header"></div> 36 <div class="pg-content"> 37 <div class="menu left">a</div> 38 <div class="content left"> 39 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 40 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 41 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 42 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 43 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 44 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 45 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 46 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 47 </div> 48 </div> 49 <div class="pg-footer">e</div> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <!--后台管理页面布局2--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 .pg-header{ 18 height:48px; 19 background-color: #2459a2; 20 color: white; 21 } 22 .pg-content .menu{ 23 position: fixed; 24 top:48px; 25 left:0; 26 bottom: 0; 27 width: 200px; 28 background-color: #dd4920; 29 } 30 .pg-content .content{ 31 position: fixed; 32 top:48px; 33 right:0; 34 bottom: 0; 35 left:200px; 36 background-color:purple; 37 overflow: auto; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="pg-header"></div> 43 <div class="pg-content"> 44 <div class="menu left">a</div> 45 <div class="content left"> 46 <p>23423</p><p>sadas</p><p>sadas</p><p>sadas</p> 47 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 48 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 49 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 50 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 51 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 52 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 53 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p> 54 </div> 55 </div> 56 <div class="pg-footer">e</div> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <!--后台管理页面布局3--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .item{ 9 background-color: #dddddd; 10 } 11 .item:hover{ 12 color: red; 13 } 14 .item:hover .b{ 15 background-color: green; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="item"> 21 <div class="a">123</div> 22 <div class="b">456</div> 23 </div> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <!--后台管理页面布局4--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 .pg-header{ 18 height:48px; 19 background-color: #697dc6; 20 color: white; 21 line-height: 48px; 22 } 23 .pg-header .logo{ 24 width: 200px; 25 background-color: #889ff9; 26 text-align: center; 27 } 28 .pg-header .user{ 29 /*width:160px; 30 background-color: wheat; 31 color: #75a261;*/ 32 m以上是关于后台管理页面布局的主要内容，如果未能解决你的问题，请参考以下文章