ตกแต่งฟอร์มล้อกอินสวยๆ ด้วย CSS ง่ายๆแต่ได้สาระ

สร้างฟอร์มล้อกอินสวยๆ ด้วย CSS

ไม่ได้เขียนบทความซะหลายวัน คงไม่ว่ากันนะครับ ด้วยเหตุจำเป็นทางหน้าที่การงาน พอเป็นข้ออ้างที่ฟังขึ้น หลายท่านที่ได้ไปเยี่ยมตามเว็บไซต์ต่างๆ น่าจะเคยเห็นสิ่งที่ผมจะเขียนในวันนี้บ้างแล้วล่ะ คือมีฟอร์มให้ล้อกอิน แล้วในช่อง ป้อนยูสเซ่อเนม มันทะลึ่งมีรูปเล็กๆอยู่ด้วย เก๋ไม่หยอก ถ้าหากบางท่านยังคิดไม่ออก ดูภาพครับ

วิธีเปลี่ยนเมนูListธรรมดาๆให้น่าสนใจ

โดยปกติแล้ว ใน HTML เมื่อเราใช้ ลิสต์ แบบไม่เรียงลำดับ <ul> ผลลัพธ์ที่แสดงออกมา จะมีวงกลมดำๆ อยู่ด้านหน้า

เราสามารถเปลี่ยนวงกลมดำๆ เป็นภาพได้ด้วย css ดูโค้ดนะครับ

1
2
3
4
5
6
7
8
9
10

<style type="text/css"> 
<!-- 
.list_style { list-style-image: url(images/house.png); } 
--> 
</style> 
 
<ul> 
    <li class="list_style">หัวข้อที่ 1</li>  
    <li class="list_style">หัวข้อที่ 2</li> 
</ul>

เราจะใช้ list-style-image:url(); เพื่อเปลี่ยนวงกลมดำๆ เป็นภาพที่ต้องการ  ภายในวงเล็บหลัง url ก็ระบุพาธของภาพนะครับ ดูจากตัวอย่าง  ต่อจากนี้ไปลิสต์ของคุณก็จะไม่น่าเบื่ออีกต่อไป