Graphiclancer.com

   Xin chào!
Tôi là Vũ Quang Cường. Hiện tôi đang làm việc và nghiên cứu thiết kế Website. Đây là blog của tôi, nơi tôi có thể chia sẻ với các bạn về công việc, cuộc sống và những niềm đam mê.
Contact: YM: vuquangcuong | Skype: vuquangcuong | Mobile: 0912.580018                                                                                                                                                             More about me   
Tạo một CSS layout từ một bản thiết kế - phần 8

08 Ở phần trước chúng ta đã có được phần nội dung của cột bên phải và đưa phần nội dung đó nằm ở vị trí mình muốn. Trong phần này chúng ta sẽ bắt đầu làm đến phần Header. Đây có thể coi là phần quan trọng tạo nên phong cách của cả website. Nếu làm tốt phần này thì giao diện của website nhìn sẽ rất bắt mắt.

Trước tiên ta tách phần logo và phần header thành 2 bức ảnh khác nhau.

{mosimage} Và logo được cắt riêng.


Để đưa logo vào ta thêm đọan code sau vào file Html 

   <div id="header">
    <h1><img src="/images/general/logo_enlighten.gif" 
    width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
   </div>

Sau đó là ảnh của header được load làm background của div Header 

 #header {
  height: 150px;
  background: url(../images/headers/about.jpg) #db6d16;
}

Bây giờ ta sẽ thấy vị trí của logo nằm ở gốc tọa độ trên cùng bên trái. Nhưng ta lại muốn đưa logo vào vị trí mà ta đã định trước là nămg trong ô màu đen trên header. Vì vậy ta dùng Css để điều chỉnh vị trí của logo. Vì thế ta sửa 1 chút trong file Css 

h1 {
   margin: 0;
   padding: 0;
   float: right;
   margin-top: 57px;
   padding-right: 31px;
}

Bây giờ giao diện trông đã giống hệt với thiết kế ban đầu, phần tới ta sẽ làm đến Footer và hệ thống menu.

Comments (12)Add Comment
..., Sao minh ko lam duoc phan load background nay ban o
August 21, 2008     
..., @ngoctrinh: Bạn đã có cái ảnh abou.jpg tron
August 29, 2008     
..., Thank bạn rất nhiều, mình đang chờ bài v
October 23, 2008     
..., cam on ban!!! ban viet cua ban rat bo ich doi voi
January 21, 2009     
..., Cảm ơn vì sự chia sẻ của bạn...những
March 18, 2009     
..., Đang đợi loạt bài cuối, những bài
March 27, 2009     
..., trời ơi thật là thần diệu giờ em mới
July 28, 2009     
..., loạt bài viết hay quá, hi vọng bạn có th
July 29, 2009     
..., Đọc 1 mạch các bài viết, thật là quá h
September 13, 2010     
..., Cảm Ơn Bạn
December 11, 2010     
..., Bài viết của anh hay quá!!! Anh viết nốt
July 29, 2011     
..., cam on anh bai viet hay lắm
May 26, 2012     

Write comment
smaller | bigger

busy