Categories

[How to!] แต่งกล่องcommentด้วยCSS

posted on 15 Mar 2011 18:52 by eacon1918
สวัสดีค่ะะ จากที่บอกไว้เอนทรี่ที่แล้ว คราวนี้จะทำ how to ค่ะ 
.
เป็นอันแรกของชีวิตเลยนะเนี่ย... ยังไงก็จะพยายามเต็มที่ค่ะ TvTb
(ถ้าพิมพ์ผิดยังไงก็ขอโทษด้วยนะคะ.. ภาษาไทยอ่อนแอ orz)
. 
.
หลายคนอาจจะใช้วิธีเอาโค้ดมาจากท่านอื่นทั้งหมด ลองแต่งดูบ้างก็สนุกดีนะคะ ><
โค้ด CSS ง่ายกว่าที่คิดค่ะ (ประสบการณ์ตรงเลย XD) 
 .
. 
ว่าแล้วก็ไม่ขอนอกเรื่อง(เดี๋ยวมันจะยาว...XD) เข้าเรื่องเลยแล้วกัน
. 
เริ่มด้วยรูปนี้กันเลยยย
แปะรูปกล่องเม้นแบบปกติไว้นะคะ
เพื่อความสดวกในการดู... หรือเปล่า (...)
. 
ทีนี้ก็มาเริ่มอธิบายกันเลยยย
เราอาจจะเรียกอะไรผิดไปบ้าง เราเรียกตามความเข้าใจของเรานะคะ ถ้าผิดก็ขอโทษด้วย ;w;
บางส่วนเราอาจจะไม่ได้รู้ทั้งหมดนะคะ แต่คาดว่าแค่นี้ก็น่าจะพอแล้ว =w=”
แล้วก็ จะมีบางส่วนที่เพิ่มเติมเข้าไปนะคะ จะเขียนกำกับไว้ข้างล่างโค้ดนั้นๆค่ะ
.
ส่วนที่เป็นโค้ดจะทำเป็นสีไว้นะคะ.. เผื่อจะดูง่ายขึ้น TvTb
. 
.
**แล้วก็มีสิงที่ต้องไม่ลืมเวลาเขียนโค้ด CSS อยู่นะคะ**
.
- อย่าลืมใส่ ; หลังจบโค้ดย่อย
- ทุกโค้ดหลักๆ จะต้องมี {} คร่อมอยู่
- ดูเว้นวรรคด้วยนะคะ ถ้าใส่เกินหรือลืมใส่โค้ดก็จะผิดไปเลย
- เวลาใส่โค้ดสี อย่าลืม # นะคะ =w=
.
.
. 
/* Comment Form */
.
. 
.
#commentform  อันนี้คือส่วนโครงสร้างของกล่องค่ะ ก็คือพื้นที่สีเทาๆทั้งหมดนั่นเอง
{
.
width:100%;  ขนาดของตัวกล่อง จะใส่เป็นค่า px ก็ได้นะคะ แต่อย่าให้ใหญ่กว่าหน้า page ไม่งั้นมันจะแหกค่ะ
.
background:#EEE;  สีของตัวกล่อง ในที่นี้ถ้าเปลี่ยนโค้ดสีแล้วสีเทาทั้งหมดก็จะเปลี่ยนค่ะ หรือถ้าไม่อยากให้มีพื้นหลังก็ใส่คำว่า none ลงไปค่ะ หรือถ้าอยากใส่เป็นรูปก็ให้เปลี่ยนจากตัวโค้ดสีเป็น  url(ลิงค์รูป) no-repeat
*ส่วนที่เขียนว่า no-repeat จะเปลี่ยนก็ได้นะคะ ในที่นี้คือเราไม่ต้องการให้รูปมันซ้ำค่ะ ถ้าอยากให้ซ้ำก็เอา no- ออกไปค่ะ
.
float:left;  ถ้าอยากให้กล่องเม้นของเราไปชิดกับด้านขวาก็เปลี่ยนเป็น right ได้ค่ะ แต่ถ้าตั้งค่า 100% แล้วถึงเปลี่ยนก็จะไม่เกิดอะไรค่ะ
. 
. 
*เพิ่มเติม ถ้าต้องการเปลี่ยนสีตัวอักษรก็ให้ใส่  color:(โค้ดสี);  ลงไปค่ะ
แล้วก็ถ้าเกิดว่าอยากใส่ความสูงก็ ให้ใส่  height:(ขนาด)px;  ลงไปค่ะ
. 
}
. 
. 
.
#commentform form
{
.
margin:5px;  ระยะห่างของตัวกล่องทั้งหมด(พื้นที่สีเทาๆอะค่ะ)จากขอบ
.
}
. 
. 
. 
#commentform h3  ส่วนนี้คือคำว่า comment ที่อยู่ทางด้านมุมบนซ้ายค่ะ
{
. 
font-size:16px;  ขนาดของตัวอักษร
. 
font-weight:bold;  กำหนดตัวบางตัวหนาค่ะ
. 
. 
*เพิ่มเติม เปลี่ยนสีฟอนต์ได้นะคะ ใส่ color:(โค้ดสี);
. 
}
. 
. 
. 
#commentform .formrow
{
.
border-top:1px solid #DDD;  เส้นกั้นในกล่องเม้นของเราค่ะ ถ้าลบบรรทัดนี้ออกก็จะไม่มีเส้น 1px ที่เห็นอยู่คือความหนาของเส้นค่ะ ส่วนถ้าอยากเปลี่ยนรูปแบบเส้นจากตรงๆเป็นอย่างอื่นก็ให้เปลี่ยนคำว่า solid เป็นอย่างอื่นตามที่ต้องการเลยค่ะ แล้วก็ถ้าจะเปลี่ยนสีก็เปลี่ยนตรงโค้ดได้เลย อ่อ อีกอย่าง อย่าลืมเว้นวรรคนะคะ =w=
.
padding:2px;  ระยะห่างของเส้นกั้นกับตัวหนังสือ
.
}
. 
. 
. 
#commentform label  อันนี้คือส่วนข้อมูลของคนที่ล็อกอินค่ะ
{
.
float:left;  ถ้าอยากให้ส่วนของคำว่า Name Website Comment ชิดด้านขวาก็ให้เปลี่ยนเป็น right
.
width:150px;  อันนี้คือความห่างของแถบตั้งแต่ eacon ในรูป รวมถึงตัว textarea อีโม และปุ่ม Submit จากขอบกล่องค่ะ ถ้าลดค่านี้ลงมันก็จะเลื่อนเข้าไปใกล้ขอบฝั่งซ้ายมากขึ้น..
. 
}
. 
. 
. 
#commentform input.textbox  ช่องกรอกข้อมูลสำหรับผู้ที่ไม่ได้ล็อกอิน
{
. 
width:150px;  ความยาวของช่องค่ะ
. 
. 
*เพิ่มเติม เปลี่ยนความสูงได้โดยเพิ่ม height:(ขนาด)px;
สามารถใสสี bg ได้ค่ะ ให้ใส่ background:(โค้ดสี); ลงไปค่ะ
แล้วก็ถ้าต้องการใส่เส้นขอบก็ border:1px solid (โค้ดสี); ส่วนนี้แก้ไขได้อีกนะคะ ย้อนไปดูตรง formrow อีกทีถ้าใครลืม =w=
. 
}
. 
. 
. 
#commentform textarea  พื้นที่สำหรับเขียนคอมเม้นค่ะ กล่องสีขาวของรูปแรก
{
. 
width:310px;  ความกว้าง (อย่าให้กว้างเกินนะคะ มันจะแหก ;w;b)
. 
height:150px;  ความสูง
. 
. 
*เพิ่มเติม  เปลี่ยนสี bg ได้  background:(โค้ดสี);  ถ้าอยากใส่เป็นรูปก็ให้เปลี่ยนจากตัวโค้ดสีเป็น  url(ลิงค์รูป) no-repeat;  (เริ่มขี้เกียจ กร๊ากก orz”)
ใส่เส้นขอบได้  border:1px solid (โค้ดสี);  เปลี่ยนขนาดกับแบบเส้นได้เหมือนเดิมนะคะ
เพิ่มความห่างระหว่างด้านบนและด้านล่างได้  margin-top:(ความห่าง)px;  margin-bottom:(ความห่าง)px;
. 
}
. 
. 
. 
*เพิ่มเติม อันนี้เพิ่มใหม่ทั้งแผงเลยนะคะ ;w;b คือในโค้ดที่ให้มาแต่แรกจะไม่มี
. 
input  ส่วนของปุ่ม B I U Link และ Submit ค่ะ
{
. 
background:(โค้ดสี);  สีของปุ่มค่ะ ใส่รูปแทนก็ได้ ถ้าจะให้ไม่มี bg ก็ none
. 
color:(โค้ดสี);  สีตัวหนังสือค่ะ ถ้าไม่อยากเปลี่ยนก็ลบออกได้เลย
. 
border:1px solid (โค้ดสี);  เส้นขอบค่ะ เปลี่ยนขนาดกับแบบเส้นได้เหมือนเดิมนะคะ ไม่อยากให้มีก็ลบออกค่ะ =w=
. 
}
. 
.
.
โอเค.. แค่นี้ล่ะค่ะ .. /นอนตาย
เราก็รู้แค่นี้ไม่ได้เก่งอะไรแบบคนอื่น แค่อยากจะเอาความรู้น้อยๆของเรามาแบ่งปันน่ะค่ะ
.
ถ้าอยากจะเพิ่มเติมหรือจะติชมอะไรยังไงก็ได้เลยนะคะ...
หรือถ้าผิดตรงไหนหรือตรงไหนไม่ดีก็บอกได้นะคะ...
อาจจะมีพิมพ์ผิดบ้าง.. ภาษาไทยอ่อนแอ TvT (รอบ2 ...) แต่ตรงโค้ดไม่น่ามีผิด
.
ไปล่ะค่ะ กำลังติดเกม 555  บายยย
.
.
ปล.ขอบคุณสำหรับเม้นเอนทรี่ที่แล้วนะคะ ไม่รู้จะตอบอะไร ;v;

