Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to write div li multi-row multi-column non-refresh paging code". In daily operation, I believe many people have doubts about how to write div li multi-row multi-column non-refresh paging code. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer "how to write div li multi-row multi-column non-refresh paging code". Next, please follow the editor to study!

PHP Code

The copy code is as follows:

JavaScript Code

$(document) .ready (function () {

("div.holder") .jPages ({

ContainerID: "content"

PerPage: 6

});

});

[/ code]

CSS Code

The copy code is as follows:

Body {

Text-align: left

Direction: ltr

Font-family:tahoma,verdana,arial,sans-serif

Font-size: 11px

}

.container {

Width: 370px

Height: 100%

Margin: 0 auto

}

/ *

@ @ Demo

, /

Ul {

Margin: 0

Padding: 20px 0px

}

Ul li {

List-style-type: none

Display: inline-block

Line-height: 100px

Text-align: center

Font-weight: bold

Width: 100px

Height: 100px

Margin: 10px

Background: # ccc

}

Ul li span {

Color: # fff

Padding: 3px

}

/ *

@ @ Pagination

, /

.holder {margin: 5px 0;}

.holder a {

Font-size: 12px

Cursor: pointer

Margin: 0 5px

Color: # 333

}

.holder a:hover {

Background-color: # 222

Color: # fff

}

.holder a.jp-previous {margin-right: 15px;}

.holder a.jp-next {margin-left: 15px;}

.holder a.jp-current, a.jp-current:hover {

Color: # ed4e2a

Font-weight: bold

}

.holder a.jp-disabled, a.jp-disabled:hover {color: # bbb;}

.holder a.jp-current, a.jp-current:hover

.holder a.jp-disabled, a.jp-disabled:hover {

Cursor: default

Background: none

}

.holder span {margin: 0 5px;}

At this point, the study on "how to write multi-row and multi-column non-refresh paging code for div li" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.