重生之我从零开始学前后端——Week02

PartI  CSS3

一.字体文本基本样式

1.知识点

字体基本样式



    
    
    Document
    


    

段落文字

一级标题

em
宋体
文本基本样式



    
    
    Document
    


    

新闻标题

2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。

divdiv
超链接

2.案例

新闻网页案例



    
    
    Document
    


    

《自然》评选改变科学的10个计算机代码项目

2077年01月28日14:58 新浪科技 收藏本文


2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。

这种模式正变得越来越普遍。从天文学到动物学,在现代每一项重大科学发现的背后,都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖,他指出,今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说,“问题在于,我们仍然需要思考。”

如果没有能够解决研究问题的软件,以及知道如何编写并使用软件的研究人员,一台计算机无论再强大,也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后,着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。

最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言,允许用户用代码为计算机编程,但这两种语言都需要对计算机的架构有深入的了解,使得许多科学家难以掌握。20世纪50年代,随着符号语言的发展,特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran,这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程,例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。

产品卡片案例



    
    
    Document
    


    
九号平衡车
成年人的玩具
1999元

二.基本知识

1.知识点

①选择器进阶
子代后代选择器



    
    
    Document
    


    

div是p的父级

并集选择器



    
    
    Document
    


    

p

div
span

h1

h2

交集选择器



    
    
    Document
    


    

p-box

p

div-box
伪类选择器



    
    
    Document
    


    超链接

emmet语法



    
    
    Document


    
    

  • 内容
②背景相关
背景颜色



    
    
    Document
    


    
div
背景图



    
    
    Document
    


    
div
背景平铺



    
    
    Document
    


    
背景位置



    
    
    Document
    


    
③元素显示
块级元素显示



    
    
    Document
    


    
111
222
行内元素显示



    
    
    Document
    


    span
    span

行内块元素显示



    
    
    Document
    


    
    

④ CSS特性
继承性



    
    
    Document
    


    
这是div 这是div的子级span
层叠性



    
    
    Document
    


    
文字

2.案例

导航页初级案例



    
    
    Document
    


    导航1
    导航2
    导航3
    导航4
    导航5

导航页进阶案例



    
    
    Document
    


    五彩导航
    五彩导航
    五彩导航
    五彩导航

三.盒子模型

1.知识点

优先级



    
    
    Document
    


    
优先级测试
权重叠加计算



    
    
    Document
    


    

标签

盒子模型总述



    
    
    Document
    


    
内容电脑
内容电脑
盒子模型内容



    
    
    Document
    


    
文字
盒子模型边框



    
    
    Document
    


    
内容
盒子模型内边距



    
    
    Document
    


    
文字
盒子模型內减模式



    
    
    Document
    


    
文字
盒子模型外边距



    
    
    Document
    


    
    
    
文字
盒子模型清除默认样式



    
    
    Document
    


    

pppp

h1

  • lili
盒子模型版心居中



    
    
    Document
    


    
    
    
版心

 2.案例

新浪导航案例



    
    
    Document
    


    

新闻列表案例



    
    
    Document
    


    
    

 四.浮动

1.知识点

结构伪类选择器



    
    
    Document
    


    
  • 这是第1个li
  • 这是第2个li
  • 这是第3个li
  • 这是第4个li
  • 这是第5个li
  • 这是第6个li
  • 这是第7个li
  • 这是第8个li
伪元素选择器



    
    
    Document
    


    
浮动简单体验



    
    
    Document
    


    
one
two
浮动作用



    
    
    Document
    


    
    
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    
one
two
three
清除浮动
额外标签法



    
    
    
    Document
    


    
    
单伪元素清除法 Document
双伪元素清除法 Document
设置overflow法 Document

 2.案例

小米布局案例



    
    
    
    Document
    


    
    
头部
left
right
小米产品案例



    
    
    
    Document
    


    
网页导航案例



  
  
  
  Document
  


  

PartII  JAVA

一.分支

1.知识点

