Bảng điều khiển W3.CSS
Tôi là một ban hội thẩm.
Tôi là một ban hội thẩm.
Tôi là một vật chứa.
Tôi là một vật chứa.
Lớp Panel
Lớp bảng điều khiển w3 thêm lề trên và dưới 16px và phần đệm trái và phải 16px vào bất kỳ phần tử HTML nào.
Thí dụ
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panels for Notes
Lớp bảng điều khiển w3 hoàn hảo để hiển thị các ghi chú.
Ghi chú thường được hiển thị với màu nhạt:
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.
Thí dụ
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Để tìm hiểu thêm về W3.CSS Notes, vui lòng truy cập chương W3.CSS Notes .
Bảng báo giá
Lớp bảng điều khiển w3 hoàn hảo để hiển thị báo giá.
Thí dụ
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Để tìm hiểu thêm về Báo giá W3.CSS, vui lòng truy cập chương Báo giá W3.CSS .
Bảng thông báo
Lớp bảng điều khiển w3 hoàn hảo để hiển thị cảnh báo.
Các cảnh báo thường được hiển thị bằng màu đậm:
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.
Thí dụ
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Để tìm hiểu thêm về Cảnh báo W3.CSS, vui lòng truy cập chương Cảnh báo W3.CSS .
Panels as Cards
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.
Thí dụ
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Bảng trò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.
Thí dụ
<div class="w3-panel w3-blue 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>
Ẩn (Đóng) một bảng điều khiển
Ẩn một bảng điều khiển rất dễ dàng.
Nhấp vào X để đóng bảng điều khiển này.
Nhấp vào X để đóng bảng điều khiển này.
Thí dụ
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Hiển thị (Mở) một Bảng điều khiển
Dễ dàng hiển thị bảng điều khiển (ẩn):
Thí dụ
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>