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


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



บริการเว็บ server web hosting
บริการเว็บ server web hosting


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







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