First, let’s write the css code of the cupage:
Copy the codeThe code is as follows:
.cupage {
width:638px;
text-align:center;
line-height:31px;
overflow:hidden;/*The above retains some official default css code. The next line copies the Digg Style code. I have made some simplification here. The effect is the same, but the writing method is different*/
padding:3px;
margin:3px;
}
Then come the css of the current page number:
Copy the codeThe code is as follows:
.cupage strong {
/* Just copy it from I've also made a simplified place*/
border: #000099 1px solid;
padding:2px 5px;
margin:2px;
color:#fff;
background-color:#000099;
font-weight:bold;
font-size:14px;/*This sentence defines the font size and retains it from the official strong style*/
} ：
Let’s write the style of the A tag, which controls the style of the non-current page number and the previous page. The next page:
Copy the codeThe code is as follows:
.cupage a {
line-height:31px;
font-size:14px;/*The above is retained from the official css direct copy below. The style in A*/
border: #aaaadd 1px solid;
padding:2px 5px;
margin: 2px;
color: #000099;
text-decoration: none;
}
.cupage a:hover {
/*Mouse hover status Copy A:active*/
border: #000099 1px solid;
color: #000;
}
.cupage a:active {
/*Copy A:active*/
border: #000099 1px solid;
color: #000;
}
In this way, the css is finished writing, open it, delete lines 253-256, and add the above css code. The other page-turning styles are similar, please refer to the above explanation to change it slowly.
2. Modify the page paging code of the list page
If you can change the content page, it will be easy to list pages, and they are almost the same. Here we also take Digg Style as an example.
First, let’s take a look at the paging code of the list page:
Copy the codeThe code is as follows:
<div class="pages"><div class="plist">{dede:pagelist listsize='4' listitem='index pre pageno next end '/}</div></div>
After generation is:
Copy the codeThe code is as follows:
<div class="pages"><div class="plist">
<a href='#'>Home</a>
<strong>1</strong>
<a href='#'>2</a>
<a href='#'>Next page</a>
<a href='#'>Last Page</a>
</div>
</div>
It is similar to the content page. For a brief analysis, pages and plist control the style of the entire paging area, and still control the style of the current page number. Other links use the A tag, but the page here does not have
If there is a bug in the content page, the page number is on the first page, and the link on the previous page will not be displayed. I really don’t understand it. The list page is normal, but the content page has a bug. I’m convinced...
Let's write the css style below:
Copy the codeThe code is as follows:
.pages .plist{
float:left;
line-height:17px;
padding:3px;
margin:3px;
}
.pages strong {
display:block;
float:left;
border: #000099 1px solid;
padding:2px 5px;
margin:2px;
color:#fff;
background-color:#000099;
font-weight:bold;
}
.plist a {
display:block;
height:17px;
float:left;
color:#000;
border: #aaaadd 1px solid;
padding:2px 5px;
margin: 2px;
color: #000099;
text-decoration: none;
}
.plist a:hover{
border: #000099 1px solid;
color: #000;
}
.plist a:active {
border: #000099 1px solid;
color: #000;
}
Just replace the 230-298 line paging style with the above code. Be careful to replace the style redefined by the above code. Do not move other default paging styles (such as input button).
Previous page123Next pageRead the full text