Tạo các phần Header, Cột trái phải và footer bằng kỹ thuật DIV + CSS

Hôm nay mình sẽ hướng dẫn các bạn tạo cho Website một bố cục thế này, bạn có thể dùng để code PHP, tạo thêm một chút hứng với với những Output chán ngắt của PHP

Bạn tạo một file html. Ví dụ index.html với nội dụng như sau:

HTML Code:

<link rel="stylesheet" type="text/css" href="style.css" medial="all" />
<div id='main'>
<div id='header'>Banner</div>
<div id='left_col'> Cot Trai</div>
<div id='right_col'> Cot phai </div>
<div id='center' name='clear'> Khung o giua </div>
<div id='footer'>Footer</div>

</div>

Và một file style.css nội dung như sau:

Code:

body {font-weight: bold;text-align: center;margin: 0px;
}
#main {width: 900px;
}

#header{background: #FFFFC0;height: 90px;font-weight: bold;
}
#left_col{background: #c0c0c0;float: left;width: 20%;height: 500px;font-weight: bold;
}
#right_col{background: #c0c0c0;float: right;width: 20%;height: 500px;font-weight: bold;
}
#center{height: 500px;
}
#footer{
background: #FFFFC0;}

.clear{
    clear:both;
}  

________________________________________________

Giải thích
Ví dụ ở file index.html ta có thẻ:

HTML Code:

<div id='left_col'></div>

Ở đây id='left_col" là tên của thẻ này. Nhằm mục đích, ta sử dụng CSS để tạo giao diện cho thẻ này ( Có thể chưa hiểu bạn hãy xem tiếp )

Code:

#left_col{
 background: #c0c0c0;
 float: left;
 width: 20%;
 height: 500px;
 font-weight: bold;
 }  

Do ở file index.html ta khai báo là id='left_col' nên ở file CSS trước tên left_col ta thêm dấu # vào. => #left_col

Toàn bộ thuộc tính ( màu nền, độ rộng, kiều chữ ..v..v. ) sẽ dc đặt trong { }

Ta có được #left_col { ở đây là các thuộc tính }
DO trong file CSS ta đặt #left_col { }. vậy nếu file index.html có id='left_col' thì nó sẽ có các thuộc tính mà ta đã cài trong thể #left_col { } ở CSS.

Code:

#left_col{
 background: #c0c0c0;  // Màu nền
 float: left; // Đặt làm cột trái
 width: 20%;  // Độ rộng 20% 
 height: 500px;  // Chiều cao
 font-weight: bold; // Kiểu chữ im dậm   ( Bold ) 
 }

DEMO: http://kynangmem.ucoz.com/test-code/index.html