Nghiên cứu điển hình về W3.CSS
Xây dựng một trang web đáp ứng từ đầu
Trong chương này, chúng ta sẽ xây dựng một trang web đáp ứng W3.CSS từ đầu.
Trước tiên, hãy bắt đầu với một trang HTML đơn giản, với chế độ xem ban đầu và liên kết tới W3.CSS.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html> Hãy tự mình thử »Đặt các phần tử vào thùng chứa
Để thêm lề và phần đệm chung, hãy đặt các phần tử HTML bên trong vùng chứa (<div class="w3-container">)
Tách tiêu đề khỏi phần còn lại của nội dung bằng cách sử dụng hai phần tử <div> riêng biệt:
Ví dụ
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div> Hãy tự mình thử » Lớp màu
Các lớp màu xác định màu của các phần tử.
Ví dụ này thêm màu vào phần tử <div> đầu tiên:
Ví dụ
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Hãy tự mình thử »Lớp kích thước
Các lớp kích thước xác định kích thước văn bản cho các phần tử.
Ví dụ này thêm kích thước cho cả hai thành phần tiêu đề:
Ví dụ
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Hãy tự mình thử »Sử dụng các yếu tố ngữ nghĩa
Nếu bạn muốn làm theo các khuyến nghị ngữ nghĩa HTML5. vui lòng làm!
W3.CSS không thành vấn đề nếu bạn sử dụng <div> hoặc <header>.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html> Hãy tự mình thử »Bố cục đáp ứng nhiều cột
Với W3.CSS, thật dễ dàng để tạo bố cục đáp ứng nhiều cột.
Các cột sẽ tự động sắp xếp lại khi xem trên các kích thước màn hình khác nhau.
Một số quy tắc lưới:
- Bắt đầu với một lớp hàng <div class="w3-row-padding">
- Sử dụng các lớp được xác định trước như "w3-third" để nhanh chóng tạo các cột lưới
- Đặt nội dung văn bản của bạn bên trong các cột lưới
Ví dụ này cho thấy cách tạo ba cột có chiều rộng bằng nhau:
Ví dụ
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Hãy tự mình thử »Ví dụ này cho thấy cách tạo bốn cột có chiều rộng bằng nhau:
Ví dụ
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Hãy tự mình thử »Cột có chiều rộng khác nhau
Ví dụ này tạo bố cục ba cột trong đó cột ở giữa rộng hơn cột đầu tiên và cột cuối cùng:
Ví dụ
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Hãy tự mình thử »Thanh điều hướng
Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang.
Ví dụ
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav> Hãy tự mình thử »Điều hướng bên
Với điều hướng bên, bạn có một số tùy chọn:
- Luôn hiển thị khung điều hướng ở bên trái nội dung trang.
- Sử dụng điều hướng bên đáp ứng "hoàn toàn tự động" có thể thu gọn.
- Mở ngăn điều hướng ở phần bên trái của nội dung trang.
- Mở ngăn điều hướng trên tất cả nội dung trang.
- Trượt nội dung trang sang bên phải khi mở ngăn điều hướng.
- Hiển thị khung điều hướng ở bên phải thay vì bên trái
Ví dụ này mở ngăn điều hướng ở phần bên trái của nội dung trang:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript dùng để mở và ẩn menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Hãy tự mình thử »