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

29 October 2008
 <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







บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 6061 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 5399 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 21 Aug 09 ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE อ่าน 4804 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4586 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4586 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4578 25 Sep 08 แนวทางการเขียน CSS ในรูปแบบย่อ อ่าน 4369 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4331 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4127 25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4116 25 Sep 08 เอา scrollbar ออกจาก textarea ด้วย CSS อ่าน 4055 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4004 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 3973 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3968

บทความคนเข้าอ่านวันนี้

04 Oct 11 การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย อ่าน 847 22 Oct 10 สร้าง php ฟังก์ชัน ค้นหาค่าในตัวแปร array อย่างง่าย อ่าน 1403 05 Feb 09 เพิ่มลูกเล่นการโหวด Vote หรือ Rating ด้วย jQuery และ CSS อ่าน 3976 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 12892 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2760 04 Oct 08 SQL คืออะไร อ่าน 7367 25 Sep 08 ตรวจสอบนามสกุลไฟล์ ก่อนทำการอัพโหลด อ่าน 3237 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2679 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17241 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 671 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1791 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 3966 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24539 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1550 25 Sep 08 Upload รูปภาพ หรือไฟล์ด้วย ฟังก์ชั่น ใช้ง่าย อ่าน 4656 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3201 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 2719 25 Sep 08 รวมส่วนประกอบต่างข้างบนเป็น CSS อ่าน 3603 25 Dec 10 แนวทาง การใช้งาน php กับ css กำหนด รูปแบบ style อย่างง่าย อ่าน 1837 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3920
จำนวนผู้เยี่ยมชม 777863
คน 2012 © Copyright ninenik.com. All rights reserved.