PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สร้าง box แบบสวยงาม ด้วย CSS

15 October 2008 By
box css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ box css



CSS Code

<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

<div class="teaser">
	<h3>หัวข้อที่ต้องการแสดง</h3> 
	<p>รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง  รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง  รายละเอียดที่ต้องการแสดง <br />
</p>
	<a href="#" class="more">รายละเอียดเพิ่มเติม</a>
</div>

ตัวอย่างผลลัพธ์

หัวข้อที่ต้องการแสดง

รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง
รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง
รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง
รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง

รายละเอียดเพิ่มเติม

ดาวน์โหลดรูป










Tags:: box css






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง