August 25,2005 05:46

用CSS 讓回覆留言更方便 (延伸教學)

回覆留言實在是件榮幸但是麻煩的事情
直接使用留言功能,就會變成分辨不出來哪一個是主人的留言
回覆的又是哪個留言

前導::: Mr. 戀上 Miss. ::中的如何在回應裡直接回覆別人的留言?

在看延伸教學前請先了解前導部落格的說明,才能懂延伸說的東西喔

延伸:
學會了<div>語法怎麼用在回應後,
現在可以在對方留言裡作出像是版主回應的樣子.
回應變得更方便
但是每一次都要打上一大堆語法
每次都會忘記,還滿討厭的

教你如何讓長長的語法
<div style="background-color:#F0FDCC; margin:0px 10px; padding:5px;border-top: 1px dashed #535353 ;font size:10px; color:#493330;">回覆的內容 </div>

變得這樣短
<div class=reply> 回覆的內容 </div>
卻是一樣的效果


善用CSS的功能
去看樂多CSS的最下方會看到這些
●●●●●●●●●●●●●●
img {BORDER: 0px;}
.pict {MARGIN: 5px 5px 5px 5px;}
.photo {TEXT-ALIGN: center}
.nickname {FONT-WEIGHT: bold; FONT-SIZE: 12px; MARGIN: 10px 0px; COLOR: #7f8eb7}
.message {FONT-SIZE: 12px}
●●●●●●●●●●●●●●


這些都是針對不同的部份的顯示設定
例如圖片的顯示設定(.photo), 引用文的顯示設定(.quote)
所以我們也可以自行增加一個類別,作為回應文章的顯示設定
就暫時取名為 reply 好了
(可自由取名,注意不要跟已經有的名字重複)

一個類別的方式長得像這樣
.reply {}
前面有個一點( . )的其實就是代表一個類別
{ } 中間,則是打入想要的語法
以swing部落格的為例:
<div style="background-color:#F0FDCC; margin:0px 10px; padding:5px;
border-top: 1px dashed #535353 ;font size:10px; color:#493330;">

原來的語法是長這樣

把這些設定放到.reply {}這個類別下面就可以了
像是這樣:
.reply {
background-color:#F0FDCC;
margin:0px 10px; padding:5px;
border-top: 1px dashed #535353;
font size:10px; color:#493330
}



嗯!這樣做好以後
我們就有一個叫做.reply 的樣式可以運用了

之後在回覆的時候,只要打上<div class=reply>回覆的內容</div>
就會讀取我們剛剛在CSS裡設定的結果
最後出現的樣子就是一樣的啦

這樣就再也不用記一長串語法了
理解他的操作以後,同樣也可以運用在插入圖片或是引用文的時候
大家可以多加利用喔!!!

● 重點提醒:<div class=xxx> 裡的名稱要跟你所設定的類別名一樣喔

  • swingmini 發表於樂多回應(18)引用(0)▽ 數位地攤編輯本文
    樂多分類:網路/3C │昨日人次:0 │累計人次:95
    Ads by Roodo! 

    引用URL

    http://cgi.blog.roodo.com/trackback/408566

    回應文章
    看到囉 ^_^
    寫的很棒唷

    其實你配色都配的很棒咧
    而且排版的方式也不錯唷
    謝謝你:D
    | 檢舉 | Posted by Sophie at August 25,2005 17:39
    這個很方便啊!!
    我也去試試看
    謝謝你的教學^^
    不客氣
    很高興有用喔
    | 檢舉 | Posted by dice at August 26,2005 09:48
    可是,單單寫div 怎麽知道要回復誰呢?
    還是要回文章編輯管理寫呀,
    回復在對方的留言下面
    也就是說手續還是省不了,只是語法比較好記而已喔
    | 檢舉 | Posted by at August 27,2005 23:21
    真的很不錯耶!
    不然每次回留言..
    都覺得很麻煩..
    謝謝你的教學..^^
    不客氣喔
    我也覺得這個很好用
    CSS應該還有很多發展空間吧
    | 檢舉 | Posted by carlo at September 27,2005 16:21
    swing:
    我想做個css框線的延申教學 讓它可以更廣泛的應用在「回覆留言」、也會引用到這篇文章的連結做為前導 特來告知妳一聲^^
    好的沒問題
    謝謝你的通知
    我很想看到是怎麼個新用法呢
    css真是無遠弗介
    | 檢舉 | Posted by 不點 at September 30,2005 23:36
    我已經照你的步驟作了,
    可是
    沒有用阿,
    我打出來的東西和沒有用語法一樣...
    | 檢舉 | Posted by elmush at October 28,2005 22:18
    ...我打的是<div class=reply></div>才對...
    忘了改成全形>"<
    | 檢舉 | Posted by elmush at October 28,2005 22:20
    已經解決了嗎?
    | 檢舉 | Posted by swing at October 29,2005 01:18
    我還是無法用呢,
    所以現在還是直接弄出一大串語法...
    | 檢舉 | Posted by elmush at October 29,2005 01:24
    應該不能弄成全形喔∼
    css裡reply前面也要有個點 .
    給我您的網址
    我去看看好嗎
    謝謝
    | 檢舉 | Posted by swing at November 1,2005 01:47
    抱歉,沒看到您的回覆所以才這麼慢回...

    網址:http://blog.roodo.com/elmine
    我在css裡面有加點呀!
    另外,我網誌中的回覆都是我乖乖打出來的...
    | 檢舉 | Posted by elmush at November 1,2005 21:18
    可惜無名無法使用^^"殘念~
    | 檢舉 | Posted by shibahime at November 2,2005 20:49
    swing大,我牽了您這篇的教學連結喔!
    | 檢舉 | Posted by elmush at November 3,2005 14:43
    elmush
    請用
    謝謝你的留言喔

    elmush
    我去你的網站
    但是沒辦法看到問題耶
    目前你也還是用同樣方式嗎
    哀優~~我過去你那邊說好了
    | 檢舉 | Posted by swing at November 7,2005 20:41
    太讚啦!!
    引用啦!!3Q!
    | 檢舉 | Posted by tony25852 at December 13,2005 21:22
    [URL=http://www.wertino.cn/geospirit] geospirit [/URL] geospirit [URL=http://www.wertino.cn/teresa-orlowsky] teresa orlowsky [/URL] teresa orlowsky [URL=http://www.wertino.cn/altalena-chicco] altalena chicco [/URL] altalena chicco
    | 檢舉 | Posted by Karen at June 14,2008 13:18
    你的解說很清楚,我已經成功了!thanks.
    | 檢舉 | Posted by Amber at September 24,2008 14:40

    謝謝你的教學!
    這樣子弄起來很方便而且也很好看 :)
    謝謝!
    | 檢舉 | Posted by 阿花 at January 10,2009 14:09