เรียนชายแดน
เรียน W3.CSS ชายแดนที่สามารถใช้กับองค์ประกอบ HTML ใด ๆ
ฉันมีพรมแดนในทุกด้าน
ฉันมีขอบด้านล่างสีแดง
ฉันได้กลมพรมแดน
ตัวอย่าง
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
ลองตัวเอง» แสดงหมายเหตุ
หมายเหตุจะแสดงมักจะมีสีซีดและแถบสี:
ตัวอย่าง
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
ลองตัวเอง» แสดงแผง
แผงสามารถแสดงผลในล้านวิธีที่แตกต่างกัน
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่
ตัวอย่าง
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div>
ลองตัวเอง» แสดงคำคม
ชั้น W3-Container สามารถใช้ในการแสดงคำพูด
ตัวอย่าง
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div>
ลองตัวเอง» ถ้าคุณใช้ HTML <blockquote> โปรดจำไว้ว่า HTML จะเพิ่มขอบซ้ายพิเศษ:
"ทำให้มันเป็นง่ายๆเป็นไปได้ แต่ไม่ง่าย."
Albert Einstein
ตัวอย่าง
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
ลองตัวเอง» Hoverable พรมแดน
W3-hover-border- เรียนสีเปลี่ยนสีของเส้นขอบบนเมาส์มากกว่านี้:
ชายแดน hoverable แดง
ชายแดนที่จะเปลี่ยนสีม่วงสีฟ้าบนโฉบ
ตัวอย่าง
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div>
ลองตัวเอง»