目录

• 一、学习内容
  • css盒模型
  • css布局
  • js初步
• 二、作业内容
• 三、感想

学习内容

1.css盒模型

padding：边框与内容之间的填充部分，一个值设定四个方向，两个值对应上下、左右，或分别
padding-bottom padding-top padding-left padding-right

margin:用合适的间距将两个盒子分开
border：盒子的边框

box-sizing:border-box;<!--盒子属性-->
width:400px;
height:300px;<!--border + padding + 内容-->
border-style: double;
border-width: 6px;
border-color: rgb(175, 145, 201);<!--边框属性-->
background-color: bisque;
padding:85px;
margin-top:150px;
margin-left:550px;

2.css布局

块级元素：一个块级元素独占一行 display:block
内联元素：排列在一行内，其高度和上下边距不可变 display:inline
行内块状元素：横向排列同时设置高度 display:inline-block

float：让容器浮于标准流上面，也可用于让两个块级元素并列排放（脱离了标准流） float:left\right

3.js初步

赋值：可以用 let var 对新建的变量进行声明；const 用于声明常量
object：可以使用 . 运算符取出对象中的特定元素。
函数：js可以写在html的 script标签内

function frame(){
    console.log("这是一个函数")
}

当语句写在函数外面时，在网页启动时自动执行语句
循环语句：与java类似
控制语句：用if else控制函数的走向
input 标签：两种获取用户输入值的办法
①input放到form标签下，直接通过formname.inputname.value获取
②通过id获取，document.getElementById(inputId).value获取
input的type类型：

<input type="text">
<input type="button">
<input type="password">

API：有一些已经写好的函数，可以直接调用
弹出警告窗：windows.alert()
在控制台打印信息：console.log()
Dom树
通过getElementById从Dom树上获取特定id的元素
document.getElementByClass可以获得class为特定值的元素列表

作业内容

Initially，做了一个可爱的小盒子用于放置内容
script部分参考了CSDN里面的做法，用
var text = document.querySelector("#text");与网页连接
内容小小整了点提示弹窗，与java中if循环相差无二
不过学到了重新开始游戏的做法~

re.onclick = function(){
        num = Math.floor(Math.random()*100)+1;//重新生成随机数
        a = 0;
        ci.innerHTML = a;
        result.innerHTML = "";
        text.value = "";
        score.innerHTML = "";
    }

感想

用户猜数部分做出来之后再去做电脑猜数就像打通了任督二脉，畅通无阻，这就是代码的魅力么QAQ，不过一下午都盯着电脑真的好累Orz
做完之后拿亲朋好友测试了一番，改了不少bug，找随机值技术疯狂加倍😎😎

（不知道什么情况，我的电脑右侧预览几乎没有渲染，但是发布那儿的预览显示又是正常的QAQ😢）

Xihan