Chúng ta sẽ tiếp tục với phần Footer cuối mỗi trang web.
Phần footer được đặt ở cuối trang web của bạn. Phần này thường chứa thông tin như bản quyền và thông tin liên hệ. Chúng ta sẽ tạo class footer đơn giản với màu background xám nhạt và canh center cho các thông tin..footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
Sau đó ta sẽ thêm một thẻ <div> vào trong phần <body>. Mã HTML sẽ như sau
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
padding: 20px;
text-align: center;
background: #C0C0C0;
color: white;
font-size: 30px;
}
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: #C0C0C0;
}
.column {
float: left;
width: 33.33%;
padding: 15px;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div><br>
<div class="column">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương..</p>
</div>
<div class="column">
<h2>Lịch Sử và Văn Hóa</h2>
<p>Hội An từng là một thương cảng sầm uất từ thế kỷ 15 đến thế kỷ 19, nơi các thương nhân từ Nhật Bản, Trung Quốc, Ấn Độ và châu Âu giao thương. Sự giao thoa văn hóa này đã tạo nên một Hội An độc đáo với kiến trúc nhà cổ, đền chùa và hội quán mang đậm dấu ấn đa văn hóa. Các công trình như Chùa Cầu Nhật Bản, Hội Quán Phúc Kiến, và những ngôi nhà cổ có niên đại hàng trăm năm là minh chứng sống động cho thời kỳ hoàng kim của Hội An.</p>
</div>
<div class="column">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. Các món ăn như Cao Lầu, Mì Quảng, Bánh Bao Bánh Vạc, và Cơm Gà Hội An đều mang hương vị đặc trưng, không thể tìm thấy ở bất kỳ nơi nào khác. Đặc biệt, du khách không thể bỏ qua việc thưởng thức cà phê tại các quán cà phê cổ kính ven sông, vừa nhâm nhi vừa ngắm nhìn khung cảnh thanh bình.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Sử dụng OnlineGDB, bấm Run để thực thi
Có vấn đề! Màu background không những bao phủ footer như chúng ta dự định mà còn lan sang 3 cột content. Mặt khác, chữ Footer nằm lệch sang lưng chừng bên phải chứ không phải nằm ở center như dự định của chúng ta!
Chúng ta cần "ngăn sông cấm chợ" mấy cột nội dung riêng vào một hàng. Để "ngăn sông cấm chợ", chúng ta cần lưu ý:
Display property
Thuộc tính display chỉ định hành vi hiển thị của một phần tử.
Cú pháp:
display: value;
Tham khảo một số value hay sử dụng, hơi khó hiểu một chút, nhưng khi áp dụng bạn sẽ thấy dễ hiểu hơn.
Content property
Thuộc tính content được sử dụng với các phần tử ::before và ::after để chèn nội dung đã tạo.
Cú pháp:
content: value;
Chúng ta tạm thời chỉ quan tâm tới một value là "", đại khái hiểu là "không có gì cả", một chuỗi rỗng.
Clear property
Thuộc tính clear chỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần tử Float.
Cú pháp:
clear: value;
Nói chung nếu ta thiết lập clear: both thì cả hai bên left và right của phần tử sẽ được "dọn dẹp sạch sẽ"
Chúng ta có mã HTML như sau
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
padding: 20px;
text-align: center;
background: #C0C0C0;
color: white;
font-size: 30px;
}
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: #C0C0C0;
}
.column {
float: left;
width: 33.33%;
padding: 15px;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.row::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="nav_menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div><br>
<div class="row">
<div class="column">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương..</p>
</div>
<div class="column">
<h2>Lịch Sử và Văn Hóa</h2>
<p>Hội An từng là một thương cảng sầm uất từ thế kỷ 15 đến thế kỷ 19, nơi các thương nhân từ Nhật Bản, Trung Quốc, Ấn Độ và châu Âu giao thương. Sự giao thoa văn hóa này đã tạo nên một Hội An độc đáo với kiến trúc nhà cổ, đền chùa và hội quán mang đậm dấu ấn đa văn hóa. Các công trình như Chùa Cầu Nhật Bản, Hội Quán Phúc Kiến, và những ngôi nhà cổ có niên đại hàng trăm năm là minh chứng sống động cho thời kỳ hoàng kim của Hội An.</p>
</div>
<div class="column">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. Các món ăn như Cao Lầu, Mì Quảng, Bánh Bao Bánh Vạc, và Cơm Gà Hội An đều mang hương vị đặc trưng, không thể tìm thấy ở bất kỳ nơi nào khác. Đặc biệt, du khách không thể bỏ qua việc thưởng thức cà phê tại các quán cà phê cổ kính ven sông, vừa nhâm nhi vừa ngắm nhìn khung cảnh thanh bình.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Bấm Run để thực thi, bây giờ Footer đã nằm giữa như chúng ta mong đợi.
Không có nhận xét nào:
Đăng nhận xét