CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <style type="text/css">.teaser { width:430px; padding:0 0 14px 0; margin:10px auto; background:url(images/tsr-b.gif) bottom left no-repeat; font-size:12px;}.teaser h3 { margin:0; padding:7px 10px 3px 10px; background:url(images/tsr-t.gif) top left no-repeat;}.teaser p, .teaser a.more { margin:0; padding:0 10px 3px; border:1px solid #d8d8d8; border-width:0 1px;}.teaser a.more { display:block; text-align:right; background:url(images/tsr-a.gif) 410px 50% no-repeat; padding:0 24px 0 0; text-decoration:none; color:#44a;}.teaser a.more:hover { text-decoration:underline;}</style> |
HTML Code
1 2 3 4 5 6 7 8 9 | <div class="teaser"> <h3>หัวข้อที่ต้องการแสดง</h3> <p>รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br /></p> <a href="#" class="more">รายละเอียดเพิ่มเติม</a></div> |
ตัวอย่างผลลัพธ์
ดาวน์โหลดรูป
