AngularDemo/src/app/body/body.component.html

<div class="container responsive-grid">
    <mat-card>
        <mat-card-header>学院新闻</mat-card-header>
        <mat-nav-list>
            <a mat-list-item href="#" target="_blank">很久以前，那还是我用win98的时候有次我系统崩溃了</a>
            <a mat-list-item href="#" target="_blank">因为我是电脑白痴</a>
            <a mat-list-item href="#" target="_blank">我朋友给我介绍了一个高手来帮我修电脑</a>
            <a mat-list-item href="#" target="_blank">他看了一下电脑，问我有没有98的盘</a>
            <a mat-list-item href="#" target="_blank">我说没有</a>
            <a mat-list-item href="#" target="_blank">他想了一下，叫我把固定电话拿给他</a>
            <a mat-list-item href="#" target="_blank">我想修电脑要电话干什么</a>
        </mat-nav-list>
    </mat-card>

    <mat-card>
        <mat-card-header>学术动态</mat-card-header>
        <mat-nav-list>
            <a mat-list-item href="#" target="_blank">但人家是高手，我也不好说什么</a>
            <a mat-list-item href="#" target="_blank">就把电话拔下来给他了</a>
            <a mat-list-item href="#" target="_blank">他把电话线空着的一头接在电脑的一个插孔内</a>
            <a mat-list-item href="#" target="_blank">然后进入了dos</a>
            <a mat-list-item href="#" target="_blank">然后就开始在电话上不停的按着键</a>
            <a mat-list-item href="#" target="_blank">他按键的速度非常快，但是只按0，1两个键</a>
        </mat-nav-list>
    </mat-card>

    <mat-card>
        <mat-card-header>历史学习</mat-card-header>
        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
        <!--                我渐渐的有些困，我问他这东西要搞多久-->
        <!--            </div>-->
        <!--            <div class="w-1/3 border-2">-->
        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
        <!--                他说要几个小时-->
        <!--            </div>-->
        <!--            <div class="w-1/3 border-2">-->
        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
        <!--                我给他倒了杯茶，就一个人去隔壁睡觉了-->
        <!--            </div>-->
        <!--            <div class="w-1/3 border-2">-->
        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
        <!--            </div>-->
        <!--        </div>-->
        <mat-nav-list>
            <a mat-list-item href="#" target="_blank">我渐渐的有些困，我问他这东西要搞多久</a>
            <a mat-list-item href="#" target="_blank">他说要几个小时</a>
            <a mat-list-item href="#" target="_blank">我给他倒了杯茶，就一个人去隔壁睡觉了</a>
        </mat-nav-list>
    </mat-card>

    <mat-card>
        <mat-card-header>信息公告</mat-card-header>
        <mat-nav-list>
            <a mat-list-item href="#" target="_blank">醒来的时候，一看已经过了4个多小时</a>
            <a mat-list-item href="#" target="_blank">我起身到隔壁，看见他正在98里面调试</a>
            <a mat-list-item href="#" target="_blank">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</a>
            <a mat-list-item href="#" target="_blank">我当时也不懂电脑</a>
            <a mat-list-item href="#" target="_blank">谢过人家就走了</a>
            <a mat-list-item href="#" target="_blank">后来我慢慢对电脑有了了解</a>
            <a mat-list-item href="#" target="_blank">终于了解</a>
            <a mat-list-item href="#" target="_blank">原来当时那位高手是用机器语言编了一个98系统</a>
            <a mat-list-item href="#" target="_blank">我后来问我朋友那位高手的下落</a>
            <a mat-list-item href="#" target="_blank">朋友说前几年去了美国之后</a>
            <a mat-list-item href="#" target="_blank">杳无音讯……</a>
        </mat-nav-list>
    </mat-card>
</div>

<mat-divider></mat-divider>

<mat-grid-list cols="4" rowHeight="2:1">
    <mat-grid-tile><img ngSrc="/assets/img/anyuse2.png" alt="" height="720" width="1280"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse3.png" alt="" height="800" width="1280"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse4.png" alt="" height="678" width="1280"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse5.png" alt="" height="960" width="1280"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse6.png" alt="" height="1080" width="1920"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse7.png" alt="" height="1080" width="1920"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse8.png" alt="" height="1080" width="1920"/></mat-grid-tile>
    <mat-grid-tile><img ngSrc="/assets/img/anyuse9.png" alt="" height="1080" width="1920"/></mat-grid-tile>
</mat-grid-list>