Viết CSS Wordpress cho giao diện Table

Thứ Bảy, 11 tháng 4, 2015

Ở bài trước chúng ta đã làm xong Viết CSS cho giao diện mobile đến bài này mình sẽ hướng dẫn các bạn viết CSS cho Tablet.

Ở đây mình xét 2 loại thiết bị đó là Small Tablet (600×800) và Tablet (ipad 2, 3, mini) (768×1024).

Đối với Small Tablet ta không có chỉnh sửa gì vì với kích thước chiều ngang như thế không thể đổ sidebar lên được, ta sẽ tiến hành viết css cho Tablet, trước tiên tạo file tablet.less trong thư mục css (nhớ vào prepros để Fresh project lại nhé các bạn).

Các bạn viết CSS vào trong đoạn code sau:

1

2

3

@media screen and (min-width: 768px) {

    /* Viết code CSS tại đây */

}

Phần header ta vẫn giữ nguyên, ta bắt đầu xử lý phần Wrapper ở giao diện Tablet ta sẽ chia phần này thành 2 phần đó là danh sách các bài viết mới và sidebar.

Sau đây là đoạn code css cho phần Wrapper và Footer:

@media screen and (min-width: 768px) {

    /* Viết code CSS tại đây */

    #wrapper{

        .main-content{

            width: 69%;

            float: left;

            .featured_cont{

                width: 48%;

                float: left;

            }

            .posts{

                clear: both;

            }

        }

        .sidebar{

            width: 29%;

            float: right;

            margin: 6px;

            .sidebar-item{

                margin-bottom: 4px;

                box-shadow: 3px 3px 3px #dcdcdc;

            }

        }

    }

    #footer{

        clear: both;

    }

}

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.
Ở bài viết sau mình sẽ hướng dẫn các bạn viết phần cuối đó là viết phần css cho giao diện Desktop với menu đa cấp xổ xuống.
Thiết kế Website chuẩn SEO