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

This article mainly introduces the solution to the Dedecms list pagelist page button style method, has a certain reference value, friends in need can refer to. I hope you will learn a lot after reading this article. Next, let the editor take you to learn about it.

Dedecms list pagelist page button style how to solve?

The solution of the first and last page style of the Dedecms list pagelist page flip button

Recommended study: dream weaving cms

The Dedecms list page flip button uses {dede:pagelist listitem= "index,end,pre,next,pageno" listsize= "10" /} after generating html, the first page of the list page is

Home page 1 2 3 next page last page

The last page is:

Home page previous page 1 2 3 last page

CSS stylesheet for default template:

.dede _ pages {} .dede _ pages ul {float:left; padding:12px 0px 12px 16px;} .dede _ pages ul li {float:left; font-family:Tahoma; line-height:17px; margin-right:6px; border:1px solid # E9E9E9;} .dede _ pages ul li a {float:left; padding:2px 4px 2px; color:#555; display:block;} .dede _ pages ul li a:hover {color:#690; text-decoration:none; padding:2px 4px 2px } .dede _ pages ul li.thisclass, .dede _ pages ul li.thisclass aMag.pagebox ul li.thisclass a:hover {background-color:#F8F8F8; padding:2px 4px 2px; font-weight:bold;}

You can see that both ".dede _ pages ul li a" and ".dede _ pages ul li.thisclass" have padding:2px 4px 2px; the attribute but ".dede _ pages ul li" does not. Think about how ugly it is that there is no padding:2px 4px 2px in ".dede _ pages ul li"; the first and last buttons will be smaller than the other buttons when the property is.

Here are two solutions to the above problems

The first method is solved through CSS. The solution is not to control the a tag to only add styles to li, as shown in the following code:

.dede _ pages ul {} .dede _ pages ul li {float:left; height:18px; line-height:18px; padding:4px 10px; margin-right:5px; border:1px # b9cdff solid;} .dede _ pages .thisclass {background:#e3ebfe;}

You can see that the code is very concise, but not very good for the user experience, because the current button is shown by li rather than a, so that when the user clicks on the button but does not click on the text, it is equal to not clicking on the text. We need another solution for a better user experience.

The second method modifies the related file arc.listview.class.php of dede:pagelist under the include folder:

Open arc.listview.class.php and find the following code:

/ get the link between the previous page and the home page if ($this- > PageNo! = 1) {$prepage.= "previous page rn"; $indexpage= "home page rn";} else {$indexpage= "home page rn" } / / next page, unpaged link if ($this- > PageNottings created rn page & & $totalpage > 1) {$nextpage.= "next page rn"; $endpage= "last page rn";} else {$endpage= "last page rn";}

Modify $indexpage= "home page rn"; $endpage= "last page rn"; $indexpage= "home page rn"; $endpage= "last page rn"; after modification, the html code generated by {dede:pagelist listitem= "index,end,pre,next,pageno" listsize= "10" /} is as follows:

Home page 1 2 3 next page last page

The second method is simpler and increases user experience.

PS: using the second method eliminates the need to modify the CSS file.

Thank you for reading this article carefully. I hope the editor will share the method of solving the Dedecms list pagelist page turn button style to help everyone. At the same time, I also hope that you will support more, pay attention to the industry information channel, and find out if you encounter problems. Detailed solutions are waiting for you to learn!

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.