Tạo một CSS layout từ một bản thiết kế

Tạo một CSS layout từ một bản thiết kế - phần 3

Phần 3 chúng ta sẽ đưa các thành phần cơ bản của website như Header, Main Navigation... vào file index.html ở dạng thẻ Div.

03 Chèn thẻ Div vào giữa body và đặt cho nó id="page-container" . Nội dung thẻ Div là dòng chữ "Hello World"



 <body>

  <div id="page-container">
   Hello world.
  </div>

 </body>

Tạo một file mới, đặt tên master.css và save trong thư mục css. Trong file này ta bắt đầu gán cho thẻ Div id="page-container" định dạng CSS. Lưu ý khi ta dùng ID, có nghĩa là duy nhất cái div đấy tồn tại và có định dạng CSS cho div ID thì phải bắt đầu bằng dấu "#". Còn trong trường hợp đặt thẻ div thuộc 1 class thì trong css sẽ bắt đầu bằng dấu "." ví dụ: .page-container {}

 #page-container {

 }

Bây giờ ta bắt đầu dùng các thuộc tính của CSS để style cho thẻ div

 #page-container {
    background: red;
    width: 760px;
    margin: 0;
 }

Với những thuộc tính trên, ta có thể thấy dễ dàng thẻ div được CSS quy định background màu đỏ. rộng 760px và khoảng cách của cái div đấy tới các div thành phần khác = 0px. Bây giờ bạn có thể thấy trên web browser dòng chữ Hello World trên nền màu đỏ rộng 760px. Tuy nhiên nó sẽ bị cách mép trên cùng của trình duyệt một khoảng 8px. Vì vậy ta phải quy định cho thẻ body thuộc tính margin: 0 cho thẻ body.

 html, body {
    margin: 0;
    padding: 0;
 }

Giờ nó đã trở về gốc tọc độ 0:0 tính theo góc trên cùng bên trái trình duyệt. Tương tự như vậy ta bắt đầu thêm các div khác chứa nội dung của các thành phần còn lại. Bỏ dòng chữ "Hello World" đi và thay vào

  <div id="page-container">

  <div id="main-nav">Main Nav</div>
	
  <div id="header">Header</div>
	
  <div id="sidebar-a">Sidebar A</div>
	
  <div id="content">Content</div>
	
  <div id="footer">Footer</div>

  </div>

Bây giờ sản phẩm của chúng ta sẽ có kết quả như thế này. Phần tiếp theo ta sẽ đặt thuộc tính CSS cho từng cái Div để chúng nằm đúng vị trí như thiết kế ban đầu. Tất nhiên là ta sẽ cho nằm đúng vị trí chính xác 100% theo như thiết kế. {mosimage}

Set as favorite

Bookmark

Comments (14) Add Comment