HTML 後臺管理頁面佈局
阿新 • • 發佈：2018-12-29
設計網頁，讓網頁好看：網上找模板
- 搜 HTML模板
- BootStrap
一、內容回顧：
HTML
一大堆的標籤：塊級、行內CSS
position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float (clear:both)
line-height
border
color
display二、頁面佈局之主站頁面
主站佈局一般不佔滿頁面，分為選單欄、主頁面、底部 上中下三部分。虛擬碼如下：
<div class='pg-header' 三、頁面佈局之後檯布局
後臺頁面一般分為上面頂部選單、左側操作欄、中右為內容三部分。有的後臺可能會有個底部欄。
首先，左側操作欄和中間內容欄怎麼分，按照百分比的話，為了防止頁面拖拽導致佈局變化，可以設定最小寬度：
width: 20%;
min-width 其次，左側操作欄一般都是直接到底的，高度怎麼設定呢？
後臺管理佈局：position:
- fixed – 永遠固定在視窗的某個位置
- relative – 單獨無意義
- absolute – 第一次定位，可以在指定位置，滾輪滾動時，不在了。。。。
1、後臺佈局之：fixed 實現
只能實現左邊選單欄一直固定在左邊的這種情況。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title 2、後臺佈局之：absolute 實現
通過改一個屬性，就可以實現一下兩種佈局：
- a. 左側選單跟隨滾動條
- b. 左側以及上部不動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto; /*註釋不註釋，兩種佈局效果*/
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回頂部</div>-->
<!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回頂部</div>-->
<div style="background-color: purple;">
<p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>四、後臺佈局之選單欄設計
後臺管理頁面一般頂部選單欄，左側有個logo，右側有登入使用者，以及報警資訊，會話資訊等。
- 使用者頭像設計為圓的
border-radius: 50%; /*設計頭像圖片是圓的*/- 滑鼠移動過去之後，多個內容顯示出不同的樣式
<head>
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b{
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">567</div>
</div>
</body>- 引入第三方css外掛，好多圖示就可以直接用了。
總體實現
<!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"/>
<!--匯入第三方圖片外掛，目錄裡兩個css，一個壓縮版的一個沒有壓縮（壓縮版是一行）-->
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color: #204982;
text-align: center;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #204982;
}
.pg-header .user{
margin-right: 60px;
padding: 0 20px;
color: white;
height: 48px;
position: relative;
}
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
}
.pg-header .user .b{
z-index: 20;
position: absolute;
/*相對於使用者div定位*/
top: 48px;
right: 0;
background-color: white;
color: black;
width: 160px;
display: none;
font-size: 14px;
line-height: 30px;
}
.pg-header .user .b a{
padding: 5px;
color: black;
text-decoration: none;
}
.pg-header .user .b a:hover{
background-color: #dddddd;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 9;
}
/* 設定訊息樣式，數字外邊加個圓圈 */
.info {
border-radius: 50%;
line-height: 1px;
background-color: red;
padding: 10px 7px;
font-size: 12px;
display: inline-block;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
順勢而為
</div>
<div class="user right">
<a class="a" href="#">
<img src="22.jpg">
</a>
<!--滑鼠放在頭像上的下拉框-->
<div class="b">
<a href="#">我的資料</a>
<a href="#">登出</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<!--從圖示官網找圖示引用語句複製下來 -->
<span class="info">5 </span> <!--比如5條訊息-->
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color: purple">
<p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>