รายการ W3.CSS
รายการพื้นฐาน
คลาสw3-ulใช้เพื่อแสดงรายการพื้นฐาน:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการชายแดน
คลาสw3-borderเพิ่มเส้นขอบรอบรายการ:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ส่วนหัวของรายการ
ตัวอย่างวิธีการเพิ่มองค์ประกอบส่วนหัวภายในรายการ:
ชื่อ
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการเป็นบัตร
คลาส หมายเลขw3-card- สามารถใช้แสดงรายการเป็นการ์ด:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการศูนย์กลาง
คลาสw3-centerสามารถใช้เพื่อจัดกึ่งกลางรายการในรายการ:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการสี
คลาส สีw3-สามารถใช้เพื่อเพิ่มสีในรายการ:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการสี
คลาส สีw3- สามารถใช้เพื่อเพิ่ม สีให้กับรายการ:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการโฮเวอร์ได้
คลาสw3-hoverableเพิ่มสีพื้นหลังสีเทาให้กับแต่ละรายการเมื่อวางเมาส์:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
หากคุณต้องการสีโฮเวอร์เฉพาะ ให้เพิ่ม คลาส สี w3-hover- ให้กับแต่ละองค์ประกอบ <li>:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
รายการที่ปิดได้
คลิกที่ "x" เพื่อปิด/ซ่อนรายการ:
- Jill
- อดัม
- อีฟ
ตัวอย่าง
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
เคล็ดลับ: HTML &ครั้ง; เอนทิตีเป็นไอคอนที่ต้องการสำหรับปุ่มปิด (แทนที่จะเป็นตัวอักษร "X")
รายการที่มีช่องว่างภายใน
คลาสw3-paddingสามารถใช้เพื่อเพิ่ม padding ในรายการ:
- Jill
- อีฟ
- อดัม
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
รายการอวตาร
ตัวอย่าง
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
เคล็ดลับ:คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคลาส w3-bar ในบท W3.CSS BarsและW3.CSS Navigation
รายการความกว้าง
รายการมีความกว้าง 100% โดยค่าเริ่มต้น ใช้คุณสมบัติ width เพื่อเปลี่ยนแปลงสิ่งนี้
ตัวอย่าง
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ความกว้าง 30%:
- Jill
- อดัม
ความกว้าง 50%:
- Jill
- อดัม
ความกว้าง 80%:
- Jill
- อดัม
รายการเล็ก
ใช้ คลาส w3-tinyเพื่อแสดงรายการเล็ก ๆ :
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการเล็ก
ใช้ คลาส w3-smallเพื่อแสดงรายการขนาดเล็ก:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการใหญ่
ใช้ คลาส w3-largeเพื่อแสดงรายการขนาดใหญ่:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLarge รายการ
ใช้ คลาส w3-xlargeเพื่อแสดงรายการขนาดใหญ่พิเศษ:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXL รายการใหญ่
ใช้ คลาส w3-xxlargeเพื่อแสดงรายการ XXLarge:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXL รายการใหญ่
ใช้ คลาส w3-xxxlargeเพื่อแสดงรายการ XXXLarge:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
รายการจัมโบ้
ใช้ คลาส w3-jumboเพื่อแสดงรายการ "jumbo" มหาศาล:
- Jill
- อีฟ
- อดัม
ตัวอย่าง
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>