学习总结 - 2020.11.29

最新推荐文章于 2024-09-29 16:44:46 发布

Plus.L

最新推荐文章于 2024-09-29 16:44:46 发布

阅读量134

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/Losdesito/article/details/110308165

版权

自主学习

两周学习总结(11.15-11.29)
三、总结

两周学习总结(11.15-11.29)

一、前端

1.Foundation CSS/Javascript框架

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

当前移动设备广泛应用，所以在选择框架学习时优先考虑能够在任何设备上使用的框架，查找时看到Foundation框架蛮不错的，于是学习了这个框架。下面是一些零散的代码（没有做出成品）

<!DOCTYPE html>
<html>
<head>
  <title>Foundation-text</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
 
   <!-- 初始化 Foundation JS -->
   <script>
    $(document).ready(function() {
        $(document).foundation();
    })
    </script>
    
<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <button type="button" class="button small">按下</button><!--响应式布局，在重置页面大小后会改变-->
    </div>
  </div>
</div>


<button type="button" class="button">Default</button>
<button type="button" class="button secondary">Secondary</button>
<button type="button" class="button success">Success</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Warning</button>
<button type="button" class="button alert">Alert</button>

<table>
    <thead>
      <tr>
        <th>序号</th>
        <th>歌曲</th>
        <th>歌手</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>阿司匹林</td>
        <td>王以太</td>
      </tr>
      <tr>
        <td>2</td>
        <td>如果当时</td>
        <td>许嵩</td>
      </tr>
      <tr>
        <td>3</td>
        <td>超喜欢你</td>
        <td>沈以诚</td>
      </tr>
    </tbody>
  </table>


  <ul class="clearing-thumbs" data-clearing style="width: 500px;height: auto;">
    <li><a href="img1.jpg" class="th"><img src="img1.jpg"></a></li>
    <li><a href="img3.jpg" class="th"><img src="img3.jpg"></a></li>
    <li><a href="img5.jpg" class="th"><img src="img5.jpg"></a></li>
  </ul>
  
 


<div data-alert class="alert-box success">
  Down
  <a href="#" class="close" style="text-decoration:none;">&times;</a>
</div>
<div data-alert class="alert-box alert">
  SLOW
  <a href="#" class="close" style="text-decoration:none;">&times;</a>
</div>


<div class="progress alert">
  <span class="meter" style="position:relative;width:100%">
    <span class="percentage">100%</span>
  </span>
</div>
<div class="progress">
  <span class="meter" style="position:relative;width:50%">
    <span class="percentage">50%</span>
  </span>
</div>

<a href="#" data-dropdown="id01" class="button dropdown warning" style="text-decoration:none;">下拉</a>
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#" style="text-decoration:none;">风</a></li>
  <li><a href="#" style="text-decoration:none;">火</a></li>
  <li><a href="#" style="text-decoration:none;">雷</a></li>
</ul>


</body>
</html>

2.Bootstrap3前端框架

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

只会一个框架是万万不可的，于是我又找了个很火的框架，整体学下来感觉插件这一块很好用也很有意思，尝试着做了一个关于过渡的案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>过渡案例</title>
<style> 
div {
    width: 500px;
    height: 500px;
    background: pink;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
    
}

.np{
    text-align: center;
    padding: 50px 0;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
    color: green;
}

div:hover {
    width: 700px;
    height: 700px;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg) scale(0.8);
	background-color: skyblue; 

}

.np:hover{
    transform: rotate(360deg) scale(0.8);
    font-size: larger;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg) scale(0.8);

}
</style>
</head>
<body>
<div>
    
</div>
</body>
</html>

因为是动态效果我就不丢效果图了。

在尝试了Foundation和Bootstrap3之后，我的感觉是Fondation使用起来更为简单，更为灵活，没有过于复杂的操作，他最突出的特点就是移动设备优先，能够自动的适应各种屏幕。而Bootstrap则相对来说复杂许多，能够实现的功能也更为齐全，同时Bootstrap还拥有一个十分庞大的社区，这使得他的地位瞬间提高。

3.Fontawesome图标字体库及框架

Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

前面两套框架下来感觉前期基本够用了，感觉图标这一块还缺了一些，Fontawesome里面包含了许多常用的常见的图标，算是很好的补充了这个空缺

4.VUE入门

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

选vue的原因是他是由国人开发并且十分容易学习，能够简化DOM操作。现在基本能够掌握vue的基本知识，综合运用正在加工中。

二、后端

1.java

目前学到了多线程，JDBC开始接触了。
多线程实现用一个线程每隔1秒显示系统日期时间，另一个线程打印一个大质数的所有因子，当质数计算完毕后，停止时间的显示。

package Package1;

import java.util.*;
import java.text.SimpleDateFormat;
import java.util.Date;

