การสร้างเว็บไซต์ที่ตอบสนองต่อตั้งแต่เริ่มต้น
ในบทนี้เราจะสร้างเว็บไซต์ที่ตอบสนองต่อ 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="http://www.w3ii.com/lib/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> A:
ตัวอย่าง
<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 sage
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> หรือ <หัว> |
|---|
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/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 แถว-padding">
- ใช้การเรียนที่กำหนดไว้ล่วงหน้าเช่น "W3 สาม" ได้อย่างรวดเร็วทำให้คอลัมน์ตาราง
- วางเนื้อหาข้อความของคุณภายในคอลัมน์ตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างคอลัมน์ที่สามของความกว้างเท่ากับ:
ตัวอย่าง
<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-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> ลองตัวเอง» Side นำร่อง
ด้วยลูกศรด้านคุณมีหลายตัวเลือก:
- มักจะแสดงบานหน้าต่างนำทางด้านซ้ายของเนื้อหาหน้า
- เปิดบานหน้าต่างนำทางซ่อนตัวอยู่ส่วนด้านซ้ายของเนื้อหาของหน้าเว็บ
- เปิดบานหน้าต่างนำทางซ่อนเนื้อหาทั้งหมดของหน้า
- เปลี่ยนเนื้อหาของหน้าไปทางขวาเมื่อเปิดบานหน้าต่างนำทาง
ตัวอย่างเช่นนี้จะเปิดบานหน้าต่างนำทางซ่อนตัวอยู่เป็นส่วนหนึ่งของเนื้อหาของหน้านี้:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript ใช้ในการเปิดและซ่อนเมนู:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
ลองตัวเอง»