Núi
Lorem ipsum dolor..
Tự kiểm tra bằng các câu hỏi trắc nghiệm
Ghi lại kiến thức của bạn
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
Tìm hiểu cách tạo thư viện danh mục đầu tư bằng tính năng lọc.
Bấm vào các nút để lọc một danh mục:
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> Nature</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('people')"> People</button>
</div>
<!-- Portfolio Gallery Grid -->
<div
class="row">
<div class="column nature">
<div
class="content">
<img src="/w3images/mountains.jpg"
alt="Mountains" style="width:100%">
<h4>Mountains</h4>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
<div
class="column nature">
<div class="content">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<h4>Lights</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/nature.jpg"
alt="Nature" style="width:100%">
<h4>Forest</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars1.jpg"
alt="Car" style="width:100%">
<h4>Retro</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
<h4>Fast</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars3.jpg"
alt="Car" style="width:100%">
<h4>Classic</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people1.jpg"
alt="People" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people2.jpg"
alt="People" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people3.jpg"
alt="People" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- END GRID -->
</div>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center
website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you
want) */
.row,
.row >
.column {
padding: 8px;
}
/* Create three equal columns that
floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default
*/
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/*
The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color:
white;
cursor: pointer;
}
/* Add a grey background color on mouse-over */
.btn:hover
{
background-color: #ddd;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #666;
color: white;
}
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove
the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i],
"show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
// Show filtered
elements
function w3AddClass(element,
name) {
var i, arr1, arr2;
arr1 = element.className.split("
");
arr2 = name.split(" ");
for (i = 0; i < arr2.length;
i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while
(arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class
to the current button (highlight it)
var btnContainer =
document.getElementById("myBtnContainer");
var btns =
btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length;
i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Thư viện danh mục đầu tư
Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]
Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]