Nghiên cứu điển hình W3.CSS
Xây dựng một trang web đáp ứng từ Scratch
Trong chương này, chúng tôi sẽ xây dựng một trang web đáp ứng W3.CSS từ đầu.
Đầu tiên, hãy bắt đầu với một trang HTML đơn giản, với một khung nhìn ban đầu và một liên kết đến W3.CSS.
Thí 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.w3schools.com/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>
Đặt các phần tử vào vùng chứa
Để thêm lề và phần đệm chung, hãy đặt các phần tử HTML bên trong các 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, sử dụng hai phần tử <div> riêng biệt:
Thí 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>
Các 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:
Thí 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>
Kích thước lớp họ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 một kích thước cho cả hai phần tử tiêu đề:
Thí 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>
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ị về ngữ nghĩa HTML5. vui lòng làm!
Đối với W3.CSS không thành vấn đề nếu bạn sử dụng <div> hoặc <header>.
Thí 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.w3schools.com/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>
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 được 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:
Thí 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>
Ví dụ này cho thấy cách tạo bốn cột có chiều rộng bằng nhau:
Thí 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>
Các cột có độ 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:
Thí 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>
Thanh điều hướng
Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang.
Thí 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>
Điều hướng trang
Với điều hướng bên, bạn có một số tùy chọn:
- Luôn hiển thị ngăn đ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 dẫn hướng.
- Hiển thị ngăn đ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 được sử dụng để mở và ẩn menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}