W3.CSS là gì?
CSS đáp ứng hiện đại
Bình đẳng cho tất cả các trình duyệt: Chrome. Cạnh Firefox. I E. Cuộc đi săn. Opera.
Bình đẳng cho tất cả các thiết bị: Máy tính để bàn. Máy tính xách tay. Viên thuốc. Điện thoại di động.
Chỉ CSS tiêu chuẩn (Không có thư viện jQuery hoặc JavaScript).
Bắt đầu nhanh W3.CSS
W3.CSS là một khung CSS hiện đại có khả năng phản hồi tích hợp. Theo mặc định, nó hỗ trợ thiết kế đáp ứng trên thiết bị di động, nhỏ hơn và nhanh hơn các khung CSS tương tự.
W3.CSS cũng có thể tăng tốc và đơn giản hóa việc phát triển web vì nó dễ học và dễ sử dụng hơn các khung CSS khác.
Ví dụ
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>My W3.CSS Page</h1>
<p>Resize this page to see the responsive effect!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
Hãy dùng thử W3.CSS » Dùng thử Bootstrap »Nhấp vào nút "Thử tự mình" để xem nó hoạt động như thế nào.
Vùng chứa W3.CSS
Lớp w3-container là một trong những lớp W3.CSS quan trọng nhất.
Nó cung cấp lề, phần đệm, căn chỉnh chính xác, v.v. cho hầu hết các phần tử HTML.
Ví dụ
<div class="w3-container">
<h1>This is a paragraph</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
Hãy dùng thử W3.CSS » Dùng thử Bootstrap »Màu W3.CSS
Các lớp w3-color được lấy cảm hứng từ màu sắc hiện đại:
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.
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.
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.
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.
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.
Ví dụ
<div class="w3-container w3-indigo">
<p>London is the most populous
city in the United Kingdom.</p>
</div>
<div class="w3-container w3-blue">
<p>London is the most populous city in the United Kingdom.</p>
</div>
<div class="w3-container w3-red">
<p>London is the most populous
city in the United Kingdom.</p>
</div>
<div class="w3-container
w3-amber">
<p>London is the most populous city in the United
Kingdom.</p>
</div>
Hãy dùng thử W3.CSS » Dùng thử Bootstrap »Cảnh báo, ghi chú và trích dẫn của W3.CSS
Lớp w3-panel có thể hiển thị tất cả các loại cảnh báo , ghi chú và trích dẫn :
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.
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 hoặc màu cam 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-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
<div class="w3-panel
w3-yellow">
<h3>Warning!</h3>
<p>Yellow or orange often indicates a warning that might need attention.</p>
</div> Hãy dùng thử W3.CSS » Dùng thử Bootstrap »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.
Ví dụ
<div class="w3-panel w3-light-grey w3-border w3-round-xlarge">
<p>London is
the most populous city in the United Kingdom, with a metropolitan area of over
9 million inhabitants.</p>
</div>
<div class="w3-panel w3-pale-red
w3-leftbar w3-border-red">
<p>London is the most populous city in the
United Kingdom, with a metropolitan area of over 9 million inhabitants.</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ú:
Tuyệt vời
dãy Alps thuộc Pháp
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)
John
Kiến trúc sư và kỹ sư
Ví dụ
<div class="w3-card-4" style="max-width:300px;">
<img
src="img_avatar3.png" alt="Avatar" style="width:100%">
<div
class="w3-container">
<h4><b>John</b></h4>
<p>Architect and Engineer</p>
</div>
</div> Hãy dùng thử W3.CSS » Dùng thử Bootstrap »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 |
Ví dụ
<table class="w3-table w3-bordered w3-striped w3-border">
<thead
class="w3-dark-grey">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Hãy dùng thử W3.CSS » Dùng thử Bootstrap »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
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.
Hướng dẫn W3.CSS đầy đủ
Đây là mô tả ngắn gọn về W3.CSS.
Để có hướng dẫn W3.CSS đầy đủ, hãy truy cập Hướng dẫn W3.CSS của W3Schools .
Để có tài liệu tham khảo W3.CSS đầy đủ, hãy truy cập Tài liệu tham khảo W3.CSS của W3Schools .
