2/1的藝術家

這邊要敎的是怎麼做出上圖的登入區
基本的語法已經寫在上一篇了
所以這邊使用時就不再做進一步的解釋 ( 參考上一篇 )


設定運行程式

#extraDiv6 { 
behavior1: expression(
 　　document.body.onload=function EX1(){
              document.getElementById('extraDiv2').innerHTML=' ............. ';
       　}   );
   }     /* 載入自訂登入區 */




修改自訂登入區屬性 (登入前)

#extraDiv2 {
  z-index: 20;    /* 設定第三維的高度 */
  height: 20px;
  width: 500px;  
  font-size: 10px;  
  text-align: left;     
  }   /* 自訂登入區所位於的區塊 */

#extraDiv2 form {
  float: left;     /* 登入區在extraDiv 內往左靠 */
  }

#extraDiv2 .a01 {
  FILTER: Alpha(Opacity=100);
  background: #fff;
  font-size: 10px;
  border: 1px solid #cfcfcf;;
  height: 12px;
  }     /* 控制帳號密碼的輸入區 */

#extraDiv2 .a02 {
  visibility: hidden;   /* 隱藏打勾勾的區塊 */
  }  

#extraDiv2 .a03 {
  FILTER: Alpha(Opacity=100);
  background:#ffc600;
  color:#816413;
  border:1px solid #cea002;
  font-size:10px;
  height:15px;
  margin-left:3px;
  margin-bottom:1px;
  }   /* 控制 input 方框 */



修改自訂登入區屬性 (登入後)

由於新的登入區是自訂的，所以在登入後它並不會消失
為了要讓它能夠消失
這邊使用了一些所謂的障眼法
首先，在自訂登入區所位於的區塊
也就是 #extraDiv2 裡寫入 z-index: 20; 這個語法
這代表了登入區在Z 軸的高度
接著修改 .powerin 及 .powerout  這兩個區塊
設定它們的 z-index: 25; 數值多少沒關係，反正要比20大就對了
這樣的話，他們就可以蓋過原先還在的自訂登入區
如上圖所示，如此便可達到我所要的效果


.powerin {
  padding-top: 5px;
  padding-left:85px;
  text-align: center;
  font-size:10px;
  position:absolute;
  bottom:9px;
  left:550px;
  width:155px;
  height:17px;
  z-index: 25;  /* 設定第三維的高度 */
  background:#e4e4e4;
  }   /* 控制 "進入自己的網誌" 這塊 */

.powerout {
  position:absolute;
  left:763px;
  bottom:13px;
  background:#ffc600;
  color:#816413;
  border:1px solid #cea002;
  font-size:10px;
  height:12px;
  width:32px;
  padding-top:2px;
  padding-left:8px;
  z-index: 30;  /* 設定第三維的高度 */
  }   /* 控制 "登出" 這塊 */


隱藏原先的登入區
想辦法把它們都給隱藏起來

.powered {FILTER: Alpha(Opacity=0);}
.powered input {FILTER: Alpha(Opacity=0);}
.powerjoin{display:none;}
.powerforgot{display:none;}
.powerlogo{display:none;}