PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


สร้างปุ่มแบ่งหน้าให้ดูดีด้วย 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






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






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


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