Vùng chứa W3.CSS
Đây là tiêu đề của tôi
Đây là bài viết của tôi
Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu. Bài viết này có màu xám nhạt và văn bản màu nâu.
Đây là chân trang của tôi
Lớp chứa
Lớp w3-container thêm phần đệm bên trái và bên phải 16px vào bất kỳ phần tử HTML nào.
Lớp w3-container là lớp hoàn hảo để sử dụng cho tất cả các thành phần vùng chứa HTML như:
<div>, <article>, <section>, <header>, <footer>, <form>, v.v.
Container mang lại sự bình đẳng
Bộ chứa w3 cung cấp sự bình đẳng cho tất cả các thành phần bộ chứa HTML:
- Lề chung
- Phần đệm chung
- Sắp xếp chung
- Phông chữ phổ biến
- Màu sắc phổ biến
Để sử dụng vùng chứa, chỉ cần thêm lớp w3-container vào bất kỳ phần tử nào:
Ví dụ
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Hãy tự mình thử »Để thêm màu, chỉ cần thêm lớp màu w3- :
Ví dụ
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Hãy tự mình thử » Đầu trang và chân trang
Lớp w3-container có thể được sử dụng để tạo kiểu cho các tiêu đề:
tiêu đề
Không có sự khác biệt trong cách W3.CSS xử lý các phần tử <div> và <header>.
Lớp w3-container có thể được sử dụng để tạo kiểu cho chân trang:
Ví dụ
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Hãy tự mình thử »Ví dụ
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Hãy tự mình thử »Nhiều trang web sử dụng phần tử <div> thay vì phần tử <header> và <footer>.
Bài viết và Mục
Lớp w3-container có thể được sử dụng để tạo kiểu cho các phần tử <article> và <section>:
Ví dụ
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Hãy tự mình thử »Nhiều trang web sử dụng phần tử <div> thay vì phần tử <article> và <section>.
Ví dụ về trang web
tiêu đề
Ô tô là một loại phương tiện có động cơ tự động, có bánh xe được sử dụng để vận chuyển. Hầu hết các định nghĩa về thuật ngữ này đều chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường. (Wikipedia)
Ví dụ sử dụng phần tử HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
Hãy tự mình thử »Ví dụ sử dụng các phần tử ngữ nghĩa HTML
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Hãy tự mình thử »Đệm container
Lớp w3-container có phần đệm bên trái và bên phải 16px mặc định và không có phần đệm trên cùng hoặc dưới cùng:
Thông thường, bạn sẽ không phải thay đổi phần đệm mặc định của vùng chứa, vì các đoạn văn và tiêu đề cung cấp lề sẽ mô phỏng phần đệm.
Tôi là một tiêu đề
Tôi là một đoạn văn.
Ví dụ
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Hãy tự mình thử »