後臺管理頁面布局
阿新 • • 發佈：2018-06-16
doctype set html 用戶 osi 過多 -a 執行 oat
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--引入css樣式--> 7 <link rel="stylesheet" href="fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome.min.css"> 8 <style> 9 /*設置body樣式*/ 10 body { 11 margin: 0; /*去掉藍色邊框兩側的空白因為body默認屬性兩邊有縫隙*/ 12 } 13 14 /*設置頭部樣式*/ 15 .pg_header { 16 background-color: #2459a2; 17 height: 48px; 18 line-height: 48px; /*設置header中的內容根據高度上下居中(文字)*/19 20 min-width: 980px; /* 設置最小寬度*/ 21 } 22 23 /*設置logo樣式*/ 24 .pg_header .logo { 25 background-color: #3b5998; 26 27 width: 200px; 28 height: 48px; 29 color: white; 30 font-size: 20px; 31 text-align: center; /*設置在這個div中左右居中*/ 32 33 } 34 35 /*設置用戶標簽樣式*/ 36 .pg_header .user { 37 margin-right: 80px; 38 padding: 0 20px; 39 height: 48px; 40 position: relative; 41 } 42 43 /*設置當鼠標放到這個標簽上時變色，並且把*/ 44 .pg_header .user:hover { 45 background-color: steelblue; 46 47 } 48 49 /*設置頭像下面的下拉框，鼠標放上去彈出下拉框，其實就是當鼠標放上去的時候讓b去掉以前設置的的display=none*/ 50 .pg_header .user:hover .b { 51 display: block; 52 } 53 54 /*設置頭像樣式*/ 55 .pg_header .user .a img { 56 width: 40px; /*設置頭像寬度*/ 57 height: 40px; /*設置頭像高度*/ 58 margin-top: 5px; /*設置圖片距離上頂的距離是多少像素*/ 59 border-radius: 50%; /*border-radius: 50%讓方形的圖片變成圓的*/ 60 } 61 62 /*設置下拉框樣式*/ 63 .pg_header .user .b { 64 position: absolute; /*和user中的relative同用*/ 65 top: 48px; 66 right: 0; 67 background-color: #bbbbbb; 68 z-index: 20; 69 width: 160px; 70 margin-right: -39px; 71 margin-top: 0; 72 display: none; 73 74 } 75 76 .pg_header .user .b a { 77 display: block; 78 } 79 80 /*設置左側邊框樣式*/ 81 .pg_content .menu { 82 position: absolute; /*使用position後top等屬性就可以使用了，就可以使用這些屬性將一個DIV固定到某個位置*/ 83 top: 48px; 84 left: 0; 85 bottom: 0; 86 width: 200px; 87 background-color: #ff3955; 88 min-width: 200px; /* 設置最小寬度也就是當網頁窗口縮小到一定程度的時候，*/ 89 /*這個div就會永遠執行它的寬度是200px,註意：並不是所有瀏覽器都適用於本方法*/ 90 } 91 92 /*設置右側邊框樣式*/ 93 .pg_content .content { 94 position: absolute; /*使用position後top等屬性就可以使用了，就可以使用這些屬性將一個DIV固定到某個位置*/ 95 top: 48px; 96 left: 200px; 97 bottom: 0; 98 right: 0; 99 background-color: #0aa770; 100 overflow: auto; /*用了overflow之後當這個div中縱向內容過多時會出現下拉框*/ 101 min-width: 980px; /* 設置最小寬度*/ 102 z-index: 9; 103 104 } 105 106 /*設置往左飄浮樣式*/ 107 .left { 108 float: left; 109 } 110 111 /*設置往右飄浮樣式*/ 112 .right { 113 float: right; 114 } 115 </style> 116 </head> 117 <body> 118 <!--頭部--> 119 <div class="pg_header"> 120 <div class="logo left">老男孩</div> <!--這個設置往左飄浮--> 121 <i class="fab fa-500px"></i> 122 <div class="user right"> <!--這個設置往右飄浮--> 123 124 <a class=‘a‘ href="#"> 125 <img src="88.jpeg"> 126 </a> 127 <div class="b" style=""> 128 <a>我的資料</a> 129 <a>退出</a> 130 </div> 131 </div> 132 133 134 </div> 135 136 <!--中間--> 137 <div class="pg_content"> 138 <!--左側邊框（菜單欄）--> 139 <div class="menu left">a</div> 140 <!--左側邊框（內容欄）--> 141 <div class="content left"> 142 <p>dsdf</p> 143 <p>dsdf</p><p>dsdf</p> 144 <p>dsdf</p><p>dsdf</p><p>dsdf</p> 145 <p>dsdf</p><p>dsdf</p> 146 <p>dsdf</p><p>dsdf</p> 147 <p>dsdf</p><p>dsdf</p> 148 <p>dsdf</p><p>dsdf</p><p>dsdf</p> 149 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 150 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 151 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 152 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 153 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 154 <p>dsdf</p> 155 156 157 </div> 158 </div> 159 160 161 <!--底部--> 162 <div class="pg_footer"></div> 163 164 165 </body> 166 </html>
效果如下圖
後臺管理頁面布局