①if分支
package Order;
import java.util.Scanner;
public class IfDemo1 {
    public static void main(String[] args) {
        /*if(关系表达式){
            语句体:
            }
           else{
            语句体:
            }*/
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入女婿的酒量");
        int wine = sc.nextInt();
        if(wine > 2){
            System.out.println("小伙子,不错哟");
        }
    }
}
package Order;
public class IfDemo2 {
    public static void main(String[] args) {
        int number = 10;
        if(number >= 10){
            System.out.println("number大于等于10");
        boolean flag = false;
        if(flag = true){
            System.out.println("flag的值为true");
        }
        }
    }
}
② switch分支
package Order;
public class SwitchDemo1 {
    public static void main(String[] args) {
        /*switch(表达式){
              case 值1:
                  语句体1;
                  break;
              case 值2:
                  语句体2;
                  break;
              default:
                  语句体n+1;
                  break;*/
        String noodles = "兰州拉面";
        switch(noodles){
            case "兰州拉面":
                System.out.println("吃兰州拉面");
                break;
          /*case "兰州拉面" -> {
                System.out.println("吃兰州拉面");
            }*/
            case "武汉热干面":
                System.out.println("吃武汉热干面");
                break;
            case "北京炸酱面":
                System.out.println("吃北京炸酱面");
                break;
            case "陕西油泼面":
                System.out.println("吃陕西油泼面");
                break;
            default:
                System.out.println("吃方便面");
                break;
        }
    }
}

2.案例

①if案例
package Order;
public class IfText1 {
    public static void main(String[] args) {
        //红绿灯模拟
        boolean isLightGreen = false;
        boolean isLightYellow = false;
        boolean isLightRed = true;
        if (isLightGreen) {
            System.out.println("gogogo!");
        }
        if (isLightYellow) {
            System.out.println("slow!");
        }
        if (isLightRed){
            System.out.println("stop!");
        }
    }
}
package Order;
import java.util.Scanner;
public class IfText2 {
    public static void main(String[] args) {
        //键盘录入,如果大于等于100去网红餐厅,小于一百去沙县小吃
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入身上的钱");
        int money = sc.nextInt();
        if(money >= 100){
            System.out.println("去网红餐厅");
        }
        else{
            System.out.println("去沙县小吃");
        }
    }
}
package Order;
import java.util.Scanner;
public class IfText3 {
    public static void main(String[] args) {
        //电影院票号为0~100,奇数坐左边,偶数坐右边
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入票号");
        int ticket = sc.nextInt();
        if(ticket >= 0 && ticket <= 100) {
            if (ticket % 2 == 1){
                System.out.println("坐左边");
            }
            else{
                System.out.println("坐右边");
            }
        }
        else{
            System.out.println("不在正确票号范围内");
        }
    }
}
package Order;
import java.util.Scanner;
public class IfText4 {
    public static void main(String[] args) {
    /*不同分数不同礼物
      95-100自行车
      90-94游乐场
      80-89变形金刚
      80及以下大嘴巴子*/
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入分数:");
        int score = sc.nextInt();
        if (score >=0 && score <= 100) {
            if (score >= 95 && score <= 100) {
                System.out.println("送自行车一辆");
            }
            else if (score >= 90 && score <= 94) {
                System.out.println("游乐场玩一天");
            }
            else if (score >= 80 && score <= 89) {
                System.out.println("送变形金刚一个");
            }
            else {
                System.out.println("送一个大嘴巴子");
            }
        }
        else{
            System.out.println("录入数据不符合规范");
        }
    }
}
②switch案例
package Order;
import java.util.Scanner;
public class SwitchText {
    public static void main(String[] args) {
        //根据不同日期进行不同运动
        Scanner sc = new Scanner(System.in);
        System.out.println("请录入星期几");
        int week = sc.nextInt();
        switch(week){
            case 1:
                System.out.println("跑步");
                break;
            case 2:
                System.out.println("游泳");
                break;
            case 3:
                System.out.println("慢走");
                break;
            case 4:
                System.out.println("动感单车");
                break;
            case 5:
                System.out.println("拳击");
                break;
            case 6:
                System.out.println("爬山");
                break;
            case 7:
                System.out.println("吃一顿");
                break;
            default:
                System.out.println("没有这个星期");
                break;
        }
    }
}

二.循环初级

1.知识点

