Đất Việt Lập Trình: 27. Tạo một website đơn giản phần 4

Thứ Tư, 19 tháng 6, 2024

27. Tạo một website đơn giản phần 4

Chúng ta đã hoàn tất bố cục một trang web điển hình với header, footer, menu và 3 cột content bằng nhau.

Tuy nhiên, trong thực tế, 3 cột content sẽ không bằng nhau.

Các cột không bằng nhau

Thông thường, nội dung chính là phần lớn nhất và quan trọng nhất của một trang web. Do đó, các cột thường có chiều rộng không bằng nhau, hầu hết không gian được dành cho Main Content. Nội dung bên (nếu có) thường được sử dụng làm điều hướng thay thế hoặc để chỉ định thông tin có liên quan đến nội dung chính. Thay đổi chiều rộng theo ý muốn, chỉ cần nhớ rằng tổng chiều rộng phải bằng 100%. Chúng ta sẽ thay class column bằng 2 class khác.

/* Left and right column */
.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

Giờ đây mã HTML của chúng ta 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;

}
/* Left and right column */
.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

.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 side">
    <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 middle">
    <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 side">
    <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>