Front Turtle-Pager bar

I just entered the front-end one months, the first time to share their experience, this time is a pager bar, below

This is relatively simple, but for the novice is a better harvest;

The HTML code is as follows:

1 <ulclass= "Pagination-db">2    <Li>3       <a>4          <imgsrc= "${admin_images}/admin_v3/icon_left.png">5       </a>6    </Li>7    <Li>8       <a>1</a>9    </Li>Ten    <Li> One       <a>2</a> A    </Li> -    <Li> -       <a>3</a> the    </Li> -    <Li> -       <a>4</a> -    </Li> +    <Li> -       <a> +          <imgsrc= "${admin_images}/admin_v3/icon_right.png"> A       </a> at    </Li> -    <form> -       <span>Jump to</span> -       <span><inputtype= "text"name= "page"></span> -       <span>Page</span> -    </form> in </ul>

The CSS code is as follows: No compatibility processing, interested friends can be rewritten as compatible with the major browser.

The principle is to use the Ul-li layout, to each Li set a good style, Li internal write and a tag, used for paging operation (this will not be able to study the next Oh, is to rewrite the URL, how to do to see what kind of route! ）

In terms of style, this piece of code can be used completely oh!!

Here are two pictures of the left ARROW and the right arrow, which I have given above!

1 . Pagination-db{2 Display:Inline-block;3 Padding-left:0;4 margin:20px 0;5 List-style-type:None;6 Li {7 float: Left;8 position:relative;9 width:28px;Ten Height:28px; One Margin-left:8px; A font-size:12px; - text-align:Center; - Line-height:28px; the Border:Solid 1px #dae0ee; - Border-radius:4px; - Background-color:#fff; - a { + position:relative; - Display:Block; + width:100%; A Height:100%; at Color:#404858; - text-decoration:None; - img { - position:Absolute; - Top:50%; -  Left:50%; in Transform:Translate ( -50%,-50%); -} to         } + a:hover{ - Background-color:#12bcfc; the Color:#fff; *} $     }Panax Notoginseng Li.chosen{ - Color:#fff; the a{ + Background-color:#12bcfc; A} the     } + form{ - float: Left; $ Margin-left:16px; $ Color:#404858; - font-size:12px; - Line-height:28px; the input{ - width:50px;Wuyi Height:28px; the margin:0 8px; - padding:0 8px; Wu Border-radius:4px; - Background-color:#fff; About Border:Solid 1px #dae0ee; $} -     } - }

Front Turtle-Pager bar