src/main/resources/templates/page/menu.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" th:href="@{layuimini/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{layuimini/css/public.css}" media="all">
<style type="text/css">
    .box ul li{
        width:160px;
        height:240px;
        list-style:none;
        position:relative;
        float:left;
        margin-left:20px;
        margin-bottom:20px;
        overflow:hidden;
    }
    .box  h2{
        font-size:18px;
        color:#fff;
        text-align:center;
        padding-top:30px;
    }
    .box ul li .deatil {
        width: 160px;
        height: 240px;
        background: rgba(0, 0, 0, 0.7);
        position: absolute;
        top: -240px;
        -webkit-transition: all 0.3s ease;
    <!-- 适应ie，谷歌，苹果浏览器内核-- > -o-transition: all 0.3 s ease;
    <!-- 适应Opera浏览器内核-- > -moz-transition: all 0.3 s ease;
    <!-- 火狐浏览器-- > -ms-transition: all 0.3 s ease;
    <!-- 微软-- >
    }


    .box ul li .deatil a{
        font-size:15px;
        display:block;
        color:#fff;
        background-color:#F00;
        text-decoration:none;
        width:100px;
        height:40px;
        text-align:center;
        line-height:40px;
        margin:0 auto;
    }
    .box ul li:hover .deatil{
        top:0;
    }
</style>
</head>
<body>
<div class="layuimini-container">
    <div id="mydiv" class="layuimini-main" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">