10.1 Bố cục hai cột
Tạo bố cục phức tạp trên các trang web yêu cầu hiểu sâu các phương pháp định vị khác nhau và sự kết hợp của chúng. Trong bài giảng này, mình sẽ xem xét một vài ví dụ thực tế về việc tạo bố cục phức tạp sử dụng các kỹ thuật CSS khác nhau, như Flexbox, Grid và định vị truyền thống.
Bố cục blog với điều hướng cố định
Bố cục này bao gồm tiêu đề, thanh điều hướng cố định, nội dung chính và thanh bên.
Ví dụ:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #444;
color: white;
padding: 10px;
box-sizing: border-box;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px; /* Chiều cao của thanh điều hướng cố định */
}
.main-content {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: relative;
margin-top: auto;
}
<div class="header">My Blog</div>
<div class="navbar">Navigation</div>
<div class="container">
<div class="main-content">
<h1>Main Content</h1>
<p>Here is the main content of the blog.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Links and other content.</p>
</div>
</div>
<div class="footer">Footer</div>
Trong ví dụ này, thanh điều hướng cố định vẫn ở nguyên vị trí khi trang được cuộn nhờ position: fixed.
Nội dung chính và thanh bên được bố trí thành hai cột nhờ Flexbox.
10.2 Trang web một trang
Trang web một trang với tiêu đề và chân trang cố định
Bố cục này bao gồm tiêu đề, nội dung chính và chân trang. Tiêu đề và chân trang vẫn hiển thị khi cuộn trang.
Ví dụ:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
bottom: 0;
z-index: 1000;
}
<div class="header">Sticky Header</div>
<div class="main">
<h1>Main Content</h1>
<p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>
Trong ví dụ này, tiêu đề và chân trang vẫn hiển thị khi cuộn trang nhờ position: sticky.
10.3 Thanh điều hướng đa cấp
Bố cục này bao gồm một thanh điều hướng đa cấp, sử dụng danh sách lồng nhau và các pseudo-class để tạo menu thả xuống.
Ví dụ:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar li ul {
display: none;
position: absolute;
background-color: #333;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
float: none;
}
.navbar li ul li a {
padding: 14px 16px;
}
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
GO TO FULL VERSION