CodeGym/Các khóa học/Frontend SELF VI/Tạo giao diện phức tạp

Tạo giao diện phức tạp

Có sẵn

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ụ:

CSS
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;
}
HTML
<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ụ:

CSS
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;
}
HTML
<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ụ:

CSS
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;
}
HTML
<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>
1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Bố cục hai cột
Bố cục hai cột
1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Trang web một trang
Trang web một trang
Bình luận
  • Phổ biến
  • Mới
Bạn phải đăng nhập để đăng nhận xet
Trang này chưa có bất kỳ bình luận nào