NekoFitness Life

這是一份公告，在這裡向大家說聲抱歉，我過了這麼久才發現自己的疏忽，也給了大家錯誤的觀念。
因為網友Stacy問我『為什麼發表文章後，單只按enter分段卻不會分段？』我一直以為是因為痞客在改版之後，將<P>和<BR>區分出來的關係，所以有部份來問我的網友我都回答請他們像按enter+shift時，多按一次，就可以分段了。而我也因為一直習慣用enter+shift的<BR>分段方式，所以並未發現真正的問題所在。直到Stacy去了服務專區發問之後，得到以下回覆『目前您所套用的樣式將段落行距設定為不顯示，故您按 enter 時無法顯示空行的效果喔！』然後Stacy來告知我之後，我才認真去檢查我的css裡有何誤差會造成這樣的原因。經過我上網搜得的資料，在css裡的段落定義為p{}這個項目，因為我一直都因為習慣的問題，所以我根本無法發現問題所在，所以導致p{}這個東西一直被我忽略。並且當有網友來發問時，給予他們錯誤的觀念，至此，我深感抱歉！
假如，您套用我的樣式有上述的問題產生，請您自行在css裡加上p{margin: 0px 0px 10px 0px; }(部落格內所有段落) 或 .article-content p{margin: 0px 0px 15px 0px; }(只限文章內文區的段落)去修正，當然margin的距離是可以被修改的，4個數字的順序分別是上右下左，我會再多一段時間的測試，如果有發問題的朋友，也請回報，讓我有機會改進。在這裡，真的深感抱歉！！

因為接連著好幾天都有人一直問我如何從零開始設計一個好的樣式，說真的，我幾乎每一個星期要回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教？如果是這樣，請拿錢來，我會認真考慮要不要教...否則別怪我，直接忽略問題，叫你自己去爬文，甚至一個不爽殺了你的問題！問問題，也請拿個具體的東西來問，不要沒頭沒尾的，問了半天問不到重點。我以為你在問東，回答了以後，搞半天才知道你在問西，簡直是浪費我的時間。別把我惹火了...到時我留言版再關閉，網誌也不准再提問，就你害的...
最最最後，呼應“壯兔兒”的文章。請教，請用好一點的態度具體發問，然後耐心等待人家回應，不要一直催，態度又不佳，我們會設計的是欠你不成啊？

遇到有朋友問要怎麼把照片弄成有特色的點點邊框呢？
今天阿Q來教一下大家...請準備好你的Photoshop 7.0和Photoimpact 12，我們來學吧！
1. 首先請在Photoshop 7.0開啟一個無底色的你要的尺寸的檔 (範例尺寸為400*300像素)。
2. 開啟你要設計的照片。
3. 把你要的相片拖曳到空白檔裡，並調整好尺寸。
4. 接下來，請在Photoimpact 12開啟一個一樣大小的無底色檔。
5. 選擇輪廓繪圖工具。
6. 拉出一個你要的點點邊框，並調整圓角的程度。
7. 都調整好之後，另存新檔。
8. 請存成PSD(Photoshop檔案格式)。
9. 然後再到Photoshop 7.0開啟你已存好的點框PSD檔。
10. 再以拖曳的方式，把你製作好的邊框拉到你要設計的圖檔去。
11. 最後調整好位置，適當的再調整一下邊框和圖檔的大小，再加上你想要的文字。
12. 就這樣大功告成啦！
當然，你也可以把照片修成圓邊，讓圖檔看起來更完美。
因為Photoshop並無可以直接編寫點邊路徑的方法，
本來阿Q姐姐是教阿Q以另一套Adobe的軟體去製作後，再做結合。
但是後來有一天睡覺起來，突然想到PI可以製出漂亮的邊框，就這樣下去試做了出來。
我沒有很細節的，基本上，如果有在使用PS或PI的朋友，應該看的懂，有看不懂的朋友，再問我吧！

因為有很多朋友常常會問我字型怎麼改，這些問題。乾脆阿Q寫個基本教學，只要是簡單的修改，這些應該大家都能很容易上手^^
如果有不懂的，再問阿Q吧！
首先，要先了解CSS的架構，本來阿Q在之前有發表一篇引用人家寫好很整齊漂亮的“痞客CSS架構表”了，後來發現有些朋友一開始看好像會不懂。所以這裡加上“HTML架構圖示表”給大家一併對照著看，應該會更容易明白。

說明:阿Q的教學樣式的內容,只會包括阿Q懂的...所以如果你也有阿Q不懂的,也歡迎來教教阿Q喲!!   文字字體　font-family: “comic sans ms”, Georgia;
　　 “”中為首要表示文字,也可加逗號增加字體
 文字顏色　font-color: #000000;
　　 可簡寫color: #000000; 
  文字大小　font-size: 12px;
　　 其單位可為pt.em等…
  文字樣式　font-style: normal; 
　　 normal正常
　　
　　 italic斜體
  文字粗細　font-weight: bold; 
　　  normal正常
　　  bold粗體
　　  bolder特粗體
　　  lighter細體
  文字裝飾　text-decoration: underline;
　　  none無裝飾
　　  blink閃爍
　　  underline下劃線
　　  line-through刪除線
　　  overline上劃線
  字母字體　font-variant: small-caps; 
　　  normal正常
　
　　  small-caps小型的大寫字母
  字體轉換　text-transform: lowercase; 
　　  none無轉換
　　  capitalize每個單詞的字母大寫
　　  uppercase轉換成大寫
　　  lowercase轉換成小寫
  文字行高　line-height: 150%; 
　　  normal默認行高
　　  另可用百分比行高或單位行高
  文字間隔　letter-spacing: 0.5pt; 
　　  normal默認間隔
　　  另可用單位間隔, 如0.5pt或1px等...
  文字間距　word-spacing: 10px; 
　　  normal默認間距
　　  另可用單位間隔
  內容對齊　text-align: center; 
　　  left靠左對齊
　　  center靠中對齊
　　  right靠右對齊

平常大家在設計時,都會希望連捲軸顏色都是一致的,
所以今天來教大家怎麼在寫CSS語法時,把你的捲軸變色吧^^

你可以在html{}←整體頁面的地方加上,
如此會整體所有有捲軸的地方全都變成一樣的!!

學習CSS我是以速成法的方式,指的是現學現賣~
想到什麼,我就拿著收集的資料,直接試...所以可能方法沒那麼正統!
大家多多見諒~
學CSS的第一步,先了解CSS是什麼?

今天突然找上了OECSPACE　因為剛好要看一下CSS的樣式表
突然一陣感概
想當年　大約在5年前吧　Queenie還是死學生的時候
因為妹妹唸資管的　也對網頁設計有興趣　所以便開始學自己設計網站