37. Layout Website Trong CSS

Layout Website trong CSS:

Tạo một bố cục (layout) cho trang web là một phần quan trọng của việc phát triển giao diện người dùng. CSS giúp bạn điều chỉnh vị trí, kích thước và cách bố trí các phần tử trên trang web. Dưới đây là một ví dụ về cách tạo một layout đơn giản sử dụng HTML và CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Website Layout Example</title>
</head>
<body>
  <header class="header">Header</header>
  <nav class="nav">Nav</nav>
  <main class="main">
    <section class="content">Main Content</section>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer class="footer">Footer</footer>
</body>
</html>

CSS (styles.css):

css

/* Định dạng phần header */
.header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

/* Định dạng phần nav */
.nav {
  background-color: #f0f0f0;
  padding: 10px;
}

/* Định dạng phần main */
.main {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

/* Định dạng phần content */
.content {
  flex: 2;
  background-color: #f9f9f9;
  padding: 10px;
}

/* Định dạng phần sidebar */
.sidebar {
  flex: 1;
  background-color: #ddd;
  padding: 10px;
}

/* Định dạng phần footer */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

Trong ví dụ này:

.header định dạng phần header của trang.
.nav định dạng phần navigation (thường là menu) của trang.
.main sử dụng Flexbox để tạo bố cục đa cột với phần content chính và sidebar.
.content định dạng phần chính của nội dung.
.sidebar định dạng phần sidebar.
.footer định dạng phần footer của trang.

Lưu ý rằng đây chỉ là một ví dụ cơ bản. Trong thực tế, có nhiều phương pháp và kỹ thuật để tạo bố cục trang web, bao gồm sử dụng Grid Layout, Flexbox và cả các framework như Bootstrap để tạo ra bố cục phức tạp và linh hoạt hơn.

Leave a Comment Cancel Reply