day--16頁面布局
阿新 • • 發佈：2017-10-06
menu css樣式 dddd 操作 一個 family 滾動條 code 內容
後臺頁面布局
一、fixed布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--對body標簽執行CSS樣式操作 --> <style> body{ margin:0; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .left{ float:left; } .right{ float:right; } .pg-content .menu{ position:fixed; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:fixed; top:48px; right:0; bottom:0; left:200px; background-color:pink; overflow:auto; } </style> <!-- 上面overflow是滾動條，當內容超過頁面的高度之後，定義overflow會出現滾動條，讓能夠拉動看到下面的內容 --> <!-- 最小寬度，當比例小於最小寬度失效，執行最小寬度 --> <!-- 另外一個移動的邊框會受到影響，會出現什麽情況 --> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> </div> </div> <div class="pg-footer"></div> </body> </html>
day--16頁面布局