不是不回信,不做事...而是不想一下子一堆訂單擠在一個時間,到時這個拖那個拖...大家等的時間愈拖愈長,那就對不起大家了,所以只好先暫時把後面的訂單緩一緩,晚些回,邊儘快清一清手邊的訂單...請大家見諒!!!
因為接連著好幾天都有人一直問我如何從零開始設計一個好的樣式，說真的，我幾乎每一個星期要回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教？如果是這樣，請拿錢來，我會認真考慮要不要教...否則別怪我，直接忽略問題，叫你自己去爬文，甚至一個不爽殺了你的問題！問問題，也請拿個具體的東西來問，不要沒頭沒尾的，問了半天問不到重點。我以為你在問東，回答了以後，搞半天才知道你在問西，簡直是浪費我的時間。別把我惹火了...到時我留言版再關閉，網誌也不准再提問，就你害的...
最最最後，呼應“壯兔兒”的文章。請教，請用好一點的態度具體發問，然後耐心等待人家回應，不要一直催，態度又不佳，我們會設計的是欠你不成啊？
Recommend to Front page
耶誕派對(update 12/8)
パンドラの箱(5)
來變相的跟你要答案嗎？
如果真的不會，就拿別人作的來改改圖片就好．．．
不要老是逼著一些好心人不爽ˊˋ
Ｑ謝了拉．．．
總有一天我會研究出來的＝︿＝
我想，學校哪天會教到這個．．．
我慢慢的一點一點研究好ＸＤ
等哪天我真的出師了，再來跟你報告吧！（苦笑）
不敢一直來吵阿Q
不會就是不會...改改圖就好...^^"
應該要先把html的東西先搞懂
這樣學起來會比較快~~~:D
之前學到一半才發現中間有很多東西還滿有關連的~~ㄎㄎ
其實有時候人是很懶的~~~
我好像也是~~((揍飛*
我可以理解,有時候真的會肝爆火= = |||
好詳細
寫的好詳細 連建議都很實在 引用囉 謝謝我剛學時還不太敢問別人 = =
網路查了很多資料又一個個慢慢試~ 呵。
如果可以,還是建議大家重最基本的開始吧~
畢竟有大部分的人不是從美工設計系畢業或專門..
一開始學CSS還事先了解各個標籤..參數的性質為優先!
等了解了大部分的常用的標籤,我想後面要變化就變得很簡單!
不管之後你要怎麼插圖片或美化..都不會再綁手綁腳~
呵呵
我應該沒有再問你關於CSS方面的問題了吧~~哈哈
不要討厭我不要討厭我~~（奔）
老是問人其實被問的也累,問的人也不見得能吸收進去吧
唉唉,想好好設計卻總是會有些令人不愉快的事情,一起加油囉:)
就告訴自己,設計是為了讓自己更美好XD
我就是看不懂的那個
所以很偷懶，直接來Q家偷樣式回家^^
謝謝阿Q唷
只是有一次手殘亂改
然後PIXNET顯示就怪怪的了
嚇到狸了(汗)
有一陣子沒來QQ的網誌了
有點銜接不上的感覺(什麼跟什麼阿!?)
狸會害羞一\\\\一(被砸)
(演戲結束)
唔
前一陣子比較忙
雜務太多(?)
所以就比較少來了
要不然就是來看看
還來不及回覆又跑去做別的事了=口=
*
阿Q息怒牙..其實我也想學CSS的東西..
但怕問到人生氣所以都拿書來看..
真的不懂看看文章在不行在問問嚕..
但是我不會問太多次哈..
粉怕別人抓狂= =!!
我好白喔！啪謝啦！
不好意思，打擾了。請原諒我這快５０歲的LKK，
可是我有認真學喔！
我懂了~
一定要自己去嘗試~!! 對吧~
假如說我想學css的話直接看普通的書還是說要看有關網誌的??
還有 那我用教學版型 最上面的橫幅要怎樣變大呢?
#banner{
background:#eee url(http://www.geocities.jp/choco_asa/img/kabe/heart/04/14.gif)
}
width:__px;
height:__px;
因為我把這段放敬都沒有動靜耶...
還有新增文章跟後台的
background:#ccc url() no repeat;
???????:__px;
???????:__px;
不管怎嚜調px都沒辦法符合我的圖片大小
還是說藥用按鈕的圖片有一錠的大小?
不過我還是有幾個問題
我的 橫幅
我想用這張圖片3
http://web2.go2upload.com/pic/2/27416.png
但放上去我的語法都跑不出來耶~
我的語法
#header{
background:#ccc url(http://p0.p.pixnet.net/albums/userpics/0/5/559405/1216988179.jpg) no-repeat;
background-position:right;
padding:5px;
margin-bottom:5px;
width:900px;
height:319px;
}
還有倒橫列怎嚜調位子ㄚ??
還有要怎嚜用成大大那種樣子??
五的語法
/*--其他服務連結區塊--*/
#navigation{
/*background:#fff */;
overflow:hidden ;
_overflow:none ;
_height:1% ;
padding: 5px ;
position: absolute;
left: 40px;
;
}
/*--其他服務連結區塊內的所有連結--*/
#navigation a{
display:block ;
width:60px ;
text-align:center;
font-family:標楷體;
font-size:medium;
color:#silver ;
background:#gray /*url(http://www.geocities.jp/choco_asa/img/kabe/heart/01/13.gif)*/;
padding: 5px 0px ;
}
因為我有調過位子
但都會跑到我文章那邊
謝謝~
頂多就是對空間、圖像的直覺罷了
只要多練習，多看看其他人的作品
有一天也會發現自己能夠做出有自己風格的作品
所以我非常認同阿Q這篇文章
不過我也只到能自己改改顏色跟線條的地步（嘆）
還有margin跟padding也搞不太懂...
摸了好幾天摸不出來=3=
不過看你的網誌我學到好多東西,很開心
只好繼續加油喏>"<
有關文章標題的字型，痞客邦是不是只能顯示細明體和標楷體…
（初學者，不太懂＞＜）
大大的教學文真的獲益良多－ －ｂ
這個時代...要當部落客果然得先學好語法啊...
完全忘光CSS基本編寫的人留
我用痞客邦三欄式做修改，我想改(包含左右欄及主文欄的總欄)
我試過用Container，也改過Content，但Container是總欄，而Content直接改的話整個介面會跑掉。
是不是我應該Sidebar及Content都改呢？還是要再加上什麼語法上去？
如果聽不懂我再說什麼的話，看到我的BLOG就會一目了然了@Q@
其他部份倒沒什麼大問題，努力研究當中...感謝阿Q
http://blog.roodo.com/13772568/847ddde7.jpg
痞客邦上的板模圖是Container、Container2、Container3，但三欄式板模中只有Container，所以我也不知道該怎麼表達ˊˋ
我要把圖中（藍色的部份）拉寬，試過改Container跟Content，但是都不對，如果要把他拉寬的話...應該要改哪個標籤呢？或者我應該新增什麼語法進去
非常頭痛...感謝阿Q
原來把#Main {}的width:改成auto就可以了！
另外它是痞客的板模哦，最基本的痞客三欄式^^
痞客邦的樣式不是有無名模板嘛
為什麼我把無名的ＣＳＳ貼過去然後改成無名模版
出來的卻不是我原本無名的樣式呢？
整個版面變的很奇怪
在網路上爬文大家也是都說ＣＳＳ貼過去然後按無名模板就會出來了
可是我弄了好久根本都沒有，所以想請教你一下
先在這裡謝謝你的回覆唷！
Comment Permissions: Allow commenting