介紹過boby後

這裡要介紹更改後台管理列的狀態

當您登入痞客邦帳號後

最上頭會出現「新發表文章」以及「後台管理列」

要更改這裡顯示狀態就必須要找到位置「#authority」

您會發現有時會看到#authority或是#authority a ..................

其實會有差別

#authority好比籃子

#authority a好比雞蛋

更改#authority可以改變籃子大小相對同時也可以改變雞蛋大小,但是改變有限

更改#authority a只能更改雞蛋大小,但是這裡面可改變更加豐富

不知道這樣比喻可否清楚

首先嘗試改變一下

#authority {
width:950px;   <-- 改變這裡狀態
text-align:center;
font-size:12px;
background:#ddd;
-webkit-border-bottom-right-radius:8px;    <-- 可刪除
-webkit-border-bottom-left-radius:8px;    <-- 可刪除
-moz-border-radius-bottomright:8px;    <-- 可刪除
-moz-border-radius-bottomleft:8px;    <-- 可刪除
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
-moz-box-shadow:1px 1px 2px #aaa;    <-- 可刪除
-webkit-box-shadow:1px 1px 2px #aaa;    <-- 可刪除
box-shadow:1px 1px 2px #aaa;
margin:0 auto;
padding:8px 0;
}

 

這一行是可以變化這方塊大小

原本寬度為950

把寬度改變為1024

authority-width 1authority-width 3

authority-width 2

感覺變寬了

authority-width 4  

 

試試看改變font-size 設定字體的大小。

原始設定為12px

設定改為24px之後

 

authority-font-size 1 authority-font-size 3

authority-font-size 2

感覺到了嗎?

裡面的字體以及框框大小變了

authority-font-size 4 

修改

border-bottom-right-radius

border-bottom-left-radius

這是把這方塊變更的指令

原本8px

更改設定為24px

 

authority-border-bottom 1 authority-border-bottom 3

 

authority-border-bottom 2

角度改變了

authority-border-bottom 4

如果把這兩個值取消時會如何

如何取消多加「-」

 

authority-border-bottom 5

 

變成直角

 

authority-border-bottom 6 

 

接下來介紹box-shadow

這指令主要是讓這方塊多加陰影及顏色效果

試試看吧!

原本box-shadow:1px 1px 2px #aaa;

更改為box-shadow:5px 5px 10px #aaa;

 

authority-box-shadow 1 authority-box-shadow 3

authority-box-shadow 2

是不是出現陰影的狀態了「試著改變顏色會更加凸顯」

authority-box-shadow 4 

 

介紹這裡padding:8px 0;

更改這理會讓方塊變長

接下來試試

原本的狀態

修改padding:16px 0;之後結果如下

authority-padding 1 authority-padding 3

authority-padding 2

感覺變長了

authority-padding 4 

 

 

 

 

 

 

 

 

arrow
arrow

    ☆故事☆ 發表在 痞客邦 留言(1) 人氣()