แผง W3.CSS
ฉันเป็นแผง
ฉันเป็นแผง
ฉันเป็นภาชนะ
ฉันเป็นภาชนะ
The Panel Class
คลาสw3-panelเพิ่มระยะขอบด้านบนและด้านล่าง 16px และช่องว่างภายในด้านซ้ายและขวา 16px ให้กับองค์ประกอบ HTML ใดๆ
ตัวอย่าง
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
แผงสำหรับบันทึกย่อ
คลาสw3-panelนั้นสมบูรณ์แบบสำหรับการแสดงโน้ต
โน้ตมักจะแสดงด้วยสีซีด:
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ W3.CSS Notes โปรดไปที่บทW3.CSS Notes
แผงสำหรับคำคม
คลาสw3-panelนั้นสมบูรณ์แบบสำหรับการแสดงคำพูด
ตัวอย่าง
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ W3.CSS Quotes โปรดไปที่บทW3.CSS Quotes
แผงการแจ้งเตือน
คลาสw3-panelนั้นสมบูรณ์แบบสำหรับการแสดงการแจ้งเตือน
การแจ้งเตือนมักจะแสดงโดยใช้สีที่เข้ม:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
ตัวอย่าง
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการแจ้งเตือน W3.CSS โปรดไปที่บท การ แจ้งเตือน W3.CSS
แผงเป็นการ์ด
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
แผงกลม
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
ซ่อน (ปิด) แผง
การซ่อนแผงเป็นเรื่องง่าย
คลิกที่ X เพื่อปิดแผงนี้
คลิกที่ X เพื่อปิดแผงนี้
ตัวอย่าง
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
แสดง (เปิด) แผง
การแสดง (ที่ซ่อนไว้) เป็นเรื่องง่าย:
ตัวอย่าง
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>