|
04Trong phần này ta bắt đầu gán các thuộc tính của CSS cho từng div để có được những thông số cơ bản như màu nền, chiều cao, float ...
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
|
|
05Ở phần trước chúng ta đã đưa nội cung vào content và bị vấn đề là phần text bị tràn qua cột bên phải . Sau đây ta sẽ tìm hiểu nguyên nhân tại sao và làm thể nào để fix nó.
Nguyên nhân ở đây là ta mới chỉ quy định cho div content kích thước chiều ngang. Đến đây ta làm một phép tính đơn giản 760px chiều rộng của toàn bộ div page-container - đi 280px chiều rộng của div Sidebar, như vậy còn 480px. Ta cũng đã thiết lập chiều rộng của div container là 480px, như vậy bây giờ ta chỉ cần đặt thuộc tính margin để div container nằm cách đường biên phải 1 khoảng 280px
|
|
06 Phần này chúng ta sẽ đưa vào layout một số thành phần chính, tiêu biểu và có ở hầu hết các website
-
Navigation Links
-
Heading
-
Content
-
Footer infomation
Chúng ta sẽ bắt đầu bằng việc tạo 1 class tên là hidden. Bạn nên đặt class này ở phần đầu của file Css, sau thẻ body.
.hidden {
display: none;
}
|
