การ์ดแสดง
จอห์น
สถาปนิกและวิศวกร
| ชั้น | กำหนด |
|---|---|
| W3 การ์ด | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (มีขอบ) |
| W3 บัตร-2 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (2px เงาขอบ) |
| W3 บัตร-4 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (4px เงาขอบ) |
| W3 บัตร-8 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (8px เงาขอบ) |
| W3 บัตร-12 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (12px เป้เงา) |
| W3 บัตร-16 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (16px เป้เงา) |
| W3 บัตร-24 | ภาชนะสำหรับเนื้อหา HTML ใด ๆ (24px เป้เงา) |
การ์ดสี
สร้างการ์ดกระดาษเช่นเดียวกับชั้นเรียน W3 บัตรและใช้ระดับ W3 สีเพื่อเพิ่มสี:
W3 บัตร-2
W3 บัตร-4
W3 บัตร-8
บัตรภาพ
ลิ้นของ Troll ใน Hardanger, นอร์เวย์
ตัวอย่าง
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> ลองตัวเอง» เนื้อหาบัตร
ส่วนหัว
บางข้อความ .. Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ทำ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
ตัวอย่าง
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> ลองตัวเอง» ผลเลื่อน
ชั้น W3-hover เงาเพิ่มผลเงาบนโฉบ - นี้จะทำให้องค์ประกอบใด ๆ ลักษณะเหมือนบัตรบนเมาส์มากกว่า (แบบเดียวกับ W3 บัตร 4)
เลื่อนเมาส์ไปที่ฉัน!
ตัวอย่างเพิ่มเติม
ขอเป็นเพื่อน
จอห์นโด
ตัวอย่าง
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> ลองตัวเอง» จอห์นโด
1 คำขอเป็นเพื่อนใหม่
ซีอีโอที่โรงเรียน Mighty ตลาดและการโฆษณา ที่กำลังมองหางานใหม่และโอกาสใหม่ ๆ
ตัวอย่าง
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> ลองตัวเอง»