Css tutorial : Content
posted on 05 Mar 2008 23:58 by bbears in TutorialCss
โหมด : มีสาระกับเขาบ้าง ก็ดีนะ 555 55
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox เท่านั้น
-----------------------------------------------------------------------
มาต่อกันกับ css นะคะ
อ๊ะ ! ก่อนอื่นมาดูรูปแบบธีมเป็นแบบ basic นะคะ จิ้มดูภาพได้เลยคะ

เป็นส่วนของเนื้อหา หรือเรียกว่า content นั่นเองนะคะ ดูรูปเพิ่มเติมที่นี้คะ
หมายถึงส่วนที่เราเขียนเอนทรี่แล้วอัพลงไปละคะ จากรูปด้านบนนะคะ
ผักทำกรอบสีดำๆ ไว้เป็นส่วน css ในส่วนนี้นะคะ ~ไม่ยากค่า !
" /* Content */
#belly{
background:url(http://g.exteen.com/t/darkapollo/belly.png) repeat-y; <<ใส่บีจีของ content ตรงนี้นะคะ
}
#content{
display:inline;
float:left; <<บอกว่าส่วนของเนื้อหาอยู่ทางด้านซ้ายของเนื้อหาทั้งหมด (ทำให้อยู่ตรงข้ามกับ sidebars นะคะ)
margin:10px 15px 0px 25px; <<ระยะห่างของ content ที่ติดทางด้านบน, ขวา,ล่าง, ซ้าย
width:490px; <<ความกว้าง ของเนื้อหา ,, ดูรูปอธิบายเพิ่มเติมคะ
/*Fix too large image makes content drop problem in IE*/ <<สำคัญๆๆ สำหรับคนที่ใช้ IE ใส่เข้าไปเลยคะ
overflow:visible !important;
overflow:hidden;
}
.entry{ <<เนื้อหาที่เราเขียนทั่วๆไป (หรือส่วนที่เราอัพ)
float:left; <<ส่วนของเนื้อหาของบลอค (ที่เราเขียนอ้ะ) จะชิดทางไหน
margin-bottom:15px; <<ระยะห่างของช่วงท้ายของเนื้อหาจากส่วนท้าย
color:#000000; <<สีของตัวหนังสือในนี้
}
.entry .title{ <<ตั้งค่าของในส่วนของชื่อเอนทรี่
display:block;
float:left; <<ส่วนของชื่อเอนทรี่ (ที่เราเขียนอ้ะ) จะชิดทางไหน
margin-bottom:10px; <<ระยะห่างของช่วงท้ายของชื่อเอนทรี่จากจากส่วนท้าย
width:100%; <<หมายถึงความกว้างของชื่อเอนทรี่เท่ากันกับความกว้างของส่วน content
}
.entry .title h2{ <<ตั้งค่าของชื่อเอนทรี่
border-bottom:1px solid #e4e4e4; << เส้นใต้ที่อยู่ใต้ชื่อเอนทรี่ และสีของเส้นนั้น
font-size:18px; <<ขนาดของตัวอักษรของชื่อเอนทรี่
color:#000000; <<สีของตัวหนังสือในนี้
}
.entry .title h2 a{ <<ในส่วนของชื่อเอนทรี่โดยตรง
color:#949494; <<สีของตัวหนังสือชื่อเอนทรี่
}
.entry .title h2 a:hover{ <<เป็นส่วนของเวลาเอาเมาส์ไปชี้ที่ชื่อเอนทรี
color:#CCC; <<อยากให้เปลี่ยนสีอะไร แก้ตรงนี้คะ
}
.entry .title span{ <<ตั้งค่าของส่วนรายละเอียดของเอนทรี่นั้น (เช่นโพสต์วันไหน เวลาไหน)
color:#999; <<สีของตัวหนังสือในนั้น
font-size:10px; <<ขนาดของตัวหนังสือ
}
.entry .post{
float:left;
}
.entry .post p{ <<ตรงด้านล่างสุดของเอนทรี่ (หรือเนื้อหาที่เราเขียน)
margin-bottom:10px; << ห่างจากด้านล่างเท่าไร
}
.entry .info{ <<พวก comment และ tag ของเราคะ
float:left;
width:100%;
}
.entry .info .tag{ <<เป็นส่วนของ tag
float:left;
font-size:10px; <<ขนาดตัวหนังสือของ tag
width:100%;
}
.entry .info .coms{ <<เป็นส่วนของ comment (ที่ขึ้นว่ามีคนมาคอมเมนต์บลอคเราเท่าไร)
float:right; <<ให้อยู่คนละทางกะส่วนของ tag
}
ง่ายไหมคะ ?
หลังจากดองมาขามปี ! 5555 555 *โดนถีบ* ในที่สุดก็อัพได้นะ
วันนี้แบบว่าเริ่มเข้าสู่โหมดเงียบนะ เพราะเพื่อนๆ พากันแยกย้ายกันกลับบ้านพรุ่งนี้เช้า (เราเอง คงตื่นไม่ทัน)
โอเคคะ ...ไว้เจอกันเอนทรี่หน้าคะ แล้วก็ขอบคุณสำหรับทุกคอมเมนต์นะคะ ♥

ทำบล็อคมาก็นาน บางอันยังไม่รู้เลยว่ามันคืออะไรหว่า 555+
ป.ล.บล็อคสวยจังค่ะ
#1 By [K]*ZZY™ on 2008-03-06 00:22