Giới thiệu W3.CSS (Chậu rửa trong bếp)
W3.CSS Màu sắc
Các lớp màu w3 được lấy cảm hứng từ các màu hiện đại được sử dụng trong tiếp thị, biển báo đường bộ và ghi chú dán:
Vùng chứa W3.CSS
Lớp w3-container là lớp quan trọng nhất trong các lớp W3.CSS. Nó cung cấp sự bình đẳng như:
- Biên lợi nhuận chung
- Đệm phổ biến
- Căn chỉnh theo chiều dọc phổ biến
- Căn chỉnh ngang phổ biến
- Phông chữ phổ biến
- Màu sắc phổ biến
Lớp w3-container thường được sử dụng với các phần tử vùng chứa HTML, như:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> và hơn thế nữa.
Đây là một tiêu đề
Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu.
Đây là một footer.
Bảng W3.CSS, Ghi chú và Trích dẫn
Lớp bảng điều khiển w3 có thể hiển thị tất cả các loại ghi chú và trích dẫn:
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Cảnh báo W3.CSS
Lớp bảng điều khiển w3 cũng có thể được sử dụng cho tất cả các loại cảnh báo:
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Cảnh báo!
Màu vàng thường chỉ ra một cảnh báo có thể cần chú ý.
Thành công!
Màu xanh lá cây thường biểu thị điều gì đó thành công hoặc tích cực.
Thông tin!
Màu xanh lam thường biểu thị một hành động hoặc thay đổi mang tính thông tin trung tính.
Thí dụ
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Thẻ W3.CSS
Các lớp thẻ w3 phù hợp cho cả hình ảnh và ghi chú:
Xe hơi
Ô tô là phương tiện giao thông có bánh, có động cơ dùng để vận chuyển. Hầu hết các định nghĩa của thuật ngữ chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường, có chỗ ngồi cho một đến tám người và thường có bốn bánh.
(Wikipedia)
Tuyệt vời
Alps của Pháp
Thí dụ
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
Bảng W3.CSS
Các lớp bảng w3 có thể xử lý tất cả các loại bảng:
| Họ | Họ | Điểm |
|---|---|---|
| Jill | thợ rèn | 50 |
| đêm | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Chán | 100 |
Thí dụ
<table class="w3-table w3-striped w3-border">
Danh sách W3.CSS
Lớp w3-ul có thể xử lý tất cả các loại danh sách:
-
Mike
Web Designer -
Hỗ trợ Jill
-
Jane
Accountant -
Jack
Cố vấn
Thí dụ
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Các nút W3.CSS
Lớp w3-button và w3-btn cung cấp các nút ở mọi kích cỡ và kiểu.
Các nút rộng:
Các nút tròn hoặc vuông:
W3.CSS Thẻ, Nhãn, Huy hiệu và Dấu hiệu
Thẻ w3 và các lớp huy hiệu w3 có khả năng hiển thị tất cả các loại thẻ, nhãn, huy hiệu và dấu hiệu:
2 số 8 MỘT B
Mới Cảnh báo Sự nguy hiểm Thông tin
VỆ SINH
DƯỚI NƯỚC
W3.CSS đáp ứng
Các lớp Lưới đáp ứng cung cấp khả năng đáp ứng cho tất cả các loại thiết bị: PC, máy tính xách tay, máy tính bảng và thiết bị di động.
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
còn lại
1/4
còn lại
100px
45px
còn lại
W3.CSS cũng hỗ trợ lưới chất lỏng thứ nhất di động 12 cột với các lớp nhỏ, trung bình và lớn.
Màn hình W3.CSS
Các lớp w3-display cho phép bạn hiển thị các phần tử HTML ở các vị trí cụ thể:
Phương thức W3.CSS
Lớp w3-modal cung cấp hộp thoại phương thức trong HTML thuần túy:
Hình ảnh phương thức:
Thanh tiến trình W3.CSS
Đọc thêm tại Thanh tiến trình W3.CSS
W3.CSS thả xuống
Các lớp thả xuống w3 cung cấp các danh sách thả xuống:
Hiệp định W3.CSS
Read more at 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 Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
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.