<< 樂多發揮空間大 | 回blog首頁 | CSS 學習步驟 >>

June 21,2005

回應文章之設計樣式

→

特地發一篇關於回應文章的設計樣式教學文

這篇教學文總共會教大家5 種CSS 設計樣式

至於是否還有其他樣式，就要大家自行發揮囉 ^_^

首先，大家必須在CSS 語法裡找到下列這段
.comments-body {
FONT-SIZE: 12px;
MARGIN: 10px 0px 0px 0px;
LINE-HEIGHT: 120%;
color: #333366;
padding: 10px;
FONT-FAMILY: verdana; }

這篇教學文所有的改法將會在這段CSS 進行
一般而言，等一下要加入的語法都會加在
「padding:10px」的下面，「FONT-FAMILY:verdana」的上面

1、底色 + 邊框


在上述CSS 語法加入下列語法↓
border-color: #999999; ( 這是邊框的顏色 )
border-style: solid; ( 邊框的線，solid 是實線；dashed 是虛線 )
border-width: 1px;
background-color: #fff0f5; ( 這是回應底下的顏色 )

2、單純底色


在上述CSS 語法加入下列語法↓
background-color: #fff0f5; ( 這是回應底下的顏色 )

3、左邊加線條


在上述CSS 語法加入下列語法↓
border-left: 2px solid #CCFF00; ( solid 是實線，dashed 是虛線；left 代表線在左邊，right 在右邊；2px 是線的粗細，可自行修改 )

4、底色 + 上行虛線


在上述CSS 語法加入下列語法↓
border-top-color: #ff6699;
border-top-style: dashed;
border-top-width: 1px;
background-color: #fff0f5;

( 仔細看，這邊的語法在border 的中間又加入了top，代表上方，所以如果想要虛線在下方，就改成bottom，一樣，right 是右，left 是左 )

5、雙線


在上述CSS 語法加入下列語法↓
border:3px double #FFCC66;
( double 是雙的意思 )

希望大家都派的上用場 ^^"

呼叫Jertsai
有沒有要補充的丫
( 最喜歡你來我家補充了 )

對了，Jertsai
能不能教我用捲軸式的教學框丫？
不然這樣感覺版面很容易拉大耶

Posted by happy1211230 at 樂多Roodo! │00:59 │回應(14) │Miss. 分享
樂多分類：網路/3C 共同主題：讓Blog更有自己的風格 工具：編輯本文
Ads by Roodo! 
回應文章
呵呵，捲軸式的啊，
你要去「我的旅行夢」家看。
他的那篇養水滴的文章有提到。^^

回覆：

哦哦哦

看到了 ^_^
Posted by auxo at June 21,2005 07:13
嗚嗚嗚...我真是笨死了~~~
每次一碰上CSS就是有看沒懂~~~唉唉唉~~~
難道沒有從基楚打起真的差拿磨多嗎?（嘆嘆嘆...）/font>
好恨吶～～～
喵呀～～＞＜～～怎麼辦吶～～～？？


回覆：

愕～
茉妍丫

沒有妳想的那麼難啦 ^^"
跟妳說唷！我剛開始也是一點基礎都沒有丫
其實還不過就是一大堆的英文罷了
只要有耐心，照著我寫的教學文一步一步去做，應該不難懂才對

除非，我寫的教學文妳看不懂 ^^"
( 應該不會很難懂吧 )

像這篇，如果一開始不是很會改
首先，把我最上方說要在CSS 作更改的那一段找出來
接著再隨便複製下面任一語法 ( 紅字別複製 )
然後貼上，再重新整理Blog 頁面就可以啦
Posted by 茉妍 at June 21,2005 09:12
＜textarea onFocus="this.select();" style="border: 1px solid #666666; width:380px; height:50px"＞文字＜/textarea＞

border → 邊框樣式
width → 寬度
hieight → 高度

如果你是用來編寫語法讓人複製，可以加上這個方便訪客～
onFocus="this.select();"
上面這個主要是讓滑鼠點到這個框欄時，會自動複製全部。

另外要注意是，要使用這個語法發表文章時，得選擇不自動換行，除非你的語法只有一行就解決，要不然都得如此，否則系統會在語法內自己幫你加上＜br＞，至於實際結果如何？可能就煩你自己測試看看囉~還是不行，我再貼圖給你看～


至於這次，沒什麼要補充的= =a
不過可以再介紹一個貼底圖，語法跟貼背景圖一樣，不過鮮少人用就是了，畢竟誰知道我的留言會留多長，哈~

不過可以提醒 padding ，其實這個東西很好用！
可以製造不同的效果，如果是這樣 padding:10px 就表示離左右上下邊框，再加10px才是文字的地方，如果不用這個，文字就會跟邊框連在一起了！
當然你也可以搞怪，讓左右上下各離不同的像素，其實有時候還蠻好看的！

(我今天好像都在說廢話！=口=)
Posted by Jertsai at June 21,2005 10:12
再說一個
border-top-color: #ff6699;
border-top-style: dashed;
border-top-width: 1px;
background-color: #fff0f5;

其實這個可以簡略的寫..抱歉..這我的習慣..相同的東西..習慣用同樣的方式表達..我比較方便查閱^^a

border-top: 1px dashed #fff0f5;
background-color: #fff0f5;

回覆：

呵呵～
謝謝分享，我總是懶得動腦把它縮減 @+@
Posted by Jertsai at June 21,2005 10:15
謝謝妳囉～～～喵喵～～
真是對妳感激不盡～～我回家一定踹～～用力踹～～否則太對不起妳了～～～謝謝妳～～謝謝～～。

回覆：

呵～
如果再不行，我也沒辦法了 @+@
Posted by ＠＠默言 at June 21,2005 10:47
感謝教學~~~~
我"苦讀"了好多CSS的教學喔,還是你的最簡單明瞭又清楚豐富! ^^
你真是太厲害啦~
那麼,今天就從留言版樣式開始玩吧~~
謝啦~~
Posted by 伊凡娜 at June 25,2005 01:02
如何才能像閣下那樣在部落格中回復回應文章呢？
順祝一切安好。
Posted by summer.Q at January 8,2006 21:04
回覆：

>> summer.Q

你好，已於你家回覆完畢 ^_^
Posted by 版主 at January 11,2006 10:55
但是,在我的blog裏,
找不到這語法.

我可以怎樣做?
.comments-body {
FONT-SIZE: 12px;
MARGIN: 10px 0px 0px 0px;
LINE-HEIGHT: 120%;
color: #333366;
padding: 10px;
FONT-FAMILY: verdana; }
Posted by 空氣 at June 16,2006 12:14
請問要如何以照片為主，文章詳見內文ㄋ？
我ㄉ照片都呆呆地擺在下面一排 >_
Posted by sara at June 22,2006 20:24
謝謝你哦！我已刪掉其中一則，還好可從email刪，不然我還真不知道從何找起
Posted by sara at June 23,2006 22:13
你好~有個問題想請教你，有人在我所發表的文章上留言，我想回應他的留言，請問要在哪裡回應他的留言~謝謝 ^＿＿＿^
Posted by Chinoiserie at January 17,2007 10:23
[URL=http://www.haroldini.cn/infisso-scorrevoli] infisso scorrevoli [/URL] infisso scorrevoli [URL=http://www.haroldini.cn/uscite-dvd] uscite dvd [/URL] uscite dvd [URL=http://www.haroldini.cn/strong] strong [/URL] strong
Posted by Johanna at June 18,2008 03:07
你好:
我在自訂css語法裡,没找到你說的那一段耶!
Posted by alin at December 8,2009 17:30


回最上方