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">&#9776;</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>

 
DEMO

 
ที่มา: http://www.w3schools.com/w3css/

Sponsered link

Comments