 |
| เว็บที่ใช้แสดงผล http://www.kroovit.com/ ครูวิทย์สอนวิทยาศาสตร์ |
ก่อนอื่นก็งูๆ ปลา ๆ เขียน CSS ไปลองผิดลองถุกไปเรื่อย พอเห็นว่าสวยดูดี ก็เอาเลย บ้างอันก็ Copy มาน่ะ แล้วมาเปลี่ยนแปลง ให้เป็นแนวของเรา งงอยู่เหมือนกัน ภาษาแต่ละภาษานี่แหละ ทำให้งง แต่ก้ได้ศึกษาเนื้อหาเบื้องต้นมาแล้วน่ะ ก็เนื้อหาก่อน ๆ หน้านี้ที่โพสไปล่ะครับ
แต่ว่าวันที่ก็เอา โค้ดที่ตัวเองเขียนมาเพื่อมาเผยแพร่เป็นวิทยาทานให้แก่ชาวโปรแกรมเมอร์ เว็บโปรแกรมเมอร์ทั้งหลาย ท่านที่ชำนาญก็สามารถติชมผมมาได้นะครับ ที่เมล์ผมเลย อิอิ ไม่อยากให้ติชมในนี้ ประจานความโง่เขลาของผมเอง 555 ส่วนเว็บโปรแกรมเมอร์มือใหม่ ก็สามารถ คัดลอก โค้ดไปศึกษาเนื้อหาได้เลยนะครับ ไม่หวงห้าม อีกอย่าง ถ้าต้องการดูตัวอย่างให้ไปดูได้ที่เว็บ ครูวิทย์สอนวิทยาศาสตร์ นะครับ หน้าแรกเลย ตัวอย่างเป็นอย่างนั้น ๆ แหละ ครับ
โปรแกรมมเมอร์สามารถปรับเปลี่ยนเนื้อหาสามารถคลิกไปคลิกมาได้นะครับ ลองดูละกัน ครับ
ผมเอาโค้ดเค้ามาก้ลองเปลี่ยนค่าดู และ ลอง แสดงผลตัวอย่างดูเอา เปลี่ยนค่าไปเรื่อย ๆ หลาย ๆ ตัว จนได้เว็บเพจมาได้อย่างพอใจ เลยได้อย่างที่เห็ฯในเว็บตัวอย่างนี่แหละครับ
Code CSS
ที่ผมเขียนตอนนั้นผมเขียนโดยใช้ โปรแกรมดรีมเอเวอร์ 8 แต่ตอนนี้มาแก้ไขด้วยเวอร์ชั้น CS6 ก็ไม่ต้องกลัวอะไรนะครับ เพราะใช้ได้เหมือนกัน แล้วก็ไฟล์ที่ทำสำเร็จก็ไม่เปลี่ยนแปลงอะไร
เอาแหละ ร่ำเพ่อ พรรณนามามากพอสมควรแล้ว เอาโค้ดไปดุกันเลยนะครับ
#tables a {display: block;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;margin: 0px;padding: 0px;font-size: 12pt;text-decoration: none;}#tables a:hover{padding: 20px;list-style-position: outside;color: #009;text-align: center;font-size: 12pt;text-decoration: blink;font-weight: bold;background-color: #9F9;letter-spacing: normal;word-spacing: normal;border-top-style: groove;border-right-style: groove;border-bottom-style: groove;border-left-style: groove;}
