实体类

Card类

package com.niit.quickStart.bean;

import lombok.Data;

@Data
public class Card {
    private String avatar;
    private String name;
    private String time;
    private String title;
    private String introduce;
    private  String picture;
    private String number1;
    private String number2;


    public Card(String avatar, String name, String time, String title, String introduce, String picture, String number1, String number2) {
        this.avatar = avatar;
        this.name = name;
        this.time = time;
        this.title = title;
        this.introduce = introduce;
        this.picture = picture;
        this.number1 = number1;
        this.number2 = number2;
    }
}

Card2类

package com.niit.quickStart.bean;

import lombok.Data;

@Data
public class Card2 {
    private String pic;
    private String title;
    private String text;
    private String number;

    public Card2(String pic, String title, String text, String number) {
        this.pic = pic;
        this.title = title;
        this.text = text;
        this.number = number;
    }
}

Matrix类

package com.niit.quickStart.bean;

import lombok.Data;
import org.springframework.context.annotation.Configuration;

@Data
@Configuration
public class Matrix {
    private String info;
    private String matrix;
    private String login;
    private String info1;
    private String info2;
}

DAO类

CardDAO类

package com.niit.quickStart.DAO;

import com.niit.quickStart.bean.Card;
import com.niit.quickStart.bean.Card2;
import lombok.Data;
import org.springframework.context.annotation.Configuration;

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.List;

@Configuration
@Data
public class CardDAO {
    public List<Card> getCards(){
            Card[] cards={
            new Card("12.png","Hover","21分钟之前", "通过 RSSHub 订阅不支持 RSS 的网站","前言 就我个人而言，无法割舍 RSS 的原因最重要的是以下两点： 没有遗漏地收取信息——像少数派首页新的文章、教务系统新的通知等，都是我不希望有所遗漏的信息。 集中地收取信息——我是个很怕麻烦的的...","19.png","1","5"),
            new Card("13.png","Zihan Gu","一天之前", "手机运行卡顿？把流氓软件“冻”起来吧！——冰箱 IceBox","在我们安装一些常驻后台的应用后，我们的手机可能运行速度会变慢，而且这些应用一般都是开机自启的。这些应用在后台可能会消耗流量、推送通知、占用内存。也有少部分人认为，一个 App 只应该去做一件事，不需要...","20.png","3","0"),
            new Card("14.png","瘦子说","34分钟之前", "坚果Pro 2S，似乎不是多了一个S那么简单","前言：8月份锤子科技推出了坚果手机的新品：坚果Pro 2S。多了一个“S”，给我们的感觉是对于上一代坚果Pro 2的一个迭代升级罢了。只不过上手之后，给我的感觉似乎它并不是简单的升级，而更多的是一个肩...,","21.png","1","1"),
             new Card("15.png","熊猫小A","29分钟之前", "使用 Workflow 给 GIF 加上进度条","本文也发布于我的个人博客：使用 Workflow 给 GIF 加上进度条 - 熊猫小A的博客看到一张 GIF：……不知道有多少人被这样的段子套路过，反正我是中招过很多次。一切都是因为 GIF 是可...","22.png","1","0"),
              new Card("16.png","JOKER鹏少","一天之前", "为什么谷歌浏览器的更新，成了大家吐槽的话题？","9月4号，谷歌在chrome十周年之际向全平台发布浏览器最新版本，到现在为止，在windows、macos、Linux、ios和安卓均可下载使用。当然，对于手机用户可能会有更好的选择，所以，我今天就在...","23.png","6","0"),
              new Card("17.png","heyisaac","38分钟之前", "「睡眠」法宝，BOSE SleepBuds睡眠遮噪耳塞上手体验","睡不好觉整个人都会变得暴躁， 而且还会对身体有严重的伤害，这并不是一件开玩笑的事情。我想，对于睡不好这一件事来说相信大家都曾经试过。很多时候睡得不好都会存在可观的因素，比如说出门在外不习惯或是环境噪声...","24.png","1","3"),
               new Card("18.png","Maxi","两天之前", "探索网页密码填充的最快方法","我一直在思索：哪些是每天需要重复的琐事？作为学生党，频繁地输入校园网的账号密码必然是其中之一。也有人对这十几秒的时间不屑一顾，质问我：“你的时间有那么宝贵吗？”冤枉！其实这一切的源动力正是由于我懒。下...","25.png","5","8"),
        };
        List<Card> cardList= Arrays.asList(cards);
            return cardList;
    }

}

Card2DAO类

package com.niit.quickStart.DAO;

import com.niit.quickStart.bean.Card2;
import lombok.Data;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;
import java.util.List;

@Configuration
@Data
public class Card2DAO {
    public List<Card2> getCard2s() {
        Card2[] card2s = {
                 new Card2("28.png","读书笔记","分享我们的笔记与心得，记录阅读中与作者产生的碰撞，以及给我们带来的改变...","238人关注"),
                new Card2("29.png","提升效率之路","一个优秀的工具，能让你在提升效率之路事半功倍。你是如何通过这些工具，技...","2550关注"),
                new Card2("30.png","装了啥","你的手机装了哪些常见或小众的 App？它们如何帮你提高效率，给生活带来更多...","1241人关注"),
                new Card2("31.png","一日一技","你可以在这里分享各种简单又实用的小技巧，它可能是一个系统的的操作技巧...","733人关注"),

        };
        List<Card2> card2List= Arrays.asList(card2s);
        return card2List;
    }
}

CardController类

package com.niit.quickStart.controller;

