กรณีศึกษา W3.CSS
การสร้างเว็บไซต์ที่ตอบสนองตั้งแต่เริ่มต้น
ในบทนี้ เราจะสร้างเว็บไซต์ตอบสนอง W3.CSS ตั้งแต่เริ่มต้น
ขั้นแรก เริ่มต้นด้วยหน้า HTML อย่างง่าย พร้อมวิวพอร์ตเริ่มต้นและลิงก์ไปยัง W3.CSS
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
ใส่องค์ประกอบในคอนเทนเนอร์
ในการเพิ่มระยะขอบและช่องว่างภายในทั่วไป ให้ใส่องค์ประกอบ HTML ไว้ในคอนเทนเนอร์ (<div class="w3-container">)
แยกส่วนหัวออกจากเนื้อหาที่เหลือ โดยใช้องค์ประกอบ <div> แยกกันสองส่วน:
ตัวอย่าง
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
คลาสสี
คลาสสีกำหนดสีขององค์ประกอบ
ตัวอย่างนี้จะเพิ่มสีให้กับองค์ประกอบ <div> แรก:
ตัวอย่าง
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
ขนาดชั้นเรียน
คลาสขนาดกำหนดขนาดข้อความสำหรับองค์ประกอบ
ตัวอย่างนี้จะเพิ่มขนาดให้กับองค์ประกอบส่วนหัวทั้งสอง:
ตัวอย่าง
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
ใช้องค์ประกอบเชิงความหมาย
หากคุณต้องการปฏิบัติตามคำแนะนำเชิงความหมาย HTML5 กรุณาทำ!
ไม่สำคัญสำหรับ W3.CSS หากคุณใช้ <div> หรือ <header>
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
เลย์เอาต์ที่ตอบสนองต่อหลายคอลัมน์
ด้วย W3.CSS การสร้างเลย์เอาต์แบบตอบสนองหลายคอลัมน์เป็นเรื่องง่าย
คอลัมน์จะจัดเรียงตัวเองใหม่โดยอัตโนมัติเมื่อดูในขนาดหน้าจอต่างๆ
กฎกริดบางส่วน:
- เริ่มต้นด้วยคลาสแถว <div class="w3-row-padding">
- ใช้คลาสที่กำหนดไว้ล่วงหน้า เช่น "w3-third" เพื่อสร้างคอลัมน์กริดอย่างรวดเร็ว
- วางเนื้อหาข้อความของคุณภายในคอลัมน์กริด
ตัวอย่างนี้แสดงวิธีการสร้างสามคอลัมน์ที่มีความกว้างเท่ากัน:
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
ตัวอย่างนี้แสดงวิธีการสร้างสี่คอลัมน์ที่มีความกว้างเท่ากัน:
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
คอลัมน์ที่มีความกว้างต่างกัน
ตัวอย่างนี้สร้างเค้าโครงสามคอลัมน์โดยที่คอลัมน์ตรงกลางกว้างกว่าคอลัมน์แรกและคอลัมน์สุดท้าย:
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
แถบนำทาง
แถบนำทางคือส่วนหัวของการนำทางที่วางอยู่ที่ด้านบนของหน้า
ตัวอย่าง
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
การนำทางหน้า
ด้วยการนำทางด้านข้าง คุณมีหลายทางเลือก:
- แสดงบานหน้าต่างนำทางทางด้านซ้ายของเนื้อหาหน้าเสมอ
- ใช้การนำทางด้านข้างที่ตอบสนองแบบ "อัตโนมัติทั้งหมด" ที่ยุบได้
- เปิดบานหน้าต่างนำทางที่ด้านซ้ายของเนื้อหาหน้า
- เปิดบานหน้าต่างนำทางเหนือเนื้อหาหน้าทั้งหมด
- เลื่อนเนื้อหาของหน้าไปทางขวาเมื่อเปิดบานหน้าต่างนำทาง
- แสดงบานหน้าต่างนำทางทางด้านขวาแทนด้านซ้าย
ตัวอย่างนี้เปิดบานหน้าต่างนำทางที่ด้านซ้ายของเนื้อหาหน้า:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript ที่ใช้ในการเปิดและซ่อนเมนู:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}