Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Kết quả Đạt được sau bài học này

Thiết kế được bố cục (layout) của một trang web theo ý thích.
Vận dụng được thẻ div và thuộc tính float: left; float: right; theo ý mình.
Hiểu được kỹ thuật sử dụng điểm ngắt .clearfix thường sử dụng trong thiết kế web.

Chương 5-Bài 10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 22/2/2025, 12:18

Lượt xem: 555

Diễn giải trực quan

Thực hành

Code HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Nền tảng,HTML,CSS,XML,JavaScript, Lập trình C#, Lập trình, Web, Kiến thức, Đồ án">
  <meta name="author" content="Dương Nguyễn Phú Cường">
  <meta name="description"
    content="Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, ...">
  <title>Thiết kế bố cục layout trang web bằng thẻ div, css float và kỹ thuật sử dụng điểm ngắt clearfix | NenTang.vn</title>

  <link href="app.css" type="text/css" rel="stylesheet" />
</head>
<body>

  <div class="container">
    <!-- Header start -->
    <div class="div-1">
      DIV 1
    </div>
    <div class="div-2">
      DIV 2
    </div>
    <div class="div-3">
      DIV 3
    </div>
    <!-- Header end -->

    <div class="clear-fix"></div><!-- Điểm ngắt xóa bỏ float -->

    <!-- Menu start -->
    <div class="div-4">
      DIV 4
    </div>
    <!-- Menu end -->

    <div class="clear-fix"></div><!-- Điểm ngắt xóa bỏ float -->

    <!-- Content start -->
    <div class="div-5">
      DIV 5
    </div>
    <div class="div-6">
      DIV 6
    </div>
    <!-- Content end -->

    <div class="clear-fix"></div><!-- Điểm ngắt xóa bỏ float -->

    <!-- Footer start -->
    <div class="div-7">
      DIV 7
    </div>
    <div class="div-8">
      DIV 8
    </div>
    <!-- Footer end -->

    <div class="clear-fix"></div><!-- Điểm ngắt xóa bỏ float -->
  </div>

</body>
</html>

Code CSS

.container {
    width: 900px;
    border: 1px solid red;
    margin: 20px auto;
}
.div-1 {
    background: #FFE6CC;
    width: 300px;
    height: 150px;
    text-align: center;
    float: left;
}
.div-2 {
    background: #DAE8FC;
    width: 300px;
    height: 150px;
    float: left;
}
.div-3 {
    background: #D5E8D4;
    width: 300px;
    height: 150px;
    float: left;
}
.div-4 {
    background: #E1D5E7;
    width: 900px;
    height: 80px;
}
.div-5 {
    background: #D8007350;
    width: 300px;
    height: 300px;
    float: left;
}
.div-6 {
    background: #1BA1E260;
    width: 600px;
    height: 300px;
    float: left;
}
.div-7 {
    background: #A2002560;
    width: 450px;
    height: 120px;
    float: left;
}
.div-8 {
    background: #F0A30A60;
    width: 450px;
    height: 120px;
    float: left;
}
.clear-fix {
    clear:both;
}

Kiểm tra kiến thức trong bài học này ?!

Kỹ thuật sử dụng điểm ngắt .clear-fix thường sử dụng trong thiết kế web là gì? Khi nào thì áp dụng vào trang web?
Có tự mình thiết kế được bố cục (layout) trang web theo ý thích hay chưa?

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Nền tảng các kiến thức học tập

Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.

Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!

Khám phá, trải nghiệm ngay

Kết quả Đạt được sau bài học này

Chương 5-Bài 10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix

Diễn giải trực quan

Thực hành

Code HTML

Code CSS

Kiểm tra kiến thức trong bài học này ?!

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Kết quả Đạt được sau bài học này

Chương 5-Bài 10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix

Diễn giải trực quan

Thực hành

Code HTML

Code CSS

Kiểm tra kiến thức trong bài học này ?!

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập