รูปแบบ CSS เป็น CSS3 ครับผสมผสานกับรูปภาพไอคอนที่หาได้ ดูดีมีสไตล์ไปอีกแบบ สามารถนำไปประยุคใช้แบบง่ายๆ ก่อนอื่นต้องสร้าง CSS ก่อนเก็บไว้ที่ไฟล์ style.css แต่ในที่นี้ผมใผมเขียน css แบบฝังนะครับ จะฝังโค้ดไว้ที่ไฟล์ html เลยจะได้เรียกใช้งานง่าย กรณีตั้วอย่างเท่านั้น
โค้ด CSS แบบแยก
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px; } a.button{ background:url(img/button.gif); display:block; color:#555555; font-weight:bold; height:30px; line-height:29px; margin-bottom:14px; text-decoration:none; width:191px; } a:hover.button{ color:#0066CC; } /* -------------------- */ /* CLASSES */ /* -------------------- */ .add{ background:url(img/add.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .delete{ background:url(img/delete.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .user{ background:url(img/user.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .alert{ background:url(img/alert.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .msg{ background:url(img/msg.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .download{ background:url(img/download.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .lens{ background:url(img/lens.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .info{ background:url(img/info.gif) no-repeat 10px 8px; text-indent:30px; display:block; } |
ตัวอย่างโค้ด HTML
Read the rest of this entry »
CSS 3 เริ่มมีบทบาทมากขึ้นในโลก Internet ใครรู้บ้างว่ามันคืออะไร CSS 3 ตามความหมายของผมนะครับมันคือแอปพลิเคชัน ที่เอาไว้สร้างสรรรออกแบบหน้าตาของเว็บเพจ และเก็บรวบรวมตัวแปลของโค้ด ที่จะนำไปแสดงผลใน HTML สคริปต์ (อธิลายถูกหรือไม่ถูกก็ลองคิดดูเองนะครับ ตามหลักการแล้วมันคงจะไม่ได้หมายถึงแบบนี้นะ 555+ ว่ากันไป) ตัวอยากนี้ผมจะมาแนะนำวิธีสร้าง Property มราจะทำให้เว็บเพจของคุณมีลูกเล่นที่เด่นๆ ขึ้น สำหรับ WordPress ผมจะอธิบายในการใช้แท็กที่ชื่อ Code เช่น 
Comments