จอแสดงผล W3.CSS
คลาสการแสดงผลช่วยให้คุณสามารถแสดงองค์ประกอบ HTML ในตำแหน่งเฉพาะภายในองค์ประกอบ HTML อื่นๆ:
บนซ้าย
ขวาบน
ล่างซ้าย
ล่างขวา
ซ้าย
ถูกต้อง
กลาง
คลาสการแสดงผล W3.CSS
W3.CSS มีคลาสการแสดงผลต่อไปนี้:
| ระดับ | กำหนด |
|---|---|
| w3-display-container | คอนเทนเนอร์สำหรับ w3-display- คลาส |
| w3-display-topleft | แสดงเนื้อหาที่มุมบนซ้ายของ w3-display-container |
| w3-display-topright | แสดงเนื้อหาที่มุมบนขวาของ w3-display-container |
| w3-display-bottomleft | แสดงเนื้อหาที่มุมล่างซ้ายของ w3-display-container |
| w3-display-bottomright | แสดงเนื้อหาที่มุมล่างขวาของ w3-display-container |
| w3-display-left | แสดงเนื้อหาทางด้านซ้าย (กลางซ้าย) ของ w3-display-container |
| w3-จอแสดงผลขวา | แสดงเนื้อหาทางด้านขวา (กลางขวา) ของ w3-display-container |
| w3-display-กลาง | แสดงเนื้อหาตรงกลาง (กลาง) ของ w3-display-container |
| w3-display-topmiddle | แสดงเนื้อหาที่ตรงกลางด้านบนของ w3-display-container |
| w3-display-ด้านล่างสุด | แสดงเนื้อหาที่ตรงกลางด้านล่างของ w3-display-container |
| w3-แสดงตำแหน่ง | แสดงเนื้อหาในตำแหน่งที่ระบุใน w3-display-container |
| w3-display-โฮเวอร์ | แสดงเนื้อหาบนโฮเวอร์ภายใน w3-display-container |
| w3-left | ลอยองค์ประกอบไปทางซ้าย (ลอย: ซ้าย) |
| w3-ขวา | ลอยองค์ประกอบไปทางขวา (ลอย: ขวา) |
| w3-show | แสดงองค์ประกอบ (แสดง: บล็อก) |
| w3-ซ่อน | ซ่อนองค์ประกอบ (แสดง: ไม่มี) |
| w3-mobile | เพิ่มการตอบสนองเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรกไปยังองค์ประกอบใดๆ แสดงองค์ประกอบเป็นองค์ประกอบบล็อกบนอุปกรณ์มือถือ |
ตัวอย่าง
ตัวอย่าง
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
ตัวอย่างเดียวกันกับด้านบนด้วยการเติมช่องว่างภายใน:
บนซ้าย
ขวาบน
ล่างซ้าย
ล่างขวา
ซ้าย
ถูกต้อง
กลาง
ตัวอย่าง
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
การแสดงข้อความภายในภาพ:
บนซ้าย
ขวาบน
ล่างซ้าย
ล่างขวา
ท็อป มิด
ซ้าย
ถูกต้อง
กลาง
กลางล่าง
ตัวอย่าง
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
วางเมาส์บนจอแสดงผล
คลาสw3-display-hoverแสดงเนื้อหาบนโฮเวอร์ภายใน w3-display-container (เปลี่ยนจากซ่อนเป็นแสดง)
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
วางเมาส์เหนือกล่องนี้!
Top Mid
Bottom Mid
ตัวอย่าง
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Mouse over this box!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
คลาสw3-display-hoverสามารถรวมกับ คลาสเอ ฟเฟ กต์ และ แอนิเมชั่นเพื่อสร้างเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยม:
Khaki pants, $19.99
ตัวอย่าง
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button
w3-black">John Doe</button>
</div>
</div>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับแอนิเมชั่นและเอฟเฟกต์ในภายหลังในบทช่วยสอนนี้
Displaying A Flag
With a little bit of imagination, the w3-display-classes can be used to create a flag:
Example
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
w3-left
w3-right
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left
w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).
Hide and Show
Force an element to be shown or hidden with the w3-show or w3-hide class.
Example
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
These classes are often used to toggle between hiding and showing elements:
Example
Hello!
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<button class="w3-button w3-mobile">Link</button>