软件园学生在线

  • {{ item.name }}
  • 2023试用期

登录与注册

【前端第二次培训】

  • 代莫言
  • 2022-10-23
  • 0

笔记

一，css盒模型

  • html对每个容器进行了定义。这些容器之间的排版是由css来定义的。

（1）一个容器包含Margin,Border,Padding,Content四个部分。

  1. content指的是你的真正的内容。

  2. border是盒子的边框

  3. padding是边框与你的内容之间的填充部分

  4. margin是盒子之间的间距。

（2）padding

画框与画之间的填充部分。

  • 两个值，分别表示上下和左右属性

  • 4个值，依次表示上右下左。

或者用padding-bottom padding-top padding-left padding-right设置。

（3）margin

用合适的间距将两个盒子分隔开

（4）border

盒子的边框，是margin和padding之间的部分。

  • border-style值 设置order样式

  • dotted: 定义一个点线边框

  • dashed: 定义一个虚线边框

  • solid: 定义实线边框

  • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

  • groove: 定义3D沟槽边框。效果取决于边框的颜色值

  • ridge: 定义3D脊边框。效果取决于边框的颜色值

  • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

  • outset: 定义一个3D突出边框。 效果取决于边框的颜色值

  • border-width值 设置border宽度

  • border-color 设置border颜色

  • border-radius 设置圆角

二，CSS布局

用css对容器进行布局。

（1）块级元素

一个块级元素在css中的display属性定义为block。

块级元素独占一行，当你定义一个新的块级元素的时候，他会新开一行。并且下一个同级元素也会新开一行。跨级元素的宽度是父容器的宽度。

（2） 内联元素

一个内联元素在css中的display属性定义为inline。

内联元素会排列在一行内，其高度和上下边距不可变。

（3）行内块状元素

块级元素一般用于整个网页大的定位。内联元素用于行内容器的定位。

可以发现块级元素和内联元素都有一定的缺陷。跨级元素不能在同一行内。而内联元素由不能设置高度和边距。

如果想把容易横向排列，同时又想设置他的高度，可以使用行内块状元素，把他的display定义为：inline-block

这样这个容器会与前面的容器排列在同一行中，并且你可以定义此容器的高度和边距。

（4）float

设置容器的float属性会让容器浮于标准流上面，这个也可以用于让两个块级元素并列排放。但是要注意这个脱离了标准流。

float:left\right会让你的元素从左（右）开始一个一个排列。

（5）弹性盒子

在CSS3中引入了弹性盒子的概念。弹性盒子在布局上更加自然方便。

三，js初步

赋值

在js中对于变量的定义是弱定义的，可以使用let var对于新建的变量进行声明，建议使用let。

const用于声明常量。

object

除了常见的基本数据类型，js中还经常需要使用object对象类型。

可以使用.运算符取出对象中的特定元素。

除了object外，还有数组，函数。这三种数据类型在赋值时赋值的都是地址，后续对于其修改都会影响其所有引用的值。

函数

js中的函数一般通过用户的特定的动作触发。

与css类似，js可以写在html的``标签内，也可以写成一个单独的文件，然后html对其进行引用。

  • 当你把语句写到函数外面时，就会在网页启动时自动执行这些语句。

循环语句

循环是计算机最基本的艺能。
js的循环语句写法与java类似。

控制语句

在js函数里，你可以使用if else来控制函数的走向。

在if后面的括号里写一个bool表达式，只有真假两个值，当bool表达式的值为真时，就会执行if语句块，否则就会执行else语句块。

可以只有if没有else，每个if与一个else配对，if可以嵌套。

input标签

input标签可以供用户输入信息。

在js中有两种方法可以获取input中用户填入的值。

  1. 把input放到form标签下，然后直接通过formname.inputname.value获取

  2. 通过id获取。使用doucument.getElementById(inputId).value获取。

API

有一些js已经为你写好的函数，你直接调用就可以使用他们的功能。

比如弹出警告窗windows.alert()

在控制台打印信息console.log()

用到的时候自行百度即可。

Dom树

html标签是可以嵌套的，这种嵌套关系使他们构成了一个树形结构。这就是Dom树，每个标签都挂在dom树上。

你可以通过document.getElementById从dom树上获取特定id的元素，

doucument.getElementByClass可以获得class为特定值的元素列表。

innerHTML

你可以使用innerHTML获取某个标签中的内容。

使用getEmementById可以从dom树上获取这一元素。

然后调用某个元素的innerHTML就可以获取他的内容了。

同时，你也可以设置他的innerHTML。

如果我只是想往这个容器里添加sent这部分内容只要这样写就好了(提交4)

document.getElementById("ShowShowWay").innerHTML =
  document.getElementById("ShowShowWay").innerHTML + sent;

一些问题和解决

  1. 给网页加背景的方法

  2. 一开始想要引用打印在控制台上的数字失败：关于次数计分数的问题

    • 解决办法是不打印在控制台，换成计数的函数显示在屏幕上，分数由猜数的次数控制

  3. 生成随机数的方法：用函数（在教程里看到一个和线下培训里教的不一样的方法就用了）

  4. 有时候运行不起来，在控制台报错

    • 解决办法，改编函数的顺序

  5. 想同时执行两个指令，但是按一开始的方法要按两个按钮；且一个按钮不能同时执行两个指令

    • 解决办法是把两个函数合到一个函数里，用一个按钮执行函数

  6. 出现不论输入的数字是多少都显示偏小的情况，尚未解决（困扰我最久的问题，后面重新写了一个）

  7. 点击按钮出发函数之前尝试过除alert之外的函数（是从网上找的教程），后面失败了，看着代码没有弄懂运行的逻辑

  8. 第二个交换的游戏好像要用到循环的函数，但是我想不清楚思路，暂且用我那个代替（表面上看没什么问题至少）

  9. 在控制台报错：说某一个元素未定义

    • 原因是花括号打错位置，元素没有在函数的花括号里面（肉眼有时候真的很难看出来）
代莫言
代莫言
© 2024 软件园学生在线
Theme by Wing