Giới thiệu W3.CSS (Bồn rửa bát)
Màu W3.CSS
Các lớp w3-color đượ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 và giấy 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ư:
- Lề chung
- Phần đệm chung
- Căn chỉnh 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ử chứa HTML, như:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, v.v.
Đây là một tiêu đề
Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu.
Đây là chân trang.
Bảng, ghi chú và trích dẫn W3.CSS
Lớp w3-panel 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 khu vực đô 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 khu vực đô thị hơn 9 triệu dân.
Cảnh báo W3.CSS
Lớp w3-panel 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 biểu thị cảnh báo có thể cần chú ý.
Thành công!
Màu xanh lá cây thường chỉ ra đ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ị sự thay đổi hoặc hành động mang tính thông tin trung lập.
Ví dụ
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Hãy tự mình thử »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à một loại phương tiện có động cơ tự động, có bánh xe được sử dụng để vận chuyển. Hầu hết các định nghĩa về thuật ngữ này đều chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường, có chỗ ngồi cho từ một đến tám người và thường có bốn bánh.
(Wikipedia)
Tuyệt vời
dãy Alps thuộc Pháp
Ví 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>
Hãy tự mình thử »Bảng W3.CSS
Các lớp bảng w3 có thể xử lý tất cả các loại bảng:
Tên đầu tiên | Họ | Điểm |
---|---|---|
Jill | thợ rèn | 50 |
Đêm | Jackson | 94 |
Adam | Johnson | 67 |
Anja | Chán | 100 |
Danh sách W3.CSS
Lớp w3-ul có thể xử lý tất cả các loại danh sách:
- Mike
Nhà thiết kế web - Jill
Ủng hộ - Jane
Kế toán viên - Jack
cố vấn
Ví dụ
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »Nút W3.CSS
Lớp w3-button và w3-btn cung cấp các nút thuộc mọi kích cỡ và loại.
Nút rộng:
Nút tròn hoặc vuông:
Thẻ, Nhãn, Huy hiệu và Dấu hiệu W3.CSS
Các lớp w3-tag và w3-badge có khả năng hiển thị tất cả các loại thẻ, nhãn, huy hiệu và biển hiệu:
2 8 A B
Thông tin cảnh báo nguy hiểm mới
THỞ
DƯỚI NƯỚC
W3.CSS đáp ứng
Các lớp Lưới đáp ứng cung cấp khả năng phản hồi 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
nghỉ ngơi
1/4
nghỉ ngơi
100px
45px
nghỉ ngơi
W3.CSS cũng hỗ trợ lưới chất lỏng đầu tiên di động 12 cột với các lớp nhỏ, vừa và lớn.
Hiển thị 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
Danh sách thả xuống W3.CSS
Các lớp thả xuống w3 cung cấp danh sách thả xuống:
Hiệp định W3.CSS
Đọc thêm tại Hiệp định W3.CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Accordion với hình ảnh:
dãy Alps thuộc Pháp
Tab W3.CSS
Tab hoàn hảo cho các ứng dụng web một trang hoặc cho các trang web có khả năng hiển thị các chủ đề khác nhau.
London
London là thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị hơn 9 triệu dân.
Paris
Paris là thủ đô của nước Pháp.
Khu vực Paris là một trong những trung tâm dân số lớn nhất ở châu Âu, với hơn 12 triệu dân.
Tokyo
Tokyo là thủ đô của Nhật Bản.
Đây là trung tâm của Khu vực Greater Tokyo và là khu vực đô thị đông dân nhất thế giới.
Thư viện hình ảnh theo thẻ (Nhấp vào một trong các hình ảnh):
Điều hướng W3.CSS
Lớp w3-bar có thể được sử dụng để tạo thanh điều hướng:
Thanh điều hướng với đầu vào:>
Thanh điều hướng có menu thả xuống:
Lớp w3-sidebar tạo điều hướng bên:
Phân trang W3.CSS
W3.CSS cung cấp những cách đơn giản để phân trang trang .
Trình chiếu
W3.CSS cung cấp trình chiếu để duyệt qua hình ảnh hoặc nội dung khác:
Hộp đèn
Kết hợp Modals và Slideshows để tạo hộp đèn (thư viện hình ảnh modal):
Ảnh động W3.CSS
Các lớp w3-animate cung cấp một cách dễ dàng để trượt và làm mờ các phần tử:
Hình ảnh W3.CSS
Tạo kiểu cho hình ảnh trong W3CSS thật dễ dàng:
Hiệu ứng W3.CSS
Thêm hiệu ứng đặc biệt cho bất kỳ phần tử nào:
Độ mờ
Thang độ xám
màu nâu đỏ
Biểu mẫu nhập W3.CSS
Các lớp đầu vào w3 dành cho các dạng đầu vào:
Mẫu đầu vào
Mẫu đầu vào
Bộ lọc W3.CSS
Sử dụng Bộ lọc W3.CSS để tìm kiếm một thành phần cụ thể trong danh sách, bảng, danh sách thả xuống, v.v.:
Tên | Quốc gia |
---|---|
Alfred Futterkiste | nước Đức |
Berglunds snabkop | Thụy Điển |
Giao dịch đảo | Vương quốc Anh |
Koniglich Essen | nước Đức |
Hầm rượu Bacchus cười | Canada |
Magazzini Alimentari Riuniti | Nước Ý |
Bắc Nam | Vương quốc Anh |
Đặc sản Paris | Pháp |
Phông chữ W3.CSS
Với W3.CSS, việc thêm phông chữ vào trang web cực kỳ dễ dàng:
Chú giải công cụ W3.CSS
Lớp w3-tooltip có thể hiển thị tất cả các loại chú giải công cụ:
Di chuột qua văn bản này! Nội dung chú giải công cụ
Di chuột qua văn bản này! Nội dung chú giải công cụ
Chủ đề màu sắc
Chủ đề màu sắc có thể dễ dàng được thêm vào bất kỳ ứng dụng web nào:
Chủ đề màu chàm
Phim 2014
Đông cứng
Phản hồi về hình ảnh động thật lố bịch
Lỗi ở các vì sao của chúng ta
Chạm vào, hấp dẫn và thực sự được thực hiện tốt
Avengers
Một thành công lớn cho Marvel và Disney
Chủ đề màu xanh mòng két
Phim 2014
Đông cứng
Phản hồi về hình ảnh động thật lố bịch
Lỗi ở các vì sao của chúng ta
Chạm vào, hấp dẫn và thực sự được thực hiện tốt
Avengers
Một thành công lớn cho Marvel và Disney
Chủ đề màu sắc là sự kết hợp hoàn hảo cho các ứng dụng di động.