ชั้นตู้คอนเทนเนอร์
ชั้น W3-Container เป็นสิ่งสำคัญที่สุดของการเรียน W3.CSS
ชั้น W3 ภาชนะที่ใช้สำหรับทุกประเภทของภาชนะองค์ประกอบ HTML เช่น:
<div> <หัว>, <ส่วนท้าย>, <บทความ>, <ส่วน>, <blockquote> <form> และอื่น ๆ
หัวข้อนี้เป็นสีเขียว
ท้ายนี้จะเป็นสีแดง
บทความนี้เป็นสีเทาอ่อนและข้อความที่เป็นสีน้ำตาล
ตู้คอนเทนเนอร์ให้ความเท่าเทียมกัน
ชั้น W3-Container เป็นสิ่งสำคัญสำหรับการให้ความเท่าเทียมกัน:
- อัตรากำไรขั้นต้นที่พบบ่อย
- paddings สามัญ
- การจัดแนวแนวตั้งที่พบบ่อย
- การจัดแนวแนวนอนที่พบบ่อย
- แบบอักษรที่พบบ่อย
- สีที่พบบ่อย
ตัวอย่าง
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
ลองตัวเอง» เพื่อเพิ่มสีเพียงเพิ่มชั้นสี w3-:
ตัวอย่าง
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
ลองตัวเอง» หัวและส่วนท้าย
ชั้น W3-ภาชนะที่สามารถนำมาใช้ในรูปแบบส่วนหัว:
หัวเรื่อง 1
ชั้น W3-ภาชนะที่สามารถนำมาใช้ในรูปแบบส่วนท้าย:
ตัวอย่าง
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
ลองตัวเอง» บทความและส่วน
ชั้น W3-ภาชนะที่สามารถนำมาใช้ในรูปแบบ <บทความ> และ <ส่วน> องค์ประกอบ:
ตัวอย่าง
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> ลองตัวเอง»  | หน้าเว็บมากใช้ <div> องค์ประกอบแทน <บทความ> และ <ส่วน> องค์ประกอบ |
|---|
หมายเหตุ, แผงและคำพูด
ชั้น W3-Container สามารถใช้ในการแสดงทุกชนิดของบันทึก:
ตัวอย่าง
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> ลองตัวเอง» ชั้น W3-Container สามารถใช้ในการแสดงทุกชนิดของแผง:
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่
ตัวอย่าง
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> ลองตัวเอง» ชั้น W3-Container สามารถใช้ในการแสดงทุกชนิดของคำพูด:
ตัวอย่าง
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
ลองตัวเอง» ไปที่บท พรมแดน W3.CSS เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการแสดงบันทึกการติดตั้งและคำพูด
อยู่รวมกัน
ส่วนหัว
รถเป็นล้อยาง, ตัวขับเคลื่อนยานยนต์ใช้สำหรับการขนส่ง คำจำกัดความส่วนใหญ่ของคำระบุว่ารถได้รับการออกแบบเพื่อให้ทำงานบนถนนหลัก (วิกิพีเดีย)
ตัวอย่างเช่นใช้ HTML <div> องค์ประกอบ
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> ลองตัวเอง» ตัวอย่างเช่นใช้ HTML องค์ประกอบความหมาย
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> ลองตัวเอง» ตู้คอนเทนเนอร์ Padding
ชั้นW3-Container มี 16px เริ่มต้นซ้ายและช่องว่างภายในที่เหมาะสมและไม่มีช่องว่างด้านบนหรือด้านล่าง:
ปกติคุณจะไม่ต้องเปลี่ยน padding เริ่มต้นของภาชนะเพราะย่อหน้าและหัวข้อให้อัตรากำไรขั้นต้นที่จะจำลอง padding
ฉันกำลังจะเดินทาง 1
ผมย่อหน้า
ตัวอย่าง
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
ลองตัวเอง» ตู้คอนเทนเนอร์ sectioning
ชั้นW3-Container ไม่มีด้านบนเริ่มต้นหรือขอบด้านล่าง
สองภาชนะจะแสดง wothout ขอบระหว่างพวกเขา:
ฉันกำลังจะเดินทาง 1
ผมย่อหน้า
ฉันกำลังจะเดินทาง 1
ผมย่อหน้า
ชั้นW3 ส่วนสามารถนำไปใช้ภาชนะแยกต่างหากมันมี 16px บนและขอบด้านล่าง:
ฉันกำลังจะเดินทาง 1
ผมย่อหน้า
ฉันกำลังจะเดินทาง 1
ผมย่อหน้า
ตัวอย่าง
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
ลองตัวเอง» หลบซ่อนตัวอยู่ (ปิด) ตู้คอนเทนเนอร์
การซ่อนหรือปิดภาชนะที่เป็นเรื่องง่าย:
เพื่อปิดภาชนะนี้ให้คลิกที่ X ที่มุมขวาบน
ตัวอย่าง
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
ลองตัวเอง» เปิดตู้คอนเทนเนอร์
เปิดภาชนะที่ปิดสนิทเป็นเรื่องง่าย:
ตัวอย่าง
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
ลองตัวเอง»