Java学习

第一天下午：Java基础语法

1、输出

package com.company;public class Main {public static void main(String[] args) {System.out.println("Hello Zhu");}
}

2、标识符

Java 所有的组成部分都需要名字。类名、变量名以及方法名都被称为标识符。
关于 Java 标识符，有以下几点需要注意：
所有的标识符都应该以字母（A-Z 或者 a-z）,美元符、或者下划线开始
首字符之后可以是字母（A-Z 或者 a-z）,美元符、下划线或数字的任何字符组合
关键字不能用作标识符
标识符是大小写敏感的
合法标识符举例：age、$salary、_value、__1_value
非法标识符举例：123abc、-salary

package com.company;public class Main {public static void main(String[] args) {int x = 10;}
}

3、常量 变量

不会变的10、30【常量】
会变的string a【变量】

package com.company;public class Main {public static void main(String[] args) {String name = "朱帅";System.out.println(name);String name2 = "帅帅";System.out.println(name2);}
}

4、显示一个界面

package com.company;import javax.swing.*;public class Main {public static void main(String[] args) { JFrame jFrame = new JFrame();jFrame.setVisible(true);}
}

package com.company;import javax.swing.*;public class Main {public static void main(String[] args) {//创建一个窗体JFrame jFrame = new JFrame();//设置长款jFrame.setSize(300, 300);//设置位置jFrame.setLocation(300, 700);//设置标题jFrame.setTitle("🐽");//显示出来jFrame.setVisible(true);}
}

5、显示一个弹窗

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {JOptionPane.showMessageDialog(null, "这是一个弹窗");}
}

6、运算符

+、-、*、/
++、–
&&、||、!

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {int x = 3 + 5;System.out.println(x);int y = 3 * 5;System.out.println(y);int z = 3 / 5;System.out.println(z);}
}

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {System.out.println(3 == 3);int w = 10;int j = 20;System.out.println(w > j);}
}

7、流程控制语句

–if
–if else

8、循环♻️

–while

9、Day1 小作业

• 运用目前学习过知识，将数值123.5678四舍五入保留两位小数

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {double num;int ans;num = 123.5678;num = num * 100;num = (double) (int)((num + 0.5)) / 100;ans = (int)(num + 0.5);System.out.println(ans);}
}

• 使用循环语句完成以下要求：
  计算数字1-100所有数字的和
  计算1-100所有偶数的和

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {int sum = 0;for(int i = 1; i <= 100; i ++){sum = sum + i;}System.out.println(sum);int sums = 0;for(int i = 1; i <= 100; i ++){if(i % 2 == 0)sums = sums + i;}System.out.println(sums);}
}

• 99乘法表

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {for(int i = 1; i <= 9; i ++){for(int j = 1; j <= i; j ++){System.out.print(i +  "*" + j +"="+ i * j + " ");}System.out.println();}}
}

• 编程输出所有的三位水仙花数 水仙花数:各位数字的立方数相加等于该数本身 例如 153 111+555+333=153 153就是一个三位水仙花数

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {int a, b, c;for(int i = 100; i <= 999; i ++){a = i / 100;b = (i % 100) / 10;c = i % 10;if(a * a * a + b * b * b + c * c * c == i)System.out.println(i);}}
}

• 计算一个整数数组{89,95,68,76,88,64}的平均值

package com.company;import jdk.nashorn.internal.scripts.JO;import javax.swing.*;public class Main {public static void main(String[] args) {int num = 0;int a[] = {89, 95, 68, 76, 88, 64};for(int i = 0; i < 6; i ++){num = num + a[i];}num = num / 6;System.out.println(num);}
}

Java基础语言

第二天上午

1、Java中类的定义

类：是模具【功能、属性】
功能一样：行为一样
属性不一样：颜色，内存大小

在IDEA中创建一个Student类

2、成员变量的定义

3、成员方法的声明

