創作內容

4 GP

css - 留言版篇

作者：小角落..│2008-02-13 00:09:03│巴幣：0│人氣：2763

本文引用自此

如果這篇看的一點都不懂的話，請看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 收藏 7 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=474566
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：|css|

2024 的個人網頁設計

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

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

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

火狐Firefox CSS樣式：回復舊版89分頁列

留言共 12 篇留言

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

02-13 02:41

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

★晴宇★：
情人節快樂唷^^

02-14 18:57

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

★晴宇★：
情人節快樂唷^^

02-14 18:57

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

◤ カオス ◢：
請問一下"小角落"大~
我的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);

03-02 20:17

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

◤ カオス ◢：
我已經修改圖片位置了~
http://img136.imageshack.us/img136/6724/kmpdvd016954214929zz4.jpg
不過依然還是沒有顯示出來＠＠

沒關係~~ 我再去研究看看好了~~!!
感謝"小角落"大^^

03-02 20:57

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

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

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

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

03-02 21:27

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

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

◤ カオス ◢：
即使更正了網址~~
還是不行耶....不知問題出在哪＠＠

話說:"小角落"大是第一次使用[ 增加連結 ]的功能囉?

03-02 22:10

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

小角落..：
咦~我這樣寫~可以阿!!
/*文字版、留言版底圖*/
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;*/
}03-02 22:18

小角落..：
這樣寫也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);/*半透明感*/
}03-02 22:22

◤ カオス ◢：
痾.....
/*文字版、留言版底圖*/
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裡面有哪邊錯誤了吧＝　＝＂

~在此依舊很感謝"小角落"大大!!

03-02 22:42

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

L君：
感謝大大小屋語法的教學 0_<~*

04-23 17:15

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

° 犽× * ♫：
我也要請問一下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);/*半透明感*/
}
可是圖片還是沒有出來

06-17 10:19

° 犽× * ♫：
抱歉Q口Q
後來圖片有出來
可是感覺怪怪的
往下拉的時候
圖片應該不會動吧
可是我圖片好像位在中間
好奇怪"""
http://home.gamer.com.tw/blogDetail.php?owner=a66853340&sn=9651

就感覺怪怪的
是不是語法錯誤??
還是我放錯了??

我放在
}/*input實線(只用於引用文章網址處)*/
的下面
filter:Alpha(opacity=70,finishOpacity=1,style=0);
的上方

06-17 23:14

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

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