①for循环
package Loop;
public class ForDemo {
    public static void main(String[] args) {
        //需求:打印10次HelloWorld
        //i  1 ~ 5
        /*for(初始化语句;条件判断语句;条件控制语句){
            循环体;
          }*/
        for (int i = 1; i <= 10 ; i++){
            System.out.println("HelloWorld");
        }
    }
}
②while循环
package Loop;
public class WhileDemo {
    public static void main(String[] args) {
        //需求:利用while循环打印1~100
        //开始条件:1 结束条件:100
        /*初始化语句;
          while(条件判断语句){
              循环体语句;
              条件控制语句;
          }*/
        int i = 1;
        while(i <= 100){
            System.out.println(i);
            i++;
        }
    }
}
③dowhile循环
package Loop;
public class DoWhileDemo {
    public static void main(String[] args) {
        /*初始化语句;
          do{
            循环体语句;
            条件控制语句;
          }
          while(条件判断语句);*/
    }
}

2.案例

①for案例
package Loop;
public class ForText1 {
    public static void main(String[] args) {
       /* 玩游戏的时候,如果网不好那么会经常断线重连。
        那么断线重连这个业务逻辑就需要重复执行。
        假设现在公司要求,断线重连的业务逻辑最多只写5次。*/
        //因为我们需要重复执行某段代码,所以需要用循环解决
        //循环的次数 5 次
        //开始条件:1 结束条件:5
        for(int i = 1; i <= 5;i++){
            System.out.println("第" + i + "次执行断线重连");
        }
    }
}
package Loop;
import java.util.Scanner;
public class ForText2 {
    public static void main(String[] args) {
       /* 需求:键盘录入两个数字,表示一个范围。
        统计这个范围中既能被3整除,又能被5整除数字有多少个*/
        //1.键盘录入
        Scanner sc = new Scanner(System.in);
        System.out.println("请录入一个数字表示范围的开始");
        int start = sc.nextInt();
        System.out.println("请录入一个数字表示范围的结束");
        int end = sc.nextInt();
        //统计变量
        int count = 0;
        //2.利用循环获取这个范围中的每一个数字
        //开始条件:start 结束条件:end
        for (int i = start; i <= end; i++) {
        //3.对每一个数字进行判断,统计有多少个满足要求的数字
            if (i % 3 == 0 && i % 5 == 0) {
                // System.out.println(i);
                count++;
            }
        }
        System.out.println(count);
    }
}
②while案例
package Loop;
public class WhileText1 {
    public static void main(String[] args) {
        /*需求:世界最高山峰是珠穆朗玛峰(8844.43米=8844430毫米),假如我有一张足够大的纸,它的厚度是0.1毫米。
        请问,我折叠多少次,可以折成珠穆朗玛峰的高度?*/
        //1.定义一个变量用来记录山峰的高度
        double height = 8844430;
        //2.定义一个变量用来记录纸张的初始厚度
        double paper = 0.1;
        //3.定义一个变量用来统计次数
        int count = 0;
        //4.循环折叠纸张,只要纸张的厚度小于山峰的高度,那么循环就继续
        while(paper < height){
            //折叠纸张
            paper = paper * 2;
            //折叠一次,++一次
            count++;
        }
        //当循环结束之后,count记录的值就是折叠的次数
        System.out.println(count);
    }
}
package Loop;
public class WhileText2 {
    public static void main(String[] args) {
        /*需求:给你一个整数 x,如果 x 是一个回文整数,打印 true,否则,返回 false*/
        //1.定义变量记录整数
        int x = 12345;
        //把x做一个临时存储,用来最后进行判断
        int temp = x;
        //2.定义变量记录最终的结果(反过来的数字)
        int result = 0;
        //3.利用循环从右往左获取x中的数字并拼接到result当中
        //while
        while(x != 0){
            //获取到x最右边的数字
            int ge = x % 10;
            //获取一次数字之后,那么就要把当前最右边的数字给去掉
            x = x / 10;
            //拼接到result当中
            result = result * 10 + ge;
        }
        System.out.println(result == temp);
    }
}

你可能感兴趣的:(css3,html5,前端,java)