package com.company;
public class Student {//属性 【不一样】String name;    //表示姓名的变量int age;        //年龄String sex;     //性别//行为 -- 函数 -- 方法 【一样】public void study(){System.out.println("我在学习");}public void eat(){System.out.println("干饭");}}

4、类的使用

新建一个StudentTest类

package com.company;public class StudentTest {//入口函数 主函数public static void main(String[] args){//创建一个对象//类名 对象名 = new 类名();//创建对象，必定调用构造方法Student stu = new Student();Student stu1 = new Student("帅", "女", 3);stu.eat();stu1.eat();stu.study();stu1.study();stu.name = "laozhu";//stu1.name = "nihao";stu.sex = "女";//stu1.sex = "男";System.out.println(stu.name);System.out.println(stu1.name);}
}

5、方法的重载

6、构造方法的使用

package com.company;//如果你的类没有声明构造方法，那么系统会自动提供一个构造方法
public class Student {//构造方法 修饰符类名(){}public Student(){System.out.println("🐽构造方法执行了");}public Student(String name, String sex, int age){this.name = name;this.sex = sex;this.age = age;System.out.println("有参数的构造方法执行了，给属性赋值🐽");}//属性 【不一样】String name;    //表示姓名的变量int age;        //年龄String sex;     //性别//行为 -- 函数 -- 方法 【一样】public void study(){System.out.println("我在学习");}public void eat(){System.out.println("干饭");}}

package com.company;public class StudentTest {//入口函数 主函数public static void main(String[] args){//创建对象，必定调用构造方法//通过无参数的构造方法创建对象Student stu = new Student();//通过两个参数的构造方法创建对象Student stu1 = new Student("帅", "女", 3);

7、构造方法的使用场景

package com.company;//如果你的类没有声明构造方法，那么系统会自动提供一个构造方法
public class Student {String name;    //表示姓名的变量int age;        //年龄String sex;     //性别//构造方法 修饰符类名(){}public Student(){System.out.println("🐽构造方法执行了");}public Student(String name, String sex, int age){this.name = name;this.sex = sex;this.age = age;System.out.println("有参数的构造方法执行了，给属性赋值🐽");}
}

8、this关键的使用

9、实例成员与类成员

1. 定义

2. 实例变量和类变量的区别

3. 类方法和实例方法的区别

4. 实例成员和类成员

5. 访问修饰词

10、封装的使用

点击进行getter、setter的添加进行封装


Person类

package com.company;public class Person {//将成员变量设置为私有，达到属性封装的目的private String name;private int age;//封装：保护属性public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;if(this.age > 150)this.age = 150;if(this.age < 1)this.age = 1;}
}

PersonTest

package com.company;public class PersonTest {public static void main(String[] args){Person per = new Person();//使用这种方式进行私有量的设置per.setName("老朱");per.setAge(40);}
}

11、继承的使用

1. JAVA继承语法

父类

package com.company;public class Animal {String name;String car = "宝马";public void eat(){System.out.println("动物吃");}
}

子类

package com.company;public class Dog extends Animal{}

2. 子类的扩展

子类

package com.company;public class Dog extends Animal{String color;//子类扩展的属性public void shout(){//子类扩展的方法System.out.println("旺旺，旺旺旺，...");}
}

3. 继承的使用

每一个类都只有一个父类，而最终的👨类是Object

AnimalTest文件

package com.company;public class AnimalTest {public static void main(String[] args) {//每一个人都有一个8⃣️8⃣️Cat cat = new Cat();int x = cat.hashCode();System.out.println(x);}
}

Cat类

package com.company;//如果一个类没有显式的继承另一个类，那么该类就默认继承Object
public class Cat {}

运行结果

4. 方法的重写

Animal类

package com.company;public class Animal {String name;String car = "宝马";public void eat(){System.out.println("动物吃");}
}

Dog类

package com.company;public class Dog extends Animal{String name;String color;String car = "奔驰🚗";public void shout(){//子类扩展的方法System.out.println("旺旺，旺旺旺，...");}public void eat(){//重写父类的方法：修饰范围必须大于或等于父类对应方法的访问修饰符范围//除修饰符外，重写方法的其他部分必须和父类保持一致System.out.println("小狗吃🌧️");}public void say(){System.out.println("我的车" + super.car);System.out.println("我的车" + this.car);}
}

AnimalTest文件

package com.company;public class AnimalTest {public static void main(String[] args) {Dog dog = new Dog();//没有eat方法dog.name = "gou";dog.color = "绿";dog.eat();//Superdog.say();}
}

5. super关键字

Dog类

package com.company;public class Dog extends Animal{public void say(){System.out.println("我的车" + super.car);System.out.println("我的车" + this.car);}
}

第二天下午

1、接口（没太明白这个部分）

接口的优先级大于继承
一个接口可以继承多个接口
创建一个USB的interface

package day02;public interface USB {//接口中的成员只能是常量和抽象方法int a = 10; //不可以改变//接口中的方法，没有方法体，还有方法的声明，抽象方法public void on();
}

创建一个printer的类

package day02;public class Printer implements USB{public void on() {System.out.println("🖨️开始启动");}
}

创建一个Mouse的类

package day02;public class Mouse implements USB{public void on(){System.out.println("🖱️开始启动");}
}

创建一个KeyBoard的类

package day02;public class KeyBoard implements USB{public void on(){System.out.println("开始⌨️启动");}
}

在Cu类里面使用

package day02;public class Cu {
//    public void getMouse(Mouse mouse){
//        //接入🖱
//        mouse.on();
//    }public void getSheBei(USB usb){usb.on();}public static void main(String[] args){Mouse mouse = new Mouse();Cu c = new Cu();c.getSheBei(mouse);}
}

2、标准库

年月日等

3、Day2 小作业

1. 作业题

CircleTest

package Homework1;public class CircleTest {public static void main(String[] args){//无参数Circle circle = new Circle();//有参数Circle circle1 = new Circle(1);//面积System.out.println("无参构造方法得到的圆面积为" + circle.area());System.out.println("🈶️参构造方法得到的圆面积为" + circle1.area());//周长System.out.println("无参构造方法得到的圆周长为" + circle.perimeter());System.out.println("有参构造方法得到的圆周长为" + circle1.perimeter());}
}

Circle类

package Homework1;public class Circle {//属性int r;double PI = 3.14;//无参数的构造方法，初始化r=1public Circle(){r = 1;}//有参数的构造方法,参数用于初始化半径r的值public Circle(int r){this.r = r;}//方法：求面基public double area(){return 2 * PI * r;}//方法：求周长public double perimeter(){return PI * r * r;}
}

2. 作业题

Account类

package Homework2;import java.util.Scanner;public class Account {long  ID;   //长整数String password;    //账号密码String name;        //真实姓名String personld;    //身份证号码String email;       //客户的电子邮箱double balance;     //账户余额//无参构造public Account(){ID = 54180701;password = "123456";name = "朱帅";personld = "410106";email = "2433149900@qq.com";balance = 1034230.42;}//有参构造public Account(long ID, String password, String name, String personld, String email, double balance, double withdraw){this.ID = ID;this.password = password;this.name = name;this.personld = personld;this.email = email;this.balance = balance;}//方法public void deposit(double cun){   //存钱balance += cun;}public void withdraw(double qu){   //取钱if(balance > 0 && balance - qu >0){balance -= qu;}else{System.out.println("您的余额不足，无法进行操作");}}public static void main(String[] args) {
//        System.out.println("请输入您的取款金额：");double mon = 40.0;System.out.println("您的取款金额为" + mon + "元");Account account = new Account();account.deposit(50.0);account.withdraw(1000000000.0);}
}

3. set、get的意义

get、set的功能
1、可以保护数据
2、可以规定数据的写入范围等以及读出的方式（如把int变为字符输出）

4. 作业3

MulTest主函数类

package Homework3;public class MulTest{//设置接口mulpublic void getCul(Multiple mul){mul.culArea();mul.culPerimeter();}public static void main(String[] args){//使用正方形和矩形类Rectang rec = new Rectang(80, 30);Square square = new Square(40);//为了使用接口声明本类MulTest r = new MulTest();//使用接口对rec和square进行计算r.getCul(rec);r.getCul(square);//利用get、set以修改rec.setX(90);rec.setY(80);//利用get、set的访问int x = rec.getX();int y = rec.getY();System.out.println("矩形的长为" + x);System.out.println("矩形的宽为" + y);}
}

Multiple接口

package Homework3;public interface Multiple {public void culArea();public void culPerimeter();
}

Rectang类

package Homework3;public class Rectang implements Multiple {private int x, y;//有参构造器 初始化边长public Rectang(int x, int y){this.x = x;this.y = y;}//get、set的功能//1、可以保护数据//2、可以规定数据的写入范围等以及读出的方式（如把int变为字符输出）public int getX() {return x;}public void setX(int x) {this.x = x;}public int getY() {return y;}public void setY(int y) {this.y = y;}public void culArea(){int s = x * y;System.out.println("长方形的面积为" + s);}public void culPerimeter(){int l = 2 * x + 2 * y;System.out.println("长方形的周长为" + l);}
}

Square类

package Homework3;public class Square implements Multiple{private int x;//有参构造器 初始化边长public Square(int x){this.x = x;}public void culArea(){int s = x * x;System.out.println("正方形的面积为" + s);}public void culPerimeter(){int l = 4 * x;System.out.println("正方形的周长为" + l);}
}

HTML

第三天上午

1、安装软件

2、一些基础语法

随便打了一些

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>老朱的第一个页面</title></head><body bgcolor="pink"><h1 align = "center">欢迎光临我的主页</h1><hr><div align = "center" style="font-size: 300;">这是我第一次做主页，无论怎么样，我都会努力做好！</div><h1>帅不帅</h1><!-- 属性都是字符串 --><div align = "center">  嘿嘿</div><p>这是段略标记肤：额看到飞机浑善达克解放后老师的克己复礼都是克己复礼看电视打卡计划反抗精神的航空飞机还得上课讲废话剧的房间的三闾大夫空间里都是克己复礼都开始了反抗了反抗精神的六块腹肌老师的课就放老师独家开发老师的</p><p>的开发计划署看绝代风华开始的机会福克斯杜鹃花科飞机浑善达克解对方老师是看到飞机浑善达克解放后肯定是交话费开始的交话费江东父老开始多了反抗放后开始的交话费</p>这是强制换行标签，但不分段<br> 这是墙纸换行标签，但不分段<hr size="20" color="red" width="70" align="left" noshade="true"><div align = "center"><font color = "green" size = "900" face = "仿宋"> 🎩帽子 H<sub>2</sub>O </font><br> div：分节标记符，可以换行，什么都可以放，但是一般不放在别的里面</div><ol type="i">有序列表<li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ol><ul type = "square">无序列表<li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul><img src="1.JPG" border = "10"><img src="2.JPG" width="260" height="390"><img src="3.png" alt="图片加载不成功" border = "9"><video src=""></video></body>
</html>

3、小作业

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第三天作业</title>
</head>
<body><ol><li type="1">大学人生</li><ul type="round"><li>校园生活</li><li>毕业路上</li></ul><li type="1">时事热点</li><ul type="square"><li>爱我中华</li><li>国际纵横</li></ul><li type="A">娱乐休闲</li></ol><hr color="blue" size="10"><h1 align="center">学生基本信息表</h1><table border="1" align="center"><caption>学生基本信息表</caption><tr><td rowspan="2">学号</td><td colspan="3">个人信息</td><td colspan="2">入学信息</td></tr><tr><td>姓名</td><td>性别</td><td>年龄</td><td>班级</td><td>入学年月</td></tr><tr><td>001</td><td>张永</td><td>男</td><td>18</td><td>20020101</td><td>2000年9月</td></tr><tr><td>002</td><td>王芳</td><td>女</td><td>17</td><td>20020101</td><td>2000年9月</td></tr></table><hr color="darkblue" size="10"><h1 align="center"><font color="red">用户留言薄</font></h1><hr color="red"><table border="1" align="center"><tr><td><font color="blue">用户名：</font></td><td><input type="text" placeholder="主帅"></td><td><font color="blue">密码：</font></td><td><input type="password"></td></tr><tr><td><font color="blue">电子信箱📪</font></td><td><input type="text" placeholder="243314@qq.com"></td><td><font color="blue">民族：</font></td><td><p><select name="" id=""><option value="">汉族</option><option value="">回族</option><option value="">维吾尔族</option><option value="">苗族</option><option value="">壮族</option></select></p></td></tr><tr><td><font color="blue">性别：</font></td><td><p>男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"></p></td><td><font color="blue">爱好：</font></td><td><p>篮球 <input type="checkbox">足球 <input type="checkbox">排球 <input type="checkbox">其他 <input type="checkbox"></p></td></tr><tr><td><font color="blue">留言：</font></td><td colspan="3"><p><textarea name="" id="" cols="30" rows="10" placeholder="请多多指教"></textarea></p></td></tr><tr><td colspan="4"><p align="center"><input type="submit" value="确定"><input type="reset" value="重写"></p></td></tr></table>
</body>
</html>

CSS基础

第四天上下午

1、在HTML中引入CSS

1. 方法1 行内样式表（不推荐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body style="background-color: antiquewhite;">hdfjkf 
</body>
</html>

2. 方法2 内部样式表 只能选多个

3. 外部样式表

2、CSS选择器

1. 标记选择器

在head里面加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background-color:#008000}body{background-color: bisque;}</style>
</head>
<body style="background-color: antiquewhite;"><p>hdfjkf</p>
</body>
</html>

但是如果我不想所有的都变，只让一个变，无法用标签选择所有的标签
【⬆️标签选择器 如div p a font tr td table 选择的是页面所有的元素】

2. 通配选择器

3. 🌟类选择器 可以一个 可以两个 可以多个

【⬇️类选择器 .类名 选择该类的元素】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{background-color:#008000}.d2{background-color: bisque;}</style>
</head><body><p class="d1">hdfjkf</p><p class="d2">dsjk</p></body>
</html>

4. id选择器 只可以一个

【⬇️id选择器 #ID的名称 选择该id的元素】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部样式表 --><link rel="stylesheet" href="main.css" type="text/css"><style>/* 类选择器 */.d3{background-color:#008000}.d2{background-color: bisque;}/* id选择器 */#dd{background-color: cadetblue;}</style>
</head><body><p id="dd">hdfjkf</p><p>dsjk</p></body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部样式表 --><link rel="stylesheet" href="main.css" type="text/css"><style>.d1{background-color:#008000}.d2{background-color: bisque;}</style>
</head><body><p>hdfjkf</p><p>dsjk</p></body>
</html>

main.css

p{background-color: blueviolet;
}

main.css

/* 内部样式表 只能选多个 */
p{background-color: blueviolet;
}
/* 类选择器 可以多选一 多选多 */
.d1{background-color: brown;
}

5. 派生选择器

main.css

/* 派生选择器 */
div p{color:burlywood;
}.d1 p{color: chartreuse;
}#d1 p{color: cornflowerblue;
}

伪类选择器

2、CSS样式

1. 颜色与背景

2. 字体

3. 文本

3、盒子模型

box.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;}div{background-color: rgb(102, 48, 28);border: rgb(16, 107, 107) solid 5px;width: 400px;height: 400px;/* padding: 20px; */margin: 50px;}p{background-color: cyan;border: rgb(43, 83, 129) solid 10px;width: 200px;height: 200px;margin: 10px;padding: 40px;}</style>
</head>
<body><div><p>水晶戒指💍</p></div>
</body>
</html>

4、CSS定位和浮动

1. CSS浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 39px;height: 39px;}.d1{background-color:darkorange;float:left;}.d2{background-color:darkcyan;float: left;}.d3{background-color:darkred;float:left;}.d4{background-color: darkseagreen;float: left;}.d5{height: 80px;width: 80px;}</style>
</head>
<body><!-- 浮动可以不让排列为默认的竖着的样子，可以横着 --><div class="d5"><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="d4"></div></div>
</body>
</html>

2. 绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;}div{width: 200px;height: 200px;}.d1{background-color:darkorange;position: absolute;top: 200px;left: 200px;}.d2{background-color:darkcyan;position: absolute;top: 500px;left: 90px;}.d3{background-color:darkred;position: absolute;top: 90px;left: 80px;}.d4{background-color: darkseagreen;/* float: left; */position: absolute;top: 908px;left: 700px;}.d5{background-color: rgb(175, 33, 140);width: 100px;height: 100px;position: absolute;top: 110px;left: 102px;}</style>
</head>
<body><!-- 浮动可以不让排列为默认的竖着的样子，可以横着 --><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="d4"><div class="d5"></div></div>
</body>
</html>

3、自定义🔘按钮

button.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="my.css">
</head>
<body><input class="btn" type="button" value="🔘按钮">
</body>
</html>

my.css

.btn{background-color: rgb(97, 85, 206);color: darkseagreen;border: none;padding: 15px 32px;font-size: 18px;box-shadow: 0px 8px 8px rgb(150, 23, 23);}
.btn:hover{background-color: rgb(77, 24, 72);cursor: pointer;
}
.btn:active{color: dodgerblue;transform: translateY(2px) translateX(2px);
}

4、直接引入别人的框架

bootstrap网址

5、小作业 静态页面

画出一下页面

主要框架截图

light.css

*{margin: 0px;padding: 0px;
}
body{background-image: url("bg.jpg");background-repeat: no-repeat;/* 横向充满 */background-size: 100% auto;
}
.light{/* 要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中 */display: block;margin: 90px auto;
}
.bottom{display: block;margin: -169px auto;
}
.switch{display: block;margin: -185px auto;
}
.offRed{display: block;margin: 290px 620px;
}
.offYellow{display: block;margin: -355px 720px;
}
.offBlue{display: block;margin: 289px auto;
}
.offGreeN{display: block;margin: -355px 900px;
}
.offPurple{display: block;margin: 289px 990px;
}
.title{color: yellow;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: -80px 380px;font-size: larger;position: absolute;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="light.css">
</head>
<body><div><!-- <font color="yellow">智能家居等控系统</font>  --><p class="title">智能家居灯控系统</p><img class="light" src="l-close.png" alt=""><img class="bottom" src="light_btm_bg.png" alt=""><img class="switch" src="switch-close.png" alt=""><img class="offRed" src="off-red.png" alt=""><img class="offYellow" src="off-yellow.png" alt=""><img class="offBlue" src="off-blue.png" alt=""><img class="offGreeN" src="off-green.png" alt=""><img class="offPurple" src="off-purple.png" alt=""></div>
</body>
</html>

成品截图

以下为用到的图片
bg.jpg

l-close.png

light_btm_bg.png

off-green.png

off-yellow.png

off-purple.png

off-red.png

off-blue.png

switch-close.png

老师讲的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url(bg.jpg);margin: 0px;background-repeat: no-repeat;background-size: 100% auto;}.light{width: 340px;height: 520px;margin: auto auto;}.light_btn{background-image: url(light_btm_bg.png);background-repeat: no-repeat;width: 366px;height: 212px;margin: auto auto;position: relative;top: -80px;/* 一直在前面 */z-index: 10;text-align: center;}.light_btn img{margin-top: 30px;}.select{/* ? */width: 424px;margin: auto auto;position: relative;top: -120px;z-index: 900;}li{float: left;width: 64px;height: 66px;margin-right: 20px;}ul{margin: 0px;padding: 0px;list-style-type: none;}</style>
</head>
<body><div class="title">智能家居等控系统</div><div class="light"><img src="l-close.png" alt=""></div><div class="light_btn"><img src="switch-close.png" alt=""></div><div class="select"><ul><li><img src="off-blue.png" alt=""></li><li><img src="off-red.png" alt=""></li><li><img src="off-yellow.png" alt=""></li><li><img src="off-purple.png" alt=""></li><li><img src="off-green.png" alt=""></li></ul></div>
</body>
</html>

用的div更多，更加的方便修改

JavaScript

第五天上午

1、入门：在HTML文档中嵌入JavaScript

1. 方法1:在HTML标记中直接写入JavaScript代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 方法1:在HTML标记中直接写入JavaScript代码 --><p onmouseover="alert('欢迎您学习JavaScript！')">鼠标移过来</p><input type="button" value="清除缓存" onclick="alert('缓存清除完毕！')"><h1 onmouseover="document.write('hello')">hello</h1>
</body>
</html>

2. 方法2:将JavaScript代码放入〈script 〉…〈script/〉标记符中

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 将JavaScript代码放入《csrip》。。。《/scrtit》中 --><script>alert('欢迎您学习JavaScript！');</script>
</head>
<body></body>
</html>

3. 方法3:将代码独立存储为以.js为扩展名的属性，利用src属性将该文件调入

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JSLearn.js" type=""></script>
</head>
<body></body>
</html>

JSLearn.js

alert('今天周五');

2、一些变量

略

3、函数和事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<script>function login(){alert("今天有暴雨");close();}
</script>
</head>
<body><!-- 事件的赋值为函数的名称 --><input type="button" onclick="login()" value="惦记我">
</body>
</html>

第五天下午

JavaScript相关

小作业

实现效果如下（开关灯）

注意在引用js文件时要加./

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="my.css"><!-- ./要加 --><script src="light.js" ./></script>
</head>
<body><div class="title">智能家居等控系统</div><div class="light"><img id="light" src="l-close.png" alt=""></div><div class="light_btn"><img onclick="lightOn()" id="switch" src="switch-close.png" alt=""></div><div class="select"><ul><li><img onclick="blueLight()" id="blue" src="off-blue.png" alt=""></li><li><img onclick="redLight()" id="red" src="off-red.png" alt=""></li><li><img onclick="yellowLight()" id="yellow" src="off-yellow.png" alt=""></li><li><img onclick="purpleLight()" id="purple" src="off-purple.png" alt=""></li><li><img onclick="greenLight()" id="green" src="off-green.png" alt=""></li></ul></div>
</body>
</html>

light.js

alert("nihao");
var light = document.getElementById("light");
var sw = document.getElementById("switch");
var blue = document.getElementById("blue");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var purple = document.getElementById("purple");
var green = document.getElementById("green");
var on = false, redon = false, blueon = false, 
greenon = false, purpleon = false, yellowon = false;
function lightOn(){if(on){//开着灯，要关掉light.src="l-close.png";sw.src = "switch-close.png";if(blueon){//如果蓝灯是开着的，需要把蓝灯的按钮关掉blue.src="off-blue.png";blueon = false;}if(redon){red.src="off-red.png";redon = false;}if(greenon){green.src="off-green.png";greenon = false;}if(yellowon){yellow.src="off-yellow.png";yellowon = false;}if(purpleon){purple.src="off-purple.png";purpleon = false;}// blue.src="off-blue.png";on = false;}else{//关着灯，要打开light.src="l-blue.png";sw.src="switch-blue.png";blue.src="on-blue.png";on = true;blueon = true;}
}
function redLight(){//开红灯if(on){//如果是开灯状态才可以开红灯light.src="l-red.png";sw.src="switch-red.png";red.src="on-red.png";redon = true;if(blueon){blueon = false;blue.src="off-blue.png";}if(greenon){greenon = false;green.src="off-green.png";}if(yellowon){yellow.src="off-yellow.png";yellowon = false;}if(purpleon){purple.src="off-purple.png";purpleon = false;}}
}function blueLight(){if(on){//如果是开灯状态才可以开蓝灯light.src="l-blue.png";sw.src="switch-blue.png";blue.src="on-blue.png";blueon = true;if(redon){redon = false;red.src="off-red.png";}if(greenon){greenon = false;green.src="off-green.png";}if(yellowon){yellow.src="off-yellow.png";yellowon = false;}if(purpleon){purple.src="off-purple.png";purpleon = false;}}
}function greenLight(){if(on){//如果是开灯状态才可以开绿灯light.src="l-green.png";sw.src="switch-green.png";green.src="on-green.png";greenon = true;if(redon){redon = false;red.src="off-red.png";}if(blueon){blueon = false;blue.src="off-blue.png";}if(yellowon){yellow.src="off-yellow.png";yellowon = false;}if(purpleon){purple.src="off-purple.png";purpleon = false;}}
}function yellowLight(){if(on){//如果是开灯状态才可以开黄灯light.src="l-yellow.png";sw.src="switch-yellow.png";yellow.src="on-yellow.png";yellowon = true;if(redon){redon = false;red.src="off-red.png";}if(blueon){blueon = false;blue.src="off-blue.png";}if(greenon){green.src="off-green.png";greenon = false;}if(purpleon){purple.src="off-purple.png";purpleon = false;}}
}function purpleLight(){if(on){//如果是开灯状态才可以开黄灯light.src="l-purple.png";sw.src="switch-purple.png";purple.src="on-purple.png";purpleon = true;if(redon){redon = false;red.src="off-red.png";}if(blueon){blueon = false;blue.src="off-blue.png";}if(greenon){green.src="off-green.png";greenon = false;}if(yellow){yellow.src="off-yellow.png";yellowon = false;}}
}

my.css

body{background-image: url(bg.jpg);margin: 0px;background-repeat: no-repeat;background-size: 100% auto;
}
.light{width: 340px;height: 520px;margin: auto auto;
}
.light_btn{background-image: url(light_btm_bg.png);background-repeat: no-repeat;width: 366px;height: 212px;margin: auto auto;position: relative;top: -80px;/* 一直在前面 */z-index: 10;text-align: center;}
.light_btn img{margin-top: 30px;
}
.select{/* ? */width: 424px;overflow: hidden;margin: 0 auto;position: relative;top: -120px;z-index: 900;
}
li{float: left;width: 64px;height: 66px;margin-right: 20px;
}
ul{margin: 0px;padding: 0px;list-style-type: none;
}

Java Web

第二周-第一天上午

1、B/S开发模型

• 静态网页的局限性。
• 动态页面是更改的时候只需要改数据库即可，页面显示的都是变量，而不是我们现在写的常量。

B：浏览器

S：服务器

优点：

• 1、客户端零维护（浏览器会自动进行维护，用户什么浏览器都可以使用）
• 2、成本低，只需要做服务器
• 3、安全性高，比C/S结构高，有web服务器和数据库进行连接，不对外包喽数据库的地址

劣势：

• 应用服务器负载过重

C/S：C：客户端，S：服务器

2、HTTP协议

B/S开发技术是基于Internet的产物

我们使用的是基于jsp的效果

3、TomCat

MacOS下安装Tomcat

配置完成后

将项目复制到webapps目录下

在地址栏输入对应的地址即可