public class Threadtext {
    public static void main(String[] args) throws Exception{
        Scanner sc = new Scanner(System.in);
        long num1 = sc.nextLong();
        dateprint time = new dateprint(true);
        Thread thread2= new Thread(time);
        colculate numb  = new colculate(num1,true);
        Thread thread1 = new Thread(numb);
        thread1.start() ;
        while(numb.getflag()==true)
        {
            try {
                thread2.start();
            }catch(Exception e)
            {
                e.getStackTrace();
            }

        }
        if(numb.getflag()==false)
        {
            thread2.stop();
        }
    }
}

class colculate implements Runnable {
    long num;
    private boolean flag;
    public colculate(long num,boolean flag) {
        this.num = num;
        this.flag =flag;
    }
    public boolean getflag() {
        return this.flag;
    }
    public void run() {
        long i=1;
        for(; i<=num; i++) {
            if (this.num%i==0) {
                System.out.println(i);
            }else{
                continue;
            }
        }
        if(i>this.num){
            this.flag = false;
        }
    }
} class dateprint implements Runnable {
    private boolean flag = true;
    public dateprint(boolean flag) {
        this.flag =flag;
    }
    public void setx(boolean flag) {
        this.flag=flag;
    }
    public void run() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        while (true) {
            System.out.println(sdf.format(new Date()));
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

    }
}

然后顺手写了一个简易版学生管理系统

package Package1;
import java.util.*;

public class fun {
    public static void main(String[] args) {
        //创建学生对象，用于存储学生数据
        ArrayList<Student> array = new ArrayList<Student>();
        while (true) {
            System.out.println("-------欢迎来到学生管理系统-------");
            System.out.println("1 添加学生");
            System.out.println("2 删除学生");
            System.out.println("3 修改学生");
            System.out.println("4 查看所有学生");
            System.out.println("5 退出");
            System.out.println("请输入你的选择：");
            Scanner sc = new Scanner(System.in);
            String line = sc.nextLine();
            switch (line) {
                case "1":
                //    System.out.println("添加学生");
                    addStudent(array);
                    break;
                case "2":
                 //   System.out.println("删除学生");
                    DeleteStudent(array);
                    break;
                case "3":
                 //  System.out.println("修改学生");
                    ChangeInformation(array);
                    break;
                case "4":
                 //   System.out.println("查看所有学生");
                    Selectall(array);
                    break;
                case "5":
                    System.out.println("退出系统");
                    //   break;
                    System.exit(0);

            }

        }
    }

    public static void addStudent(ArrayList<Student> array) {
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入学生学号:");
        String sid = sc.nextLine();
        System.out.println("请输入学生姓名:");
        String name = sc.nextLine();
        System.out.println("请输入学生年龄:");
        String age = sc.nextLine();
        System.out.println("请输入学生居住地:");
        String address = sc.nextLine();
        //创建学生对象
        Student s = new Student();
        s.setSid(sid);
        s.setName(name);
        s.setAge(age);
        s.setAddress(address);
        //将学生对象添加到集合中
        array.add(s);

        System.out.println("添加学生成功");
    }

    public static void Selectall(ArrayList<Student> array) {
        if(array.size()==0){
            System.out.println("无学生信息，请先添加信息");
            //return;让程序不再往下执行
            return;
        }
        System.out.println("学号\t\t\t姓名\t\t年龄\t\t居住地");
        for(int i =0;i<array.size();i++){
            Student s = array.get(i);
            System.out.println(s.getSid()+"\t"+s.getName()+"\t"+s.getAge()+"\t"+s.getAddress());
        }
    }

    public static void DeleteStudent(ArrayList<Student> array) {
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入您要删除的学生学号:");
        String numb = sc.nextLine();

        for(int i=0;i<array.size();i++){
            Student s = array.get(i);
            if(s.getSid().equals(numb)){
                array.remove(i);
                break;
            }
        }
        System.out.println("删除成功");
    }

    public static void ChangeInformation(ArrayList<Student> array) {
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入要修改的学生学号:");
        String sid = sc.nextLine();
        //输入修改的信息
        System.out.println("请输入修改后学生姓名:");
        String name = sc.nextLine();
        System.out.println("请输入修改后学生年龄:");
        String age = sc.nextLine();
        System.out.println("请输入修改后学生居住地:");
        String address = sc.nextLine();
        //创建学生对象
        Student s = new Student();
        s.setSid(sid);
        s.setName(name);
        s.setAge(age);
        s.setAddress(address);
        //遍历寻找到学号，然后修改集合信息
        for(int i=0;i<array.size();i++){
            Student student = array.get(i);
            if(student.getSid().equals(sid)){
                array.set(i,s);
                break;
            }
        }


        System.out.println("修改学生成功");
    }

}

package Package1;
/*
* ALT+Insert
*
* */
public class Student {
    private String sid;

    private String name;

    private String age;

    private String address;



    public Student() {
    }


    public Student(String sid, String name, String age, String address) {
        this.sid = sid;
        this.name = name;
        this.age = age;
        this.address = address;
    }

    public String getSid() {
        return sid;
    }

    public void setSid(String sid) {
        this.sid = sid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}