Cắt layout photoshop sử dụng CSS (p6)

Tiếp theo trong phần 6 này chúng ta sẽ cắt CSS cho phần right-sidebar. Giao diện của right-sidebar có giao diện như sau:

Phần background bo tròn 2 góc phía trên của mục New products và support online giống như phần background của Category bên left-sidebar nên chúng ta sẽ không cắt lại nữa mà sẽ dùng lại file cũ đã cắt xong. Chúng ta chỉ cần cắt ra những file ảnh sau đây:

Việc còn lại chỉ là viết CSS cho phần này. Chúng ta thêm vào trong file template.css và template.html những đoạn code sau:

Thêm vào file template.css đạon code sau:

(nhấp chuột vào ngay file ảnh trên để xem full size)

Thêm vào file template.html đoạn code sau:

Trở về trang chủ Trở về trang mục lục Top