个人觉得有列表排序挺好看的,就弄了一个

首先先把HTML写好,然后直接嵌入就ok了。以下是html全部代码。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>页面</title>
        <style type="text/css">
            .pagepp {
                width: 620px;
                height: 150px;
                margin: 10px auto;
                position: relative;
                overflow: hidden;
            }

            .pageibg {
                transition: filter 1s;
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
            }

            .pageibg:hover {
                filter: blur(4px);
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                transform: scale(1.1);
            }

            .content {
                text-align: center;
                margin: -100px 0;
                position: relative;
            }

            .content a {
                display: inline-block;
                padding: 6px 12px;
                border-radius: 4px;
                font-size: 28px;
                width: 30%;
                color: #2fafff;
                border: 3px solid #fff;
                text-decoration: none;
                background: #fff;
                opacity: 0.8;
                overflow: hidden;
                white-space: nowrap;
            }

            .content-a:hover {
                background-color: hsla(0, 100%, 35.9%, 0.2);
                color: #fff;/*firebrick*/
                border-color: hsla(0, 100%, 35.9%, 0.2);
                transition: 1s;
            }

            .pageibg {
                height: 150px;
                width: 100%;
                background-repeat: no-repeat !important;
                background-position: center !important;
                background-size: cover !important;
            }

            #pagei div:nth-of-type(1) div.ibgm {
                background: #fff url("https://images.llnico.com/usr/uploads/2019/05/4234390180.jpg");/*第一项背景图*/
            }

            #pagei div:nth-of-type(2) div.ibgm {
                background: #fff url("https://images.llnico.com/usr/uploads/2019/05/3447607559.jpg");/*第二项背景图*/
            }
        </style>
    </head>
    <body>
        <div id="pagei">

            <div class="pagepp">
                <div class="pageibg ibgm"></div>
                <div class="content">
                    <a target="_blank" href="https://www.llnico.com/acg.html" class="content-a">关于</a>
                </div>
            </div>

            <div class="pagepp">
                <div class="pageibg ibgm"></div>
                <div class="content">
                    <a target="_blank" href="https://www.llnico.com/acg.html" class="content-a">关于</a>
                </div>
            </div>

        </div>
    </body>
</html>

以上css里的背景图,你想要多少项页面有背景图就复制就好了,记得序号要写。

#pagei div:nth-of-type(1) div.ibgm {
                background: #fff url("https://images.llnico.com/usr/uploads/2019/05/4234390180.jpg");/*第一项背景图*/
            }

html写好了后,建立个PHP文件,名称随意。把以下代码写进去就ok了。把HTML里的css写进css文件。

<?php
/**
* 页面列表
*
* @package custom
*/
 ?>
<!-- 这里引入头部php,自己写 -->
<div id="main">
<article class="post">
<h1><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>

<div id="pagei">
<?php $this->widget('Widget_Contents_Page_List')->parse('
            <div class="pagepp">
                <div class="pageibg ibgm"></div>
                <div class="content">
                    <a href="{permalink}" class="content-a">{title}</a>
                </div>
            </div>    
        '); ?>
</div>
</article>
</div>
<!-- 这里引入底部php,自己写 -->

以下是预览图
page.png

鼠标滑过预览图
171047.png

代码不高级,很简单。