Sponsered link
W3.CSS คือ CSS ตัวใหม่ที่ออกแบบมาเพื่อตอบสนองการใช้งานของ คอมพิวเตอร์,แล็ปท็อป,แท็บเล็ตและโทรศัพท์มือถือ เป็น CSSแบบมาตรฐาน(ไม่จำเป็นต้องใช้jQueryหรือจาวาสคริปต์)ออกแบบมาให้มีความเร็วและใช้งานง่าย
อันดับแรกเราจะต้องไปดาวน์โหลดไฟล์ W3.CSS มาก่อนที่ http://www.w3schools.com/lib/w3.css จากน้้นนำไฟล์นี้ไปใส่ไว้ที่ไฟล์ CSS ที่เราจะเรียกใช้ เช่น ตั้งชื่อว่า w3.css แล้วก็นำ path นี้ไปเรียกใช้ที่เว็บของเรา
ตัวอย่างการใช้งาน W3.CSS ในการทำหน้า Login
Sponsered link
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/lib/w3.css"> <body> <header class="w3-container w3-teal"> <span class="w3-xlarge">☰</span> <h1>Login Example</h1> </header> <div class="w3-container w3-half w3-margin-top"> <form class="w3-container w3-card-4"> <h2 class="w3-text-theme">Login</h2> <div class="w3-group"> <input class="w3-input" type="text" required> <label class="w3-label">Name</label> </div> <div class="w3-group"> <input class="w3-input" type="password" required> <label class="w3-label">Password</label> </div> <label class="w3-checkbox"> <input type="radio" name="gender" value="male" checked> <div class="w3-checkmark"></div> Male </label><br> <label class="w3-checkbox"> <input type="radio" name="gender" value="female"> <div class="w3-checkmark"></div> Female </label> <br><br> <label class="w3-checkbox"> <input type="checkbox" checked="checked"> <div class="w3-checkmark"></div> Stay Logged In </label> <br><br> <button class="w3-btn w3-theme"> Log in </button> <br><br> </form> </div> </body> </html>
Sponsered link
ที่มา: http://www.w3schools.com/w3css/
Sponsered link