• 2020-03-03


    庚子鼠年 戊寅月 乙巳日

    描述

    今日收获:完成比完美更重要
    今日啥也没干,助力水鸽!

    技术博客:null

    随笔

    二月复习了ssm框架,最近也一直在学springboot,没怎么写个东西,今天水鸽来找我写前端

    我就答应来练练,于是

    设计数据库

    image-20200303230535544

    糊前端

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>无情的回放机器v1.0</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <style>
    
            body{
                margin:0px;
                background: url(img/vlist.jpg) no-repeat;
                background-size:100% 100%;
                background-attachment:fixed;
            }
    
            .main{
                 80%;
                margin: 20px auto;
            }
    
            .main > div {
                 250px;
                height: 380px;
                float: left;
                margin: 2% 3%;
                padding-bottom: 1px;
                overflow:hidden;
                box-shadow: 10px 10px 5px rgba(134, 122, 136, 0.59);
                border-radius:5px;
                background-color: rgba(255, 192, 212, 0.38);
            }
            
            .main > div > div {
                padding: 5%;
                overflow:hidden;
            }
    
            .main > div > div > label{
                height: 55px;
                font-family: 黑体;
            }
    
            .main > div > div > p{
                height: 112px;
                font-family: 仿宋;
                overflow:hidden;
                color: rgba(255, 73, 48, 0.82);
            }
    
            .main > div > div > a{
                height: 55px;
            }
    
        </style>
    </head>
    <body>
    
    <div class="head">
        <h1 style="text-align: center">Hello World</h1>
    </div>
    <div class="main">
        <div th:each="course : ${c_list}">
            <img th:src="@{${course.img_url}}"  width="100%" height="158px"/>
            <div>
                <label th:text="${course.courseName}"></label>
                <p th:text="${course.intro}"></p>
                <a href="#">mooc</a>
                <a href="#">作业</a>
                <a th:href="@{'/vlist/'+${course.courseName}}">视频</a>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    体会:感觉自己写全端太吃力了,刚刚开始的时候想用模板改一下,后来又感觉模仿的话太大了,花里胡哨的,也没想好自己到底要设计成一个什么样子,于是边找边写,后来模仿了一个;

    后台

    后台的话通过设计好的ER图建立pojo,Mapper,很快就写完了

    效果展示

    image-20200303231022571

    自我感觉还行

    明天抽空把其他的模块实现了,再弄一个后台的很nice了。

  • 相关阅读:
    sizeof
    p与p->next
    每天学点java_Date类使用
    每天学点java_修饰符
    每天学点java_UML类图
    每天学点java_Arrays类
    每天学点java_插入排序
    每天学点java_for循环
    每天学点java_选择排序
    centos7 mysql
  • 原文地址:https://www.cnblogs.com/chang1024/p/12405530.html
Copyright © 2020-2023  润新知