W3.CSS Intro (อ่างล้างจาน)
W3.CSS สี
คลาส สีw3 ได้รับแรงบันดาลใจจากสีสมัยใหม่ที่ใช้ในการตลาด ป้ายถนน และกระดาษโน้ต:
คอนเทนเนอร์ W3.CSS
คลาสw3-containerเป็นคลาสที่สำคัญที่สุดของคลาส W3.CSS ให้ความเท่าเทียมกันเช่น:
- อัตรากำไรขั้นต้นทั่วไป
- ช่องว่างภายในทั่วไป
- การจัดแนวแนวตั้งทั่วไป
- การจัดแนวแนวนอนทั่วไป
- แบบอักษรทั่วไป
- สีทั่วไป
โดยทั่วไปคลาส w3-container ใช้กับองค์ประกอบคอนเทนเนอร์ HTML เช่น:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> และอื่นๆ
นี่คือส่วนหัว
บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล บทความนี้เป็นสีเทาอ่อนและข้อความเป็นสีน้ำตาล
นี่คือส่วนท้าย
แผง W3.CSS บันทึกย่อและคำพูด
คลาสw3-panel สามารถแสดงบันทึกย่อและคำพูดได้ทุกประเภท:
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
การแจ้งเตือน W3.CSS
คลาสw3-panel ยังสามารถใช้สำหรับการแจ้งเตือนทุกประเภท:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
คำเตือน!
สีเหลืองมักบ่งบอกถึงคำเตือนที่อาจต้องให้ความสนใจ
ความสำเร็จ!
สีเขียวมักบ่งบอกถึงความสำเร็จหรือแง่บวก
ข้อมูล!
สีน้ำเงินมักบ่งบอกถึงการเปลี่ยนแปลงหรือการกระทำของข้อมูลที่เป็นกลาง
ตัวอย่าง
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
การ์ด W3.CSS
คลาสw3-card เหมาะสำหรับทั้งรูปภาพและโน้ต:
รถ
รถยนต์คือยานยนต์ที่มีล้อขับเคลื่อนด้วยตัวเองซึ่งใช้สำหรับการขนส่ง คำจำกัดความส่วนใหญ่ของคำศัพท์ระบุว่ารถยนต์ได้รับการออกแบบให้วิ่งบนถนนเป็นหลัก มีที่นั่งสำหรับหนึ่งถึงแปดคน และโดยทั่วไปแล้วจะมีสี่ล้อ
(วิกิพีเดีย)
อัศจรรย์
เทือกเขาแอลป์ฝรั่งเศส
ตัวอย่าง
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
ตาราง W3.CSS
คลาสw3-table สามารถจัดการตารางได้ทุกประเภท:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
| อัญชัญ | เบื่อ | 100 |
ตัวอย่าง
<table class="w3-table w3-striped w3-border">
รายการ W3.CSS
คลาสw3-ul สามารถจัดการรายการได้ทุกประเภท:
-
ไมค์
เว็บดีไซเนอร์ -
Jill
Support -
เจน
บัญชี -
ที่ปรึกษาแจ็ค
ตัวอย่าง
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ปุ่ม W3.CSS
ปุ่มw3และ คลาส w3-btn มีปุ่มทุกขนาดและทุกประเภท
ปุ่มกว้าง:
ปุ่มกลมหรือสี่เหลี่ยม:
W3.CSS แท็ก ป้าย ป้าย และป้าย
คลาสw3-tagและ w3-badge สามารถแสดงแท็ก ป้ายกำกับ ป้ายและป้ายทุกประเภท:
2 8 อา บี
ใหม่ คำเตือน อันตราย ข้อมูล
หายใจ
ใต้น้ำ
W3.CSS ตอบสนอง
คลาสResponsive Grid ให้การตอบสนองสำหรับอุปกรณ์ทุกประเภท: พีซี แล็ปท็อป แท็บเล็ต และมือถือ
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
พักผ่อน
1/4
พักผ่อน
100px
45px
พักผ่อน
W3.CSS ยังสนับสนุน ตารางของเหลวสำหรับมือถือเป็นอันดับแรก 12 คอลัมน์ที่ มีคลาสขนาดเล็ก กลาง และใหญ่
จอแสดงผล W3.CSS
คลาสw3-displayช่วยให้คุณสามารถแสดงองค์ประกอบ HTML ในตำแหน่งเฉพาะ:
W3.CSS Modals
คลาสw3-modal ให้กล่องโต้ตอบโมดอลใน HTML บริสุทธิ์:
ภาพโมดอล:
แถบความคืบหน้า W3.CSS
อ่านเพิ่มเติมได้ที่W3.CSS Progress Bars
ดรอปดาวน์ W3.CSS
คลาสw3-dropdown ให้ดรอปดาวน์:
หีบเพลง W3.CSS
อ่านเพิ่มเติมได้ที่W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
แท็บ W3.CSS
แท็บเหมาะอย่างยิ่งสำหรับเว็บแอปพลิเคชันหน้าเดียว หรือสำหรับหน้าเว็บที่สามารถแสดงหัวข้อต่างๆ ได้
ลอนดอน
ลอนดอนเป็นเมืองหลวงของอังกฤษ
เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
แกลลอรี่รูปภาพแบบแท็บ (คลิกที่ภาพใดภาพหนึ่ง):
W3.CSS การนำทาง
คลาสw3-barสามารถใช้สร้างแถบนำทางได้:
แถบนำทางพร้อมอินพุต:>
แถบนำทางพร้อมดรอปดาวน์:
คลาสw3-sidebarสร้างการนำทางด้านข้าง:
การแบ่งหน้า W3.CSS
W3.CSS มีวิธีง่ายๆ สำหรับการแบ่งหน้า
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.