Cách thực hiện - Mở rộng lưới
Tìm hiểu cách tạo lưới mở rộng bằng CSS và JavaScript.
Lưới mở rộng
Nhấp vào hộp để "mở rộng" nó (chiều rộng 100%):
Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn
Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng
Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)
Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi
Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình
Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn
Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!
Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces
Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.
Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript
Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi
Đọc xu hướng dài hạn của việc sử dụng trình duyệt
Kiểm tra tốc độ đánh máy của bạn
Tìm hiểu dịch vụ web của Amazon
Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau.
Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông
Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn
Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng
Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo
Về bán hàng: [email protected]
Về lỗi: [email protected]
Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục
Lorem ipsum dolor sit amet, te quo doctus ghê tởm, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius lỗi diceret deseruisse quảng cáo
Lorem ipsum dolor sit amet, te quo doctus ghê tởm, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius lỗi diceret deseruisse quảng cáo
Lorem ipsum dolor sit amet, te quo doctus ghê tởm, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius lỗi diceret deseruisse quảng cáo
<!-- The grid: three columns -->
<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">Box
1</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">Box
2</div>
<div class="column" onclick="openTab('b3');" style="background:red;">Box
3</div>
</div>
<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display:none;background:green">
<!-- If you want the ability to close the container, add a close button -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b2" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 2</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b3" class="containerTab" style="display:none;background:red">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 3</h2>
<p>Lorem ipsum..</p>
</div>
Tạo ba cột:
/* The grid: Three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 50px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: white;
}
.containerTab
{
padding: 20px;
color: white;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Closable button inside the image */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
// Hide all elements with class="containerTab",
except for the one that matches the clickable grid column
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
Hãy tự mình thử »