import com.niit.quickStart.DAO.Card2DAO;
import com.niit.quickStart.DAO.CardDAO;
import com.niit.quickStart.bean.Card;
import com.niit.quickStart.bean.Card2;
import com.niit.quickStart.bean.Matrix;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;

import javax.annotation.Resource;
import java.util.List;

@Controller
public class CardController {
    @Resource
    private CardDAO cardDAO;
    @Resource
    private Card2DAO card2DAO;
    @Resource
    private Matrix matrix;
    @GetMapping("matrix")
    public String getAll(ModelMap map){
        matrix.setInfo("6.png");
        matrix.setMatrix("Matrix");
        matrix.setLogin("10.png");
        matrix.setInfo1("7.png");
        matrix.setInfo2("8.png");
        map.addAttribute(matrix);
        List<Card> cardList= cardDAO.getCards();
        map.addAttribute("cardList",cardList);
        List<Card2> card2List=card2DAO.getCard2s();
        map.addAttribute("card2List",card2List);
        return "matrix";
    }
}

matrix类

<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Matrix</title>
    <style>
        .body{
            background-color: rgb(250,251,252)
        }
        .info{
            margin-left: 95px;margin-top: -10px
        }
        .a{
            margin-left: 375px;margin-top: 12px;position:absolute;color:gray;font-size: 19pt
        }
        .matrix{
            margin-left: 395px;margin-top: 12px;position:absolute;color:white;font-size: 19pt
        }
        .info1{
            margin-left: 810px;margin-top: 18px;position:absolute
        }
        .info2{
            margin-left: 858px;margin-top: 17px;position:absolute
        }
        .login{
            margin-left: 895px;margin-top: 6px;position:absolute
        }
        .a3{
            margin-top: -20px;padding-left: 120px;padding-right: 120px;border-bottom: 1px solid lightgray
        }
        .all{
            margin-left:130px;margin-top:45px;background-color: rgb(250,251,252)
        }
        .lef{
            margin-top: 20px
        }
        .a1{
            font-weight: bolder;color: black
        }
        .a2{
            margin-left: 750px;margin-top: -20px
        }
        .main{
            margin-top: 10px;margin-left: 10px
        }
        .avatar{
            border-radius: 100%;width: 40px
        }
        .name{
            margin-left: 50px;margin-top: -40px;font-size: 10pt
        }
        .time{
            margin-left: 50px;margin-top: -8px;font-size: 6pt;color: gray
        }
        .title{
            margin-left: 10px;margin-top: 20px;font-size: 17pt;font-weight: bolder;width: 470px
        }

        .introduce{
            margin-left: 10px;margin-top: -38px;font-size: 12pt;color:rgb(74,74,74);width: 470px
        }
        .p1{
            margin-left:600px
        }
        .number1{
            margin-left:628px;margin-top:-19px;color: gray
        }
        .p2{
            margin-left:660px;margin-top: -36px
        }
        .number2{
            margin-left:690px;margin-top:-21px;color: gray
        }
        .title2{
            margin-left: 20px;margin-top: 10px; font-size: 15pt;color: rgb(74,74,74)
        }
        .text{
            margin-left: 20px;margin-top: 5px; color: grey
        }
        .number3{
            margin-left: 20px;margin-top: 15px; color: grey
        }
    </style>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
</head>
<body class="body">
<div>
    <nav class="navbar navbar-default" style="background-color: rgb(41,37,37); height: 60px; ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img th:src="@{'img/'+${matrix.info}}" class="info">
                    <a class="a">#</a>
                    <a th:text="${(matrix.matrix)}" class="matrix"></a>
                    <img th:src="@{'img/'+${matrix.info1}}" class="info1">
                    <img th:src="@{'img/'+${matrix.info2}}" class="info2">
                    <img th:src="@{'img/'+${matrix.login}}"  class="login">


                </a>
            </div>
        </div>
    </nav>

</div>

<div class="btn-group btn-group-justified  a3" role="group" aria-label="..."   >
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">正版软件</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">付费栏目</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Matrix</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">专题广场</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">热门文章</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">应用推荐</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">生活方式</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">新玩意</button>
    </div>



</div >
<div class="all">
<img src="img/11.png">
    <div class="lef">
        <a class="a1">精选专栏文章</a>
    </div>
    <div class="a2">
        <a style="font-weight: bolder;color: black">推荐专栏</a>
        <a style="color: grey;margin-left: 230px"  >查看全部</a>

    </div>
</div>

<div class="container" style="margin-top: 20px">
    <div class="col-md-8 ">
        <div class="thumbnail"  th:each="card:${cardList}">
            <div class="main">
                <img th:src="@{'img/'+${card.avatar}}" class="avatar">
            </div>
            <p th:text="${card.name}" class="name"></p>
            <p th:text="${card.time}" class="time"></p>
            <p th:text="${card.title}" class="title"></p>

                <img th:src="@{'img/'+${card.picture}}"  style="margin-left: 500px;margin-top: -80px;width: 200px">

            <p th:text="${card.introduce}" class="introduce"></p>
<img src="img/26.png" class="p1">
            <p th:text="${card.number1}" class="number1"></p>
            <img src="img/27.png" class="p2">
            <p th:text="${card.number2}" class="number2"></p>
        </div>
    </div>
    <div class="col-md-4">

        <div class="thumbnail" th:each="card2:${card2List}">
            <img th:src="@{'img/'+${card2.pic}}" style="width: 100%" >
<p th:text="${card2.title}" class="title2"></p>
            <p th:text="${card2.text}" class="text"></p>
            <p th:text="${card2.number}" class="number3"></p>
<img src="img/32.png" style="margin-left: 200px;margin-top: -50px">

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

界面截图

1.png