Ví Dụ Về Phân Chia Cột Trong Trong Web Với Css

Ví Dụ Về Phân Chia Cột Trong Trang web với float

Để xây dựng giao diện ở trên chúng ta sẽ sử dụng thẻ div để chia, và code html như sau:

  <div class="container">
        <div class="header">header</div>
<div class="trai">trai</div>
<div class="main">main</div>
<div class="phai">phai</div>
<div class="footer">footer</div>
  

  </div>

Trong Đó:

• container là phần tử mẹ, nó sẽ bao bọc toàn bộ giao diện của mình.
• header sẽ là phần chứa nội dung header như hình trên.
• trai sẽ là cột bên trái như hình trên.
• main sẽ là cột chính giữa như trên.
• phai là cột bên phải của giao diện.
• footer là phần cuối cùng của website như hình.

Code Phần Css Như sau:

*{

margin:0;

padding:0;

}

 thiết lập chiều rộng cho container

.container{

width:1000px;

height:auto;

border:1px solid #000000;

margin:auto;

text-transform:uppercase;

text-indent:20px;

color:#FFFFFF;

text-align:center;

}

Thiết lập chiều rộng  và chiều cao cho header, footer và cho ba cột trai, main và phai

.header{

width:100%;

height:100px;

background:#0000FF;

}

.trai{

width:200px;

height:500px;

background:#993300;

float:left;

}

.main{

width:500px;

height:500px;

background:#99CC00;

float:left;

}

.phai{

width:300px;

height:500px;

background:#CC0099;

float:right;

}

.footer{

width:100%;

height:30px;

background:#000000;

clear:both;

}

css HTML July 02, 2018