khiemsound
Posts : 1016
Points : 26435
Join date : 2012-03-27
 | | Subject: HTML5 và CSS3 – Công nghệ thiết kế website trong tương lai – Phần 6 Wed May 23, 2012 9:12 am | |
| HTML5 và CSS3 – Công nghệ thiết kế website trong tương lai – Phần 6 HTML5 và CSS3 – Công nghệ thiết kế website trong tương lai – Phần 6 Định nghĩa phần content và sidebar Phần content và siderbar trong cấu trúc trang html5 được căn chỉnh khác nhau trên từng phần khác nhau. Theo các cách định nghĩa thông thường chúng ta thường sử dụng thuộc tính “float” để căn chỉnh, tuy nhiên với CSS3 chúng ta có thể sử dụng theo kiểu “table” Table là gì? chẳng phải là thẻ định nghĩa 1 bảng sao? Bạn có thể băn khoăn và đặt ra câu hỏi như vậy, và có thể bạn đã biết tới “table” trong thiết kế các giao diện trước kia. Tuy nhiên trong CSS3 chúng ta có thể tạo các phần tử có cấu trúc tương tự “table” mà ta đã biết nhưng không phải sử dụng thẻ "table". Để bắt đầu , chúng ta cần một vài thẻ để tạo ra một section Tất cả mọi thứ chúng ta tạo ra vẫn chưa được định nghĩa và bây giờ chúng ta sẽ định nghĩa cho nó. Chúng ta muốn có cấu trúc giống như một “table” với “mainContent” và “aside” là các ô trong bảng. Như những gì bạn được biết trước đây về “table” thì điều này là “không thể” phải không? Bởi “table” được định nghĩa cụ thể không thẻ tùy chỉnh theo ý muốn được, nhưng với CSS3 thì điều này lại là một điều cực kỳ dễ dàng.
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
Sau khi xem xong cách định nghĩa này bạn có thể hiểu tại sao tôi lại nói nó thật sự dễ dàng phải không?
Đó là tất cả, không cần tới “float” không cần tới “column” không cần tới “background-image”, clear, hay collapsing margin, chúng ta vẫn có thể tạo ra các phần tử có cấu trúc tương tự “table”. Tới đây chắc hẳn các bạn sẽ có thể thốt lên rằng “ôi! Tạo một layout thật dễ dàng phải không?”
bạn có thể tham khảo thêm các phần khác tại đây! | |
|