edit @ 15 Mar 2011 20:54:34 by eacon

edit @ 16 Mar 2011 22:03:51 by eacon

edit @ 24 Dec 2011 20:24:34 by eacon

edit @ 1 Jan 2012 11:28:40 by eacon

Comment

Comment:

Tweet

ninest123

In michael kors outlet michael kors wedding dresses uk ray ban response, lululemon outlet online barbour mulberry outlet michael kors Maze toms shoes sac michael kors lululemon outlet canada uggs told canada goose pas  cher nike huarache links of london uk michael kors WATE: michael kors canada nike free run uk pandora jewelry canada goose "The michaelkors-outlet-store.us.com nike air max tory burch outlet online ray ban sunglasses whole moncler outlet tiffany jewelry kate spade michael kors handbags purpose nike free louis vuitton outlet ugg boots guess pas cher of abercrombie ralph lauren red bottom shoes ralph lauren outlet online doing sac louis vuitton pas cher michael kors outlet online barbour jackets uk instyler ionic styler this sac longchamp fake oakleys nike trainers wedding dress event nike sneakers nike roshe run cheap nike shoes nfl jerseys wasnorth face polo lacoste karen millen new balance to canada goose montre femme uggs on sale oakley glasses shed moncler louis vuitton outlet online michael kors outlet online oakley sunglasses cheap some oakley sunglasses cheap tiffany jewelry babyliss pro ray ban light vanessa bruno pas cher mac cosmetics uggs outlet christian louboutin outlet on new balance pas cher hermes pas cher longchamp nike roshe run uk some lunette ray ban pas cher chaussures louboutin chanel handbags michael kors outlet of air jordan shoes replica rolex asics shoes hollister clothing store the michael kors michael kors outlet michael kors outlet online hermes bags things swarovski jewelry michael kors michael kors outlet nike air max that uggs canada vans shoes mulberry uk bottes ugg pas cher has air huarache gucci bags michael kors outlet online north face pas cher been polo ralph lauren pas cher nike air max 2015 air max pas cher lancel happening instyler abercrombie and fitch