ล่าสุดการพัฒนาเว็บบทเรียน
×

W3.CSS

W3.CSS บ้าน W3.CSS แนะนำ W3.CSS สี W3.CSS ภาชนะ W3.CSS เขตแดน W3.CSS ประโยชน์ W3.CSS ปุ่ม W3.CSS การ์ด W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS ภาพ W3.CSS ปัจจัยการผลิต W3.CSS ป้าย W3.CSS ป้าย W3.CSS อ่อนไหว W3.CSS ภาพเคลื่อนไหว W3.CSS เมนูแบบเลื่อนลง W3.CSS accordions W3.CSS การเดินเรือ W3.CSS Sidenav W3.CSS แท็บ W3.CSS การให้เลขหน้า W3.CSS แถบความคืบหน้า W3.CSS การเรียงพิมพ์ W3.CSS แบบอักษร W3.CSS ไอคอน W3.CSS สไลด์โชว์ W3.CSS ผลกระทบ W3.CSS เป็นกิริยาช่วย W3.CSS คำแนะนำเครื่องมือ W3.CSS ตะแกรง W3.CSS ธีม W3.CSS โกดัง W3.CSS แนวโน้ม W3.CSS กรณี W3.CSS โทรศัพท์มือถือ

Examples

W3.CSS ตัวอย่าง W3.CSS การสาธิต W3.CSS แม่แบบ

References

W3.CSS คู่มืออ้างอิง W3.CSS ดาวน์โหลด

W3Data

W3Data หน้าหลัก W3Data วัตถุ W3Data Http W3Data รวม W3Data ตัวควบคุม W3Data เซิร์ฟเวอร์ W3Data AppML W3Data คู่มืออ้างอิง

 

W3.CSSเขตแดน


เรียนชายแดน

เรียน W3.CSS ชายแดนที่สามารถใช้กับองค์ประกอบ HTML ใด ๆ

ฉันมีพรมแดนในทุกด้าน


ฉันมีขอบด้านล่างสีแดง


ฉันได้กลมพรมแดน


ฉันมี leftbar สีฟ้า

ตัวอย่าง

<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>
ลองตัวเอง»

แสดงหมายเหตุ

หมายเหตุจะแสดงมักจะมีสีซีดและแถบสี:

ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่


ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่

ตัวอย่าง

<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 ล้านคนที่อาศัยอยู่


ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่


ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 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 สามารถใช้ในการแสดงคำพูด

"ทำให้มันเป็นง่ายๆเป็นไปได้ แต่ไม่ง่าย."

Albert Einstein


"ทำให้มันเป็นง่ายๆเป็นไปได้ แต่ไม่ง่าย."

Albert Einstein


"ทำให้มันเป็นง่ายๆเป็นไปได้ แต่ไม่ง่าย."

Albert Einstein

ตัวอย่าง

<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>
ลองตัวเอง»

แสดงรหัส

HTML ตัวอย่าง

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
ลองตัวเอง»

ตัวอย่าง CSS

<div class="w3-code cssHigh">

.. CSS code here

</div>
ลองตัวเอง»

ตัวอย่าง JavaScript

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
ลองตัวเอง»