ลงทะเบียน
ใกล้กัน ช่วยให้คุณแชร์เรื่องราวต่างๆ กับผู้คนมากมาย
CSS จัดสีสันให้เว็บยุคใหม่

การจัดข้อความ ชิดขวาเมื่อแสดงหน้าจอ PC และซิดซ้าย เมื่อแสดงหน้าจอมือถือ .input-label { text-align: right; line-height: 1.2; } @media only screen and (max-width : 992px) { .input-label { text-align: left; } } PC    Mobile     ตัดข้อความมากกว่า 3 บรรทัด พร้อมใส่จุดไข่ปลา //วิธีใช้: div class="text-descript line-clamp" .text-descript { width: 100%; margin: 0 0 0...
CSS จัดสีสันให้เว็บยุคใหม่

CSS เปลี่ยนพื้นหลังของตาราง เพียงคำสั่งเดียวก็ออกมาสวยดังภาพ โดยไม่ต้องเขียน Javascript ให้ยุ่งยาก ภาพตัวอย่าง: วิธีแรก: นำ Code นี้ไปวางในแท็ก <style type="text/css">วางโค็ด</style> tbody tr:nth-child(odd) { background-color: #ccc; } วิธีที่สอง: ใช้คำสั่งของ Bootstrap ดาวโหลดที่: http://getbootstrap.com/ วิธีใช้: <table css"table table-striped">...</table>...
คำค้น: css
CSS จัดสีสันให้เว็บยุคใหม่

เหมาะกับคนเขียนเว็บไซต์ HTML + CSS ได้ใช้บ่อยมาก ๆ   อธิบาย HTML Tag: UL และ OL ul คือ unorderlist จะนับ li เป็นสัญลักษณ์ รูปวงกลม หรือรูปสามเหลี่ยม ol คือ orderlist จะนับ li เป็นตัวเลข 1 2 3 ... ภาพตัวอย่าง: กำหนดเองการแสดงผลของ UL และ OL เอง เพื่อความสวยงาม ขั้นตอน 1. สร้าง Tag < style > ไว้ระหว่าง < head > ตรงนี้ </ head > ของ HTML < style type="text/css" > ul.submit-desction ...
CSS จัดสีสันให้เว็บยุคใหม่

จัดช่อง input ให้ดูสวยงามด้วย CSS เพียงนำโค็ดด้านล่างไปวางในแท็ก style <style type="text/css"> select { font-family: 'Droid Sans Thai', Arial, sans-serif; font-size: 14px; height: 28px; border: 1px solid #909090; background-color: #F0F0F0; border-radius: 4px; box-shadow: inset 1px 1px 2px #C0C0C0; } input[type=text] { } </style>...
CSS จัดสีสันให้เว็บยุคใหม่

เหมาะสำหรับคนเขียนเว็บ จัดให้เว็บปรับสัดส่วนตามขนาดจอ ตัวอย่างการใช้เช่นให้รูปภาพแสดงขนาดต่างกันบนมือถือ iPad และ Desktop   ก็อปใส่ในส่วน header: <meta name="viewport" content="width=device-width, initial-scale=1">   ก็อปใส่ในส่วน header > style: /* Custom, iPhone Retina */@media only screen and (min-width : 320px) {#image { width:100%; }} /* Extra Small Devices, Phones */@media only screen...