Css tutorial : Content
posted on 05 Mar 2008 23:58 by bbears in TutorialCss,, ฮ่ะๆๆ ก่อนอื่นก็มา จิ้ม ดูรูปธีมแบบ basic ที่ผักจะอธิบายก่อนน้อ
วันนี้คงได้แค่หัวข้อเดียวนะคะ นั่นคือ หัวข้อของ content (เนื้อหา ,, ต่อจาก พวก neck menu จ่ะ)
/* Content */ <<ส่วนของเนื้อหา หรือเรียกว่า content ,, ดูรูปอธิบายเพิ่มเติมคะ
#belly{
background:url(http://g.exteen.com/t/darkapollo/belly.png) repeat-y;
}
#content{
display:inline;
float:left; <<เป็นการบอกว่าส่วนของเนื้อหาอยู่ทางด้านซ้าย ของเนื้อหาทั้งหมด
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
}
/*=================================================*/
หวังว่า คงพอจะเข้า ใจนะค๊ะ
แฮะๆ หลังจากดอง มานานสองนาน (ดองข้ามปี) ...วันนี้ แบบว่า เริ่มเข้าสู่โหมดเงียบนะ
เพราะ เพื่อนๆ พากันแยกย้ายกันกลับบ้านพรุ่งนี้เช้า (เราเอง คงตื่นไม่ทัน)
โอเค ...ไว้เจอกันเอนทรี่หน้า คะ
Tags: code css, content, css, css for new exteen, teach16 Comments
ทำบล็อคมาก็นาน บางอันยังไม่รู้เลยว่ามันคืออะไรหว่า 555+
ป.ล.บล็อคสวยจังค่ะ
#1 By †:: K-zzy ::† on 2008-03-06 00:22