คอนเทนเนอร์ W3.CSS
นี่คือส่วนหัวของฉัน
นี่คือบทความของฉัน
บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล
นี่คือส่วนท้ายของฉัน
ชั้นคอนเทนเนอร์
คลาสw3-containerเพิ่มช่องว่างภายใน 16px ด้านซ้ายและขวาให้กับองค์ประกอบ HTML ใดๆ
คลาสw3-containerเป็นคลาสที่สมบูรณ์แบบสำหรับองค์ประกอบคอนเทนเนอร์ HTML ทั้งหมด เช่น:
<div>, <article>, <section>, <header>, <footer>, <form> และอื่นๆ
คอนเทนเนอร์ให้ความเท่าเทียมกัน
คอนเทนเนอร์ w3 ให้ ความเท่าเทียมกันสำหรับองค์ประกอบคอนเทนเนอร์ HTML ทั้งหมด:
- อัตรากำไรขั้นต้นทั่วไป
- ช่องว่างภายในทั่วไป
- การจัดตำแหน่งทั่วไป
- แบบอักษรทั่วไป
- สีทั่วไป
ในการใช้คอนเทนเนอร์ เพียงเพิ่ม คลาส w3-containerให้กับองค์ประกอบใดๆ:
ตัวอย่าง
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
หากต้องการเพิ่มสี ให้เพิ่ม คลาส สี w3- :
ตัวอย่าง
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
ส่วนหัวและส่วนท้าย
คลาสw3-containerสามารถใช้จัดรูปแบบส่วนหัวได้:
หัวข้อ
ตัวอย่าง
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
ตัวอย่าง
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
ไม่มีความแตกต่างในวิธีที่ W3.CSS ปฏิบัติต่อองค์ประกอบ <div> และ <header>
คลาสw3-containerสามารถใช้เพื่อจัดรูปแบบส่วนท้าย:
ตัวอย่าง
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
ตัวอย่าง
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
หน้าเว็บจำนวนมากใช้องค์ประกอบ <div> แทนองค์ประกอบ <header> และ <footer>
บทความและส่วนต่างๆ
คลาสw3-containerสามารถใช้เพื่อจัดรูปแบบองค์ประกอบ <article> และ <section>:
ตัวอย่าง
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
หน้าเว็บจำนวนมากใช้องค์ประกอบ <div> แทนองค์ประกอบ <article> และ <section>
ตัวอย่างหน้าเว็บ
หัวข้อ
รถยนต์คือยานยนต์ที่มีล้อขับเคลื่อนด้วยตัวเองซึ่งใช้สำหรับการขนส่ง คำจำกัดความส่วนใหญ่ของคำศัพท์ระบุว่ารถยนต์ได้รับการออกแบบให้วิ่งบนถนนเป็นหลัก (วิกิพีเดีย)
ตัวอย่างการใช้ 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-teal">
<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-teal">
<h5>Footer</h5>
</footer>
คอนเทนเนอร์แพดดิ้ง
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>