日誌2008-02-13 00:09

css - 留言版篇

本文引用自此

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
如果沒有自己想要的效果，請看css - 語法說明
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

這教學是寫給我自己看的..
可以問問題..但是我自己也不是很懂XD

◎圖片要上傳到http://..某處..不能放在自己電腦..
我是放在這裡樂多日誌(不過沒有資料夾可以編輯,有點麻煩><)

1.這次要改的是留言板部分..粉紅色圈起來的地方+css設定框框+可以打字的框@@

2.將這段文字複製貼上..
/*文字版、留言版底圖*/
textarea {
background: url(http://網址)no-repeat;
background-position:right;
padding-left: 10px;
padding-right: 10px;
height:220px;/*留言版高度(不過也會影響到CSS的高度)*/
}

3.修改留言版文字,找到這段

/*input實線(只用於引用文章網址處)*/
.home_input2{
color:#FFFFFF;
border:1px solid #000;
background-color:#fff;
}/*input實線*/


4.『完成』

◎如果要改成純色,可將這行background: url(http://網址) repeat;
改成:background-color:#F6CDD7;　#f6cdd7為色碼..可自行更改..英文的話不用加『#』,可參考色碼表
◎若要使圖片完全透明的話,可改成background:transparent;
◎若要使圖片半透明,可寫 filter:Alpha(opacity=70,finishOpacity=1,style=0);更改70這個數字的大小即可。

ps.repeat:圖片重複　　　　　no-repeat:圖片不重複

邊框　　
　　border-top:#FFF 1px dashed;/*邊框上面 顏色 寬度 樣式*/
　　border-right:#FFF 1px dashed;/*邊框右邊*/
　　border-bottom:#FFF 1px dashed;/*邊框下面*/
　　border-left:#FFF 1px dashed;/*邊框左邊*/

　　邊框樣式屬性有：
　　　　dotted：點狀線　　　dashed：虛線　　　solid：實線　　　outset:凸起狀
　　　　double：雙實線　　　groove：溝道狀　　ridge：山脊狀　　inset：凹陷狀

　　當四邊都一樣時，可寫成
　　　　 border: 1px dashed #fff; /* 邊框 寬度 樣式 顏色 */

以上引用自【 修改文字版、留言版底圖 】
若有不懂的語法,可參考css - 語法說明

4

12

LINE 分享

相關創作

火狐Firefox CSS樣式：套件管理員美化

火狐Firefox CSS樣式：隱藏書籤、歷史按鈕選單的多餘選項完整版

火狐Firefox CSS樣式：美化套件管理按鈕

留言

• 2008-02-13 02:41Cilde. L. Larkspur：
  留言...我的回信有幫到你嗎XD?
  因為後來就沒下文了...汗

  2008-02-13 10:11小角落..：有!!感謝你~~
  寫教學寫太晚~
  後來就忘記回信了~
  抱歉抱歉XD

• 2008-02-14 18:57★晴宇★：
  情人節快樂唷^^

  2008-02-15 08:35小角落..：情人節快樂@@~
  呃..已經過了XD

• 2008-02-14 18:57★晴宇★：
  情人節快樂唷^^

  2008-02-15 08:35小角落..：情人節快樂@@~
  呃..已經過了XD

• 2008-03-02 20:17◤ カオス ◢：
  請問一下"小角落"大~
  我的css是哪兒出問題了?
  為何放上圖片後都沒有出現呢?
  
  /*文字版、留言版底圖*/
  textarea {
  background: url(http://img136.imageshack.us/my.php?image=kmpdvd016954214929zz4.jpg)no-repeat;
  background-position:center;
  padding-left: 20px;
  padding-right: 20px;
  height:220px;/*留言版高度(不過也會影響到CSS的高度)*/}
  filter:Alpha(opacity=70,finishOpacity=1,style=0);

  2008-03-02 20:47小角落..：啊?請問一下~你是要正中間那張圖嗎?
  我試過用你的貼上..也不能顯示說!!
  應該是圖片的位址有問題吧XD?
  你可以試試看我介紹的那個樂多日誌的看看嗎XD
  因為我的圖片~進去就只有那張圖片~沒有其他字什麼的

• 2008-03-02 20:57◤ カオス ◢：
  我已經修改圖片位置了~
  http://img136.imageshack.us/img136/6724/kmpdvd016954214929zz4.jpg
  不過依然還是沒有顯示出來＠＠
  
  沒關係~~ 我再去研究看看好了~~!!
  感謝"小角落"大^^

  2008-03-02 21:12小角落..：咦~你的確是jpg結尾~可是我顯示出來的怎麼會是一個網頁..而不是~裡面只有一張圖?
  抱歉沒幫上忙=口=

  2008-03-02 21:17小角落..：我顯示出來是這樣[img=http://blog.roodo.com/cornor/00d10fcc.jpg url=http://blog.roodo.com/cornor/00d10fcc.jpg]不是一張圖說

  2008-03-02 21:20小角落..：是這個http://blog.roodo.com/cornor/00d10fcc.jpg

• 2008-03-02 21:27◤ カオス ◢：
  咦? 修改後的網址應該是只有張圖片呀~~
  就像這裡~~
  (剛開始確實是我弄錯~~)

  2008-03-02 21:46小角落..：咦~你怎麼連結的XD
  這樣!?

  2008-03-02 21:46小角落..：原來可以連結~不能貼圖喔~也對~哇哈哈..
  所以說~可以了喔?

• 2008-03-02 22:10◤ カオス ◢：
  即使更正了網址~~
  還是不行耶....不知問題出在哪＠＠
  
  話說:"小角落"大是第一次使用[ 增加連結 ]的功能囉?

  2008-03-02 22:15小角落..：呵呵~我沒有在留言這邊試過..
  我不清楚ㄝ!!
  還是你在去勇者大廳~
  還是各個教學大大家裡留言看看~
  抱歉 幫不上忙阿阿阿~果然是門外漢~XD

  2008-03-02 22:18小角落..：咦~我這樣寫~可以阿!!
  /*文字版、留言版底圖*/
  textarea {
  background: url(http://img136.imageshack.us/img136/6724/kmpdvd016954214929zz4.jpg);
  background-repeat: no-repeat;
  background-position:center;
  padding-left: 10px;
  padding-right: 100px;
  /*height:220px;*/
  }

  2008-03-02 22:22小角落..：這樣寫也OK阿..把下面複製貼上看看
  /*文字版、留言版底圖*/
  textarea {
  background: url(http://img136.imageshack.us/img136/6724/kmpdvd016954214929zz4.jpg);
  background-repeat: no-repeat;
  background-position:center;
  padding-left: 20px;
  padding-right: 20px;
  height:220px;
  filter:Alpha(opacity=70,finishOpacity=1,style=0);/*半透明感*/
  }

• 2008-03-02 22:42◤ カオス ◢：
  痾.....
  /*文字版、留言版底圖*/
  textarea {
  background: url(http://img136.imageshack.us/img136/6724/kmpdvd016954214929zz4.jpg);
  background-repeat: no-repeat;
  background-position:center;
  padding-left: 20px;
  padding-right: 20px;
  height:220px;
  filter:Alpha(opacity=50,finishOpacity=1,style=0);/*半透明感*/
  }
  
  我貼上以上內容~~~ 還是不行＠＠
  透明度有出來 ~~ 但圖片還是沒有.....
  也許是我本身css裡面有哪邊錯誤了吧＝　＝＂
  
  ~在此依舊很感謝"小角落"大大!!

  2008-03-02 23:09小角落..：哭..我用你的圖片了~
  你看~應該有顯示出來吧><
  為什麼你不行><

• 2008-04-23 17:15L君：
  感謝大大小屋語法的教學 0_<~*

  2008-04-24 00:07小角落..：很高興有幫上忙唷^^

• 2010-06-17 10:19° 犽× * ♫：
  我也要請問一下XD
  我也有看你們的對話內容
  因為我貼了文章的CSS
  圖片沒有出來
  所以我貼了
  /*文字版、留言版底圖*/
  textarea {
  background: url(http://i226.photobucket.com/albums/dd251/a66853340/74be455092056931367abe8a.jpg);
  background-repeat: no-repeat;
  background-position:center;
  padding-left: 20px;
  padding-right: 20px;
  height:220px;
  filter:Alpha(opacity=70,finishOpacity=1,style=0);/*半透明感*/
  }
  可是圖片還是沒有出來
• 2010-06-17 23:14° 犽× * ♫：
  抱歉Q口Q
  後來圖片有出來
  可是感覺怪怪的
  往下拉的時候
  圖片應該不會動吧
  可是我圖片好像位在中間
  好奇怪"""
  http://home.gamer.com.tw/blogDetail.php?owner=a66853340&sn=9651
  
  就感覺怪怪的
  是不是語法錯誤??
  還是我放錯了??
  
  我放在
  }/*input實線(只用於引用文章網址處)*/
  的下面
  filter:Alpha(opacity=70,finishOpacity=1,style=0);
  的上方

  2010-06-19 23:38小角落..：background-position:center;
  這句就是說，把圖片放在中間啊!
  放置的位置請參考css - 語法說明

  2010-06-19 23:39小角落..：你是要放在留言板，
  當然是textarea {}的括弧內。

• 2010-07-07 21:08月宵：
  大大您好，我又有問題來問您了....
  
  這邊這個灰色的字體，顏色該怎麼改？

  2010-07-08 08:43小角落..：css - 按鈕教學
  這篇應該能解決你的問題^_^

• 送出