小無的不臘閣 大圖多建議電腦版

【使用說明】

測試環境為 IE6 IE7 FF3，有任何疑問與發現錯誤歡迎回報。
建議螢幕解析度 1024x768 px 以上，內文圖片寬度 615 px 以下，右側連結內容寬度 269px 以下。

【聲明】

方便每個人不同的習慣與喜好，提供CSS註解，可自行修改。
不過要重新發表或是貢獻出去等等，請禮貌上 務必 事先 詢問我。
（因為發生過先斬後奏，我去信卻再也沒有下文的事情...感覺不太好...@@）

【語法】

請選擇複製以下網址之ＣＳＳ貼到［樣式管理］→［修改CSS樣式表］裡面。
http://smallwu36.googlepages.com/20090509blogcss_xjapan_wretch

（PIXNET的網誌樣式CSS請見這篇 ，同文也有製作過程@@）

【測試與感想】

測試截圖：點縮圖可新視窗放大，測試解析度1920x1080（22"寬螢幕）

無名小站網誌CSS限制很多，無法依照不同瀏覽器分別設定
如IE7的小星星或加號 #banner { *padding:10px;  +width: 425px;}
IE6的底線 #banner { _padding:10px; }
或火狐的驚嘆號重要 #banner { padding:10px !important; }

因此放棄了一些設計，也統合了某些設定。
另外太長的語法竟然無法存檔，頗訝異，CSS也有字數限制的啊|||orz
害我勉強刪掉一些註解和分隔用斷行空白，還有暫時隱藏的css標籤屬性設計。

Mozilla Firefox 3.0.10
 

上圖右邊「xxx的地盤」各個服務的超連結，像是首頁或加入好友，位置都很正常。
然而下圖使用IE 7 就會有一小截空白。明明文字都移走了，IE還保留空位癡癡的等什麼東西...  

IE 7.0.5130
 

IE 6
 

我比較擔心的是IE6，BUG很多，支援度也相對弱～（上圖回應輸入欄寬已修正...相對值改為絕對值）
無名的CSS標籤比痞客幫少很多， 一個標籤包含很多地方
優點是一舉數得節省修改時間，缺點是細微處沒有獨立標籤可以設計ˊ.ˋ

像是PIXNET「繼續閱讀」 .more {} 我使用圖片替代文字成經典口號「WE ARE X !!! 」
想如法炮製卻發現WRETCH「繼續閱讀」包含文章分類（ .articletext .extended {} ）

發表文章的年月日時間， PIXNET可以分隔設顏色背景等
.publish {}
　　.month {}
　　.date {}
　　.day {}
　　.year {}
　　.time {}

WRETCH的只有 .date {} 和 .datediv {}  (同範圍雙層)
位置並且受制於[發表新文章] [樣式管理] [網誌管理] [音樂管理] 這四個按鈕(INPUT) 的擠壓

說到INPUT，無名的搜尋網誌文章文字輸入欄和確定按鈕等無法分別修改
#boxSearch {}
　　#boxSearch .boxSearch0 {}
　　　　#boxSearch .boxSearch0 .sidetitle {}
　　#boxSearch .boxSearch1 {}
　　　　#boxSearch .boxSearch1 .side {} /*這只是連結區單一區塊的內容*/
 
因此沒辦法像痞客那樣浮動至右上方，改成十字架的按鈕～
#search {}
　　#search .box-title {}
　　#search .box-text {}
　　　　#search-target {} /*這是輸入欄*/
　　　　#search-submit { } /*這是確定按鈕*/

難怪參考很多樣式貢獻的CSS高手都隱藏網誌搜尋~
然後又奇怪了，無名樣式貢獻的規範說不可以隱藏任何區塊啊～（？
不過這個樣式光是最上方的 X JAPAN 高度爆表就不可以投稿了XD
這條 banner(上方廣告尺寸)height:350px，除了有特殊需求~~~最高不要超過400px 
而我的橫幅高度                     Height: 680px XDD (真的是有特殊需求啊XD

歷史上的今天　.articletext  .history { }
怎麼樣就是無法靠右對齊， text-align: right; 不行， margin 或 padding 也失敗
float:right 浮動則反而標題超越內容，位子相反　囧
最後乾脆把延伸閱讀也靠左對齊...

連結區 #links 假如超連結使用區塊顯示 display: block ;
很多地方會蹦出多餘的分行 <br/>
此時可以隱藏顯示 如 #links br { display: none; }
但是小心某些地方隱藏顯示是無效的，如文章分類
必須設回相反的行內顯示　display: inline ;

頁尾 #footer {} 底下好像還有些延伸區塊，若設計上有需要更長的範圍
可以用原始碼查看標籤名稱。

　　　＊　　　＊　　　＊　　　＊　　　＊ 

還有哪些事項我也忘了，晚點去PTT發文徵求勇者測試好了~
昨天為了解決這個樣式只睡三小時，早上上班竟然沒有恍神耶！迴光返照嗎XD!?
今天想早睡啦。

其實上星期是想放棄了，卻收到站內信詢問進度XDD
哈哈，沒有壓力我果然就不會前進XD