Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Hướng dẫn phân trang bằng HTML và CSS

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi tongnh89931, 23/3/15.

Lượt xem: 11,682

  1. tongnh89931 Banned

    Phân trang là thủ thuật được sử dụng bởi rất nhiều trang web và là tính năng cũng rất quan trọng. Đặc biệt với những trang web có nhiều nội dung cần hiển thị thì phân trang là phần không … Hôm nay Zonotek và các bạn cùng nhau tìm hiểu về phân trang bằng HTMLCSS nhé !
    Dưới đây là một số phong cách thiết kế phân trang mà theo mình nghĩ là đẹp và chuyên nghiệp. Các bạn có thể tham khảo và áp dụng vào các dự án thiết kế web sau này.
    1.Pagination Flickr
    Hình ảnh mà bạn muốn thiết kế một phong cách phân trang Flickr trông như thế này.
    [​IMG]
    Mã HTLM
    Code:
    <ul id="pagination-flickr">
       <li class="previous-off">«Previous</li>
       <li class="active">1</li>
       <li><a href="?page=2">2</a></li>
       <li><a href="?page=3">3</a></li>
       <li><a href="?page=4">4</a></li>
       <li><a href="?page=5">5</a></li>
       <li><a href="?page=6">6</a></li>
       <li><a href="?page=7">7</a></li>
       <li class="next"><a href="?page=2">Next »</a></li>
    </ul>
    CSS
    Code:
    ul{border:0; margin:0; padding:0;}
     
    #pagination-flickr li{
    border:0; margin:0; padding:0;
    font-size:11px;
    list-style:none;
    }
     
    #pagination-flickr a{
    border:solid 1px #DDDDDD;
    margin-right:2px;
    }
     
    #pagination-flickr .previous-off,
    #pagination-flickr .next-off{
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
    }
     
    #pagination-flickr .next a,
    #pagination-flickr .previous a{
    font-weight:bold;
    border:solid 1px #FFFFFF;
    }
     
    #pagination-flickr .active{
    color:#ff0084;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
    }
     
    #pagination-flickr a:link,
    #pagination-flickr a:visited{
    color:#0063e3;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
    }
     
    #pagination-flickr a:hover{
    border:solid 1px #666666;
    }
    2.Pagination Digg
    Còn bây giờ bạn muốn thiết kế một phong cách phân trang Digg thì nó sẽ trông như hình phía dưới.
    [​IMG]
    HTML
    Code:
    <ul id="pagination-digg">
       <li class="previous-off">«Previous</li>
       <li class="active">1</li>
       <li><a href="?page=2">2</a></li>
       <li><a href="?page=3">3</a></li>
       <li><a href="?page=4">4</a></li>
       <li><a href="?page=5">5</a></li>
       <li><a href="?page=6">6</a></li>
       <li><a href="?page=7">7</a></li>
       <li class="next"><a href="?page=2">Next »</a></li>
    </ul>
    CSS
    Code:
    ul{border:0; margin:0; padding:0;}
     
    #pagination-digg li{
    border:0; margin:0; padding:0;
    font-size:11px;
    list-style:none;
    margin-right:2px;
    }
     
    #pagination-digg a{
    border:solid 1px #9aafe5
    margin-right:2px;
    }
     
    #pagination-digg .previous-off,
    #pagination-digg .next-off{
    border:solid 1px #DEDEDE
    color:#888888
    display:block;
    float:left;
    font-weight:bold;
    margin-right:2px;
    padding:3px 4px;
    }
     
    #pagination-digg .next a,
    #pagination-digg .previous a{
    font-weight:bold;
    }
     
    #pagination-digg .active{
    background:#2e6ab1;
    color:#FFFFFF;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
    }
     
    #pagination-digg a:link,
    #pagination-digg a:visited{
    color:#0e509e
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
    }
     
    #pagination-digg a:hover{
    border:solid 1px #0e509e
    }
    3.Pagination Clean
    Nếu bạn muốn tối thiểu, thiết kế giống ví dụ này cho thấy làm thế nào để thiết kế một phong cách phân trang rất sạch sẽ trông như thế này.
    [​IMG]
    HTML
    Code:
    <ul id="pagination-clean">
       <li class="previous-off">«Previous</li>
       <li class="active">1</li>
       <li><a href="?page=2">2</a></li>
       <li><a href="?page=3">3</a></li>
       <li><a href="?page=4">4</a></li>
       <li><a href="?page=5">5</a></li>
       <li><a href="?page=6">6</a></li>
       <li><a href="?page=7">7</a></li>
       <li class="next"><a href="?page=2">Next »</a></li>
    </ul>
    CSS
    Code:
    ul{border:0; margin:0; padding:0;}
     
    #pagination-clean li{
    border:0; margin:0; padding:0;
    font-size:11px;
    list-style:none;
    }
     
    #pagination-clean li, #pagination-clean a{
    border:solid 1px #DEDEDE
    margin-right:2px;
    }
     
    #pagination-clean .previous-off,
    #pagination-clean .next-off{
    color:#888888
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
    }
     
    #pagination-clean .next a,
    #pagination-clean .previous a{
    font-weight:bold;
    border:solid 1px #FFFFFF;
    }
     
    #pagination-clean .active{
    color:#00000
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
    }
     
    #pagination-clean a:link,
    #pagination-clean a:visited{
    color:#0033CC
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
    }
     
    #pagination-clean a:hover{
    text-decoration:none;
    }
    Chúc các bạn thành công nhé !
    Nguồn từ trang : zonotek.vn

    ...
    Phạm Hữu Dư thích bài viết này
  2. nguyenhoang_it

    nguyenhoang_it Thành viên cấp 1

    Bài viết hay.
  3. minhtamht

    minhtamht Banned

    bài viết hay vậy sao lại bị baned nick nhỉ
  4. curaqua

    curaqua Mới đăng kí

    Phần hình ảnh bị mất nên đọc mà vẫn chưa tưởng tượn nó ra thế nào

Ủng hộ diễn đàn