我想這個討論板上不乏網頁製作高手
但小弟到最近才了解Html語法以及css的奧妙
在嘗試之下才逐漸有了改造的樂趣～
只是有一些圖片跟連結不曉得有沒有違法@@|||
在此給各位大大看看 將無名部落格改造成蘋果風:D
點我！！
3.0版本～
大幅更新～圖都自己用photoshop改的
若不是版上大大幫忙（被雷劈大大）還有一些朋友的鼓勵與批評
一個四天前還是css生手的我～竟然已經學得了這麼多~>"<～
在此獻上一鞠躬
如果覺得做的不錯 麻煩加個分吧:D
附註：我使用safari修改 用FF可以正常觀看 關於gabbly（聊天室般的東西）
有許多朋友詢問是怎麼做的 這裡有官網 可以觀看:)
gabbly.com
姚子2006.8.14
我就簡單把步驟列一下好了...
基本上無名小站的網頁小幫手我從來沒用過
因為我本身用ibook跟safari 發現html編輯器好像不是很好出來~"~
於是在這種情況下 就想到稍微研究一下Html語法跟css
1.確定你要找的圖片在哪？
我的圖片基本上都從網路取得，所以去谷歌大神，鍵入"apple"﹑
"macosx"﹑"macosx,leopaad"即可以找到很多圖的網址
我選用的圖片：
整體背景
飛躍的macbook pro
蘋果上製作
黑底白蘋果
2.進入你的"blog"
基本上有支援css修改的blog都可以拿來嘗試加以改造一番
我使用的範例為無名-amai 我要快樂的板型
每一個板型開放的權限不同
css開放修改的多寡也有影響
但大體不外乎
html的背景
body的背景
banner（首頁的圖片）
powered by（無名小站的標誌）
3.替換css碼
仔細檢驗底下的地方～雖然會有一些差異 但多少都會有一些部份
a.標題（顯示你修改的這個部份是影響哪個部份）
b.圖片的網址（這就是我們看到的板型的基本預設圖）
c.長與寬的調整（可不調 但每張圖在放置進去時都要考慮一下長寬比例 不然可能會不大合）
1.修改首頁的圖片 banner
/* banner這裡寫著以下的參數是要修改banner的 最常用！必記
------------------------ */
#banner {
width: 550px;首頁圖片框的長
height: 368px;首頁圖片框的寬
background: url('http://www.dagensit.no/multimedia/archive/00095/LB-Apple_MacBook_Pro_95460j.jpg') no-repeat right top;
本來是http://pic.wretch.cc/icon/htcmi/blog_design/blog39/b39/banner1.jpg
position: absolute;
top: 0px;
right: 0px;
其他不修改，但是本來圖片的大小為445x368。所以取代的圖片請盡量不要差太多
2.
/* general set比較進階，背景部份
------------------------ */
html {
background: url('http://img439.imageshack.us/img439/8085/leopard2big0ds.jpg') #333 50% 0%;
原本的為http://pic.wretch.cc/icon/htcmi/blog_design/blog39/b39/html.jpg
}
原本有預設為reapt（圖片一直重複填滿背景），所以請盡量找重複很多張也不會奇怪的圖或者是超大的圖
3.
#boxProfile .boxProfile0 {在最左上角 基本資料上方的字樣
height: 30px;
background: url('http://www.applex.com.tw/images/madeonamac.gif') no-repeat 0px 0px;
本來應該是http://pic.wretch.cc/icon/htcmi/blog_design/blog39/b39/links.jpg的最上面那部份
border-bottom: 1px solid #777;
margin-bottom: 5px;
4.}
#links .powered .powerlogo img {
display: none
要設none 才能夠不看到本來太過鮮豔的無名小站字樣
}
#links .powered .powerlogo {
width: 115px;
height: 45px;
background: url('http://www.3cbank.com/vendor/apple/logo.png') no-repeat 0px 0px如果本來不是的話請改設成0px 0px ;
本來應該是http://pic.wretch.cc/icon/htcmi/blog_design/blog39/b39/links.jpg的最下面那部份
display: block ;
然後按下存檔:D（請記得備份）
接著就大功告成了！！
css相當有趣 如果還需要鑽研的話可以一併討論
板上高手還很多 小弟只是不才把改造過程po出
謝謝
姚子2006.8.12
用數據說話的科技自媒體
https://3cdogs.com/
內文搜尋
從 APP 打開
X