簡易的後臺管理頁面佈局（二）
阿新 • • 發佈：2018-12-27
這裡做了一個簡易的模板，用到了一個獲取圖示的小工具，可以到這個網站下載：http://fontawesome.io/
色彩搭配也許不好看，我不是專門搞這個的。
由於時間原因沒有寫入JS，可以自己加入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; } /*這裡是為了填滿頁面*/ .left { float: left; } .right { float: right; } /*這裡為了方便設定的兩個float屬性*/ .header { height: 48px; background-color: blue; color: white; line-height: 48px; } /*設定最上面的頭部一欄*/.header .icons { padding: 0 30px; } /*設定頭部圖示內左右邊距*/ .header .icons:hover { background-color: navy; } /*設定滑鼠移動到圖示的效果*/ .header .logo { width: 200px; background-color: seagreen; text-align: center; } /*設定左邊的logo*/ .header .user { margin-right: 60px; padding: 0 20px; background-color: blueviolet; color: wheat; height: 48px; } /*頭部右邊使用者一塊的設定*/ .header .user:hover { background-color: navy; } /*當滑鼠移動到使用者的效果*/ .header .user .a img { height: 40px; width: 40px; margin-top: 4px; border-radius: 50%; } /*設定插入頭像的效果，注意這裡的border-radius：50%設定成圓形的*/ .header .user .b { z-index: 20; position: absolute; top: 48px; right: 0; background-color: aqua; color: black; width: 160px; display: none; } /*滑鼠接觸到頭像設定彈出欄，display設定成none，預設不可見*/ .header .user:hover .b { display: block; } /*這裡是一個重點，當滑鼠碰到頭像時候，頭像彈出欄的改變*/ .header .user .b a { display: block; } /*這裡設定頭像彈出欄裡面的a標籤*/ .content .menu { position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: darkgray; } .content .menu .m{ padding: 20px 0; text-align: center; } /*設定滑鼠移動到選單欄的效果*/ .content .menu .m:hover{ background-color: blue; } /*這裡設定左側選單欄*/ .content .content { position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } /*這裡設定最大的文字一塊內容*/ .content .return { z-index: 10; height: 50px; width: 80px; position: fixed; background-color: black; color: white; bottom: 20px; right: 20px } </style> </head> <body> <!--設定頭部--> <div class="header"> <div class="logo left"> 製作管理頁面 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="6666.jpg"> </a> <div class="b"> <a href="#">我的資料</a> <a href="#">查詢</a> <a href="#">設定</a> <a href="#">登出</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <!--注意這裡用來一個工具裡面的圖示，fontawesome的圖示工具--> <span>5</span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> <div class="icons right"> <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> </div> <div class="icons right"> <i class="fa fa-apple" aria-hidden="true"></i> </div> </div> <!--設定選單和內容部分--> <div class="content"> <div class="menu left"> <div class="m">選單1</div> <div class="m">選單2</div> <div class="m">選單3</div> <div class="m">選單4</div> <div class="m">選單5</div> <div class="m">選單6</div> </div> <div class="content left"> <div style="background-color: palegreen"> <p style="margin: 0">內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> </div> </div> <button onclick="GoTop();" class="return">返回頂部</button> </div> </body> </html>
效果就是這樣：
滑鼠移動到相應的地方效果：
這樣：
