NekoFitness Life

因為接連著好幾天都有人一直問我如何從零開始設計一個好的樣式，說真的，我幾乎每一個星期要回5次，一個一個回了後，還是有一半的人是莫宰羊樣，我也不知道你們真的需要什麼。你們自己都毫無方向，讓我實在也很頭痛要如何回答，而且我早明擺了說不想再教學了、也不想再回答此類問題，卻還是看到很多人問，被問了我又忍不住回答，實在也真夠犯賤的我...

所以，這裡我再寫一篇如何從頭學習CSS的教學！再看不懂的朋友，就請放棄設計這一回事了吧，免得你苦惱，我也累...
● 認識模版

目前痞客有提供pixnet二欄式、pixnet三欄式、無名模版、樂多模版、痞客模版，差別在哪？在於標籤的不同！




● 認識標籤

pixnet二欄式：
#Top(橫幅)、#Sidebar(連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

pixnet三欄式：
#Top(橫幅)、#Sidebar-l(左方連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

樂多模版：
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

無名模版：
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

痞客模版：
#header(橫幅)、#links(連結列整體)、#content(文章區整體)、#comment-box(回應區整體)...


大致上，每種的模版大標籤都類似，僅有些許的不同，但在裡面的小細項就差異很大！例如：


pixnet二欄式：
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、span.date(文章日期)...

pixnet三欄式：
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、.date(文章日期)...

樂多模版：
.blogtitle a(部落格標題)、.sidetitle(連結列標題)、h3 .title(文章標題)、.date(文章日期)...

無名模版：
#pageheader h1 a(部落格標題)、.sidetitle(連結列標題)、.articletext h3 .title(文章標題)、.datediv(文章日期)...

痞客模版：
#banner(部落格標題)、.box-title(連結列標題)、.title(文章標題)、.publish(文章日期)...


仔細瞧，細項的部份就開始有許多大差異了！我只有截取些許部份來說明，完整的標籤請自己去找。為什麼痞客的拿去套用在無名不見得能用，因為標籤不同，原設定值的排列方式也不同，所以當然會不能用。痞客模版把許多小細項都拿出來，讓你可以控制很多小地方，所以在設計上，以痞客模版下去設計的，才更能達到你想要的境界...(此為個人感受)所以，想要設計，先選擇好你要用哪個開始下手吧！




● 基本樣式

這部份，請直接參閱我前一篇教學：CSS簡易教學




● 底圖搭配

當然要先試著自己用美工軟體設計個圖，才能下去設計...不然以CSS預設的，你只能有顏色加線條，這樣不是很沒創意？圖怎麼做？請自己試著別人設計好的圖，人家怎麼設計，大概就是那樣...這個圖要怎麼教起，實在很難！我會建議直接先去研究別人已經設計好的...




● 如何開始

了解每一個標籤代表什麼東西後，你可以先試著從基本樣式下去改改看，裡面都會有寫好的完整標籤！從最基本的改改色、改改線條、改改字體去練習。然後再試著設計一張banner去放在橫幅，看是否你設計的圖能照你想的呈現，如果可以，再去研究其他的小細項，甚至更難的部份...自己先試過，不行再問人，否則試都沒試過，誰知道要怎麼教你？




● CSS的書

基本上，我不建議買書，因為其實網路上可以找到的資料很多，買書反而成了很浪費的一件事...但，我有買，所以這裡介紹一下...

打造你的個性化痞客邦：這本完全就是為了痞客邦而生的書，內容還OK，有很詳盡所有模版的標籤、教學，和一些物件的教學。

CSS玩美樣式範例語典：各式各樣寫法的呈現，裡面都有...基本的，到進階的，還蠻容易懂的！




● 最後我的話

如果，以上您都還看不懂，又想要自己來，就自己從頭到尾去請教別人，找看看有沒有人願意一個地方一個地方教你開始學寫CSS，然後自己再花比別人多一倍的心力去研究，但請做好“被肚爛”的心理準備。因為CSS是需要花很多的時間去研究的，別人又沒有義務一定要教你，如果自己一直搞不懂，就別期望別人一定要有耐心教你，畢竟CSS這種東西，說句難聽的，是講天份的...想要研究別人已經設計好的，當然可以，但請謹記一件事“別人的設計是別人的東西，別自己改過之後就當自己的，還不要臉分享出去。”被發現了，會招人公幹！懂嗎？

要問我怎麼設計，可以！

請先自己搞懂什麼是標籤、真的有去爬過文還是找不到或不懂的再問我，不要我講了什麼是標籤、模版的差別在哪、字體怎麼改，還有聽沒有懂，根本就是要我從頭到尾step by step教？如果是這樣，請拿錢來，我會認真考慮要不要教...否則別怪我，直接忽略問題，叫你自己去爬文，甚至一個不爽殺了你的問題！問問題，也請拿個具體的東西來問，不要沒頭沒尾的，問了半天問不到重點。我以為你在問東，回答了以後，搞半天才知道你在問西，簡直是浪費我的時間。別把我惹火了...到時我留言版再關閉，網誌也不准再提問，就你害的...

最最最後，呼應“壯兔兒”的文章。請教，請用好一點的態度具體發問，然後耐心等待人家回應，不要一直催，態度又不佳，我們會設計的是欠你不成啊？