สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย

29 October 2008 By Ninenik Narkdee
แย่งหน้า css

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



 <style type="text/css">
  .mynavi{
  	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#99CC33;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
  }
    .mynavi:hover{
  	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
  }
  .pgnavi{
  	display:block;
	height:25px;
	font-size:12px;
	line-height:20px;
	float:left;
	margin-right:3px;
  }
  </style> 

<div>
  <span class="pgnavi">Page: </span>
<a class="mynavi" href="#">1</a>
<a class="mynavi" href="#">2</a>
<a class="mynavi" href="#">3</a>
<a class="mynavi" href="#">4</a>
<a class="mynavi" href="#">5</a>
<a class="mynavi" href="#">6</a>
</div>

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

Page: 1 2 3 4 5 6


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





Tags:: แย่งหน้า css







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