แกะๆเกาๆ กับ css #1 [General]

posted on 14 Oct 2007 03:34 by allmost

/* General */
body {
background:#FFA200 url() repeat-x top left;
color:#FF000A;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}

a:link, a:visited{
color:#FF00FA;
text-decoration:none;
}

a:hover, a:active{
color:#0300FF;
}

#page{
margin:50px;
padding-top:100px;
text-align:left;
width:780px;
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
}

/*======================================================================*/

อ่า...แอบไปนั่งแกะๆเกาๆโค้ด css แบบใหม่มา ต้องบอกก่อนว่าไม่ได้มืออาชีพ
ตอนนี้ขอมาเป็นส่วนๆก่อน เพราะกว่าจะรวมตัวกันได้คงต้องพึ่งเจ้าเน็ตเฮงซวยอีกหลาย (ซึ่งมันคิดจะเกเรเสมอ)


ส่วน General เป็นส่วนพื้นๆที่ทุกคนรู้กันอยู่แล้วใช่มะ แต่ก็แกะไว้...เผื่อวันไหนตัวเองลืมจะได้เข้ามาดู
ดูภาพประกอบไปด้วยได้เลย (ไม่ใช่ปลากรอบเน้~)


#1 - background เป็นส่วนของแบคกราวด์ของบล็อกเราเลย ซึ่งในรูปและในโค้ดทำการปาดสีส้มเพื่อให้เห็นโดยง่าย
#2 - font เรื่องของสีฟ้อนก็ไม่น้อยหน้า เป็นฟ้อนต์หลักของเพจเลย...ซึ่งเราก็เทด้วยสีแดง
color:#FF000A; >>> สีฟ้อนต์
font:12px Tahoma, "MS Sans Serif"; >>> ขนาดและรูปแบบ
line-height:1.5em; >>> ระยะห่างของแต่ละบรรทัด (ใช่เนอะ...)
text-align:center; >>> อันนี้ไม่แน่ใจแฮะ -.,-
#3 - link มาด้วยสีบานเย็นชื่นฉ่ำ เป็นสีในตอนที่ยังไม่คลิกนะคะ
#4 - hover อันนี้เป็นสีตอนที่วางเมาส์ลงไปค่ะ
#5 - อันนี้อยู่ในแถบของ #page{ นะ เป็นความห่างจากขอบจอคอมถึงส่วน belly ของบล็อกอ่ะ อันนี้แล้วแต่เราว่าจะตั้งให้ห่างจากทางซ้ายหรือขวา ในที่นี้ขอตั้งทางซ้ายค่ะ
#6 - padding-top เป็นความห่างลงมาจากแถบเอ็กทีนจนถึง ส่วนหัวของเอนทรีค่ะ



ต่อไปเป็นส่วนของคำสั่ง #header, #neck, #belly, #leg, #footer{ ค่ะ อันนี้ไม่รู้จริงๆว่ามันคืออะไร
เพราะอย่างในรูปนะคะ ค่าของมันคือ float:left;
width:780px;
ใช่มั้ยคะ...


แต่ถ้า...เปลี่ยนจาก float:left; มาเป็น float:center; มันจะกลายเป็นแบบนี้ค่ะ



เหมือนว่า belly ตรงกลางมันจะหายไปใช่มั้ย...?


แล้วเราลองมาดูอีกคำสั่งเปลี่ยนจาก float:center; มาเป็น float:right; มันเป็นแบบนี้ค่ะ...



ส่วนตรงของเฮดมันจะเลื่อนไปข้างหน้าเนอะ
อันนี้เราก็ไม่รู้เหมือนกันว่าตกลงมันคืออะไรกันแน่ (ฮ่า...) ผู้ใดรู้ช่วยบอกเป็นวิทยาทานแก่เราด้วยนะ


ตอนนี้ก็หมดแถบ General ที่เรารู้ล่ะ ขอตัวไปงัดแถบ Header ก่อนละกัน >w<

 

ปล.บล็อกทะลุทะลวงด้วยฝีมือข้าพเจ้าเอง - -;;

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

ว่าจะแก้ธีมตัวเองเหมือนกัน แต่ขี้เกียจ

แต่ละอันมันไม่ได้บาลานซ์เลยของผม ... นึกไม่ออกจะเอาแบบไหนดี นั่งคิด หลายใจอยู่sad smile

#1 By palermos on 2007-10-14 04:18