後台管理頁面1

2022-02-20 16:34:11 字數 1374 閱讀 3596

1. html:標籤

2.css:

position

background

text-align

margin

padding

font-size

z-index

overflow

hover

opacity

float(clear:both)

line-height

border

color

display

頁面布局:

後台管理布局:

position:

fixed

relative

absolute

1.  .left

10. 一點頭像,就有了下拉列表。z-index 是沒有單位的。

11. 補充知識: item:hover ,當滑鼠放上去的時候,item下的都變成了紅色。

123456

12. 當滑鼠放上去的時候,item下的乙個變成紅色,乙個變成綠色。.item:hover .b  

給item下的hover下的b加上這個樣式 

123456

效果:

13. 至此,

老男孩        

我的資料

登出

aasdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

沒有點選頭像的時候:

點選頭像的時候:

14. 為了好看些,自己調寫顏色和大小。

老男孩        

我的資料

登出

aasdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

後台管理頁面布局

簡單的乙個頁面布局,頭部 左側選單欄,右側內容,頭部和選單欄固定位置,內容部分如果很長就會出現滾動條 兩種方法能實現,其實兩種差別只有乙個屬性不一樣。1.1 使用position fixed 1.先定義三個div標籤 2.設定頭部樣式,高48px,背景色藍色 頂部出現乙個藍色長條 3.在pg con...

React後台管理系統 使用者列表頁面

1.頁面的結構 遍歷list,返回資料 let listbody this.state.list.map user,index 當this.state.list.length 0,第一次載入的時候firstloading true,顯示 正在載入資料 當this.state.list.length ...

商城專案實戰13 展示後台管理頁面

我們前面做了那麼多準備不是白做的,大家如果堅持到現在,真的值得給自己乙個擁抱!現在我們就來開始著手處理後台管理系統。首先,大家需要整合淘淘 的後台管理系統靜態頁面,即需要將以下css js jsp三個資料夾新增到taotao manager web工程中的web inf下。整合靜態頁面之後的效果為 ...