原本只是在Blog檔頭加入了一個圖片,
結果後來跑去玩相簿的首圖,
發現可以經由CSS定位把
Pixnet相簿上面的廣告欄位遮起來,
只有一個爽字阿~呵呵喝,好高興唷^^
來看看方法,我只會亂搞,不會教,
看不懂就算啦=.= 反正大家的Blog自選樣式的CSS可能差異很大,
那改起來應該就更麻煩吧!

先看看Blog的加入上方橫幅,
==========
/*橫幅*/
#Top{
height:410px;
background:url(圖檔位址.jpg) ;
background-repeat:no-repeat; /* 讓圖片不重覆排列 */
background-attachment:fixed; /* 固定背景圖片位置 */
background-position:center bottom; /* 設定背景圖片位置 */
}
==========
加了Angela果真不一樣了,比之前淳樸文字的網誌豐富多了,
而且又不像用JS輪播相簿那樣耗系統。

在Pixnet感覺比較少在改CSS亂搞的,
好多好像都用預設的幾個樣版而已,
也不知怎發現的原本是想要再換相簿的圖而已,
誤打誤撞調錯了啥位置,把一邊廣告遮起來了,
後來定位在詳細研究調整後,果然成功了,
實在是太爽啦^^!

那個原本預設圖檔的形狀還不錯,改掉的話會變很花要調更多,
而且也沒找到適合的大橫幅,所以用原本的圖再加圖亂改,
還是口ㄞㄉAngela,這張風格感覺都走冷酷路線@@"

瞧瞧語法,這部分CSS沒啥註解,都是自己加的,
而且用這個樣版改要調3個地方,
==========1
#headerBody {
  width:733px;
  height:300px;
  margin:10px auto;
  background: url( 圖檔位址.jpg) no-repeat;

position:relative; /*上面加此3行定位-1*/
top:-130px;
left:0px
}
==========2
#albumTopic { /*使用者自訂相簿主題描述-2*/
width:10px; /*這邊依情況調整*/
   position:absolute;
   width:120px /*513px*/;
   margin-left:560px /*200px*/;
   margin-top:-30px /*-20px*/;
   text-align:right;
   font-size:16px;
}
==========3
#pageBody {
position:relative; /*下面定位加此行-3*/
 width:733px;
 margin:0px auto;
 margin-top:-210px /*-80px 下面相簿定位*/;
 padding:0px;}
==========

敘述CSS力求簡明扼要,
解析度調整了應該位置都還是正確,
使用IE6.0 XP SP2正確。

整個網站被Angela攻佔了,還好名片大頭貼是選Cyndi..ㄆㄆ
創作者介紹

ca95 台灣地誌

ca95 發表在 痞客邦 PIXNET 留言(0) 人氣()