Hello các bạn, cũng đã lâu Blog mình không đăng bài vì bận tối ưu cho template. Trong quá trình tối ưu và chỉnh sửa lại giao diện thì mình phát hiện trong phần bố cục của template mình rất bừa bộn =)) Vì thế mình đã khắc phục nó bằng 1 thủ thuật nho nhỏ, thủ thuật này sẽ được mình share trong bài này.
Thủ thuật rất đơn giản là chúng ta chỉ cần dùng 1 chút CSS mà thôi. Đặc biệt hơn là chúng ta chỉ việc thêm #layoutvà trước css của ID/Class mà chúng ta cần căn chỉnh.
Ví dụ: trong bài viết trước mình có tạo ra class là bocuc-vanthang để hiển thị tên trang web trên trang chủ. thì giờ mình chỉ việc thêm #layout và trước .bocuc-vanthang để căn chỉnh nó trong phần bố cục. Như vậy, ta sẽ được một cái mới là #layout .bocuc-vanthang.
Bây giờ chúng ta làm thử làm nhé:
Sau khi hoàn thành chúng ta sẽ được bố cục gọn gàng như dưới. ( Ảnh chỉ là demo. Bạn phải thêm css khác tùy theo template nhé )
Chúc bạn thành công. Hãy share nếu thấy hay để giúp Blog nhé !
Thủ thuật rất đơn giản là chúng ta chỉ cần dùng 1 chút CSS mà thôi. Đặc biệt hơn là chúng ta chỉ việc thêm #layoutvà trước css của ID/Class mà chúng ta cần căn chỉnh.
Ví dụ: trong bài viết trước mình có tạo ra class là bocuc-vanthang để hiển thị tên trang web trên trang chủ. thì giờ mình chỉ việc thêm #layout và trước .bocuc-vanthang để căn chỉnh nó trong phần bố cục. Như vậy, ta sẽ được một cái mới là #layout .bocuc-vanthang.
Bây giờ chúng ta làm thử làm nhé:
#layout .bocuc-vanthang {
width: 30%;
float: left;
}
#layout .bocucbenphai-vanthang {
width: 70%;
float: right;
}
Sau khi hoàn thành chúng ta sẽ được bố cục gọn gàng như dưới. ( Ảnh chỉ là demo. Bạn phải thêm css khác tùy theo template nhé )
Chúc bạn thành công. Hãy share nếu thấy hay để giúp Blog nhé !
0 nhận xét: