Layout trong CSS

Chắc bạn cũng khá quen thuộc với các bảng trong HTML và quen thuộc với việc tạo các Page Layout bởi sử dụng các bảng này. Nhưng bạn có biết rằng CSS cung cấp cho bạn nhiều sự điều khiển hơn tới việc xác định vị trí các phần tử trong một tài liệu. CSS là xu hướng của tương lai, và tại sao bạn ...

Chắc bạn cũng khá quen thuộc với các bảng trong HTML và quen thuộc với việc tạo các Page Layout bởi sử dụng các bảng này. Nhưng bạn có biết rằng CSS cung cấp cho bạn nhiều sự điều khiển hơn tới việc xác định vị trí các phần tử trong một tài liệu. CSS là xu hướng của tương lai, và tại sao bạn không học và sử dụng CSS để có nhiều sự lựa chọn hơn trong việc thiết kế Layout cho Webpage thay vì chỉ sử dụng bảng một cách đơn điệu?

Dưới đây là một số điểm mạnh và điểm yếu của hai công nghệ trên:

Dù thế nào đi nữa, nếu bạn quen và thích sử dụng công nghệ nào mà làm cho Webpage của bạn làm việc và được hiển thị tốt nhất thì hãy sử dụng nó.

CSS cung cấp thuộc tính table-layout giúp cho các bảng của bạn được tải nhanh hơn. Ví dụ:

<table style="table-layout:fixed;awidth:600px;">
   <tr height="30">
      <td awidth="150">Cell A</td>
      <td awidth="200">Cell B</td>
      <td awidth="250">Cell C</td>
   </tr>
</table>

Bạn sẽ nhận thấy lợi thế một cách rõ ràng với các bảng lớn. Với HTML truyền thống, trình duyệt phải tính toán mỗi ô trước khi hiển thị bảng. Trong khi đó, khi bạn thiết lập thuật toán table-layout thành fixed, thì trình duyệt sẽ chỉ cần nhìn vào hàng đầu tiên trước khi hiển thị toàn bộ bảng. Nghĩa là, bảng của bạn sẽ cần có các độ rộng cột và chiều cao hàng cố định.

Ví dụ mẫu về Column Layout trong CSS

Dưới đây là các bước đơn giản để tạo một Column Layout đơn giản trong CSS.

Thiết lập lề và padding của toàn bộ tài liệu như sau:

<style style="text/css">
    
</style>

Bây giờ, chúng ta sẽ thiết lập màu cho một cột (màu vàng) và sau đó gắn qui tắc này cho thẻ <div>:

<style style="text/css">
    
</style>

Lúc này chúng ta sẽ có một tài liệu với thân màu vàng, tiếp đó chúng ta xác định một khối khác bên trong level0.

<style style="text/css">
    
</style>

Lồng một hoặc nhiều khối vào trong level1, và tiếp đó chúng ta sẽ chỉ thay đổi màu nền cho chúng:

<style style="text/css">
    
</style>

Cuối cùng, sử dụng cùng công nghệ trên, lồng một khối tại level3 vào bên trong level2 để tạo Layout cho cột phải:

<style style="text/css">
    
</style>

Và cuối cùng source code sẽ có dạng sau:

<style style="text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id="level0">
      <div id="level1">
         <div id="level2">
            <div id="level3">
               <div id="main">
                  Noi dung can trinh bay tai day ...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

Tương tự, bạn có thể thêm một thanh điều hướng hoặc một thanh quảng cáo chẳng hạn vào phần trên cùng của trang.

Kết quả là:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

Cách sử dụng thuộc tính Float trong CSS để thiết kế Layout

Khái niệm về thuộc tính float Thuộc tính float có tác dụng đẩy phần tử sang bên trái hoặc bên phải. Đẩy sang bên trái Đẩy sang bên phải Nó thường được áp dụng vào việc thiết kế bố cục của trang web (Layout) WEB CƠ BẢN . VN HTML CSS ...

Bùi Văn Nam viết 11:04 ngày 18/08/2018

Layout trong CSS

Chắc bạn cũng khá quen thuộc với các bảng trong HTML và quen thuộc với việc tạo các Page Layout bởi sử dụng các bảng này. Nhưng bạn có biết rằng CSS cung cấp cho bạn nhiều sự điều khiển hơn tới việc xác định vị trí các phần tử trong một tài liệu. CSS là xu hướng của tương lai, và tại sao bạn ...

Hoàng Hải Đăng viết 12:21 ngày 14/08/2018

Bài 14: After và Before trong CSS

Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này ...

Hoàng Hải Đăng viết 09:53 ngày 03/08/2018

Bài 12: Position Fixed trong CSS

Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS . Đây là một thuộc tính hay sử dụng và có ...

Tạ Quốc Bảo viết 09:52 ngày 03/08/2018

Bài 15: Kỹ thuật ClearFix trong CSS

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ ...

Trịnh Tiến Mạnh viết 09:49 ngày 03/08/2018
0