[无名弟子]JS-桂梦|2019年02月15日的日报-技能树.IT修真院

发表于： 2019-02-15 21:21:53

1 912

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

年后的第一天要好好学习。。。

1、把css任务14-15页面的所有页面修整提交。

基本上都是细节上的问题。

主页发现一个问题，当屏幕px值在950px一下，按照栅格系统的设置分布，这里应该是50%的分布，但是出现了一个问题，下面一个盒子没有像左浮动，原因是第一个col的盒子下面多出来一块，所以导致第三个col盒子不能左浮动，看上去我以为是宽度的问题，其实是浮动的问题，解决方案：给盒子定高就可以了。

现象图：

还有一个当时重写第三个页面的时候出现的一个问题，如图：

这里应该有一个间隙，后面发现是给设了width：100%，把最外层的div的width设成80%，就解决了这个问题。

2、开始js任务一的知识了解。

开始学习js第一步：

一、了解js是如何运行的。javascript脚本的编写必须在HTML或者XHTML文件中执行。

有两种方法：

第一种：是把javascript放在<head>标签文档中的<script>标签之间；

如：

这是一种方法；

第二种方法：

是把javascript脚本另存一个文件中，改成扩展名为.js的独立文件。

做法为：在<head>中放入一个<script>标签，并用src=“”属性指向该文件的路径。

如：

但是这样做最好是把<script>标签放在HTML文档最后，</body>结束标签之前；

如：

这样做的原因是为了更快的加载页面。

注意：1、HTML中可以无限量的放入javascript。

2、javascript可以同时在<head>和<body>中同时存在。

二、了解javascript的语法：

1、javascript语句（statement）：要求不严格，只需要简单的把各条语句放在不同的行上就可以分隔开。但是每句末尾建议加上；分号，这是一个良好的编程习惯。

如：多条语句放同一行用分号隔开：first statement；second statement；

first statement；

second statement；

这样做的原因是为了让代码更容易阅读，也能更容易跟踪javascript脚本执行的顺序。

2、注释（comment）：注释是为了能有效的帮助了解代码流程，了解代码在其中的角色作用，可以帮助了解代码在干什么。

有两种方法：

“//”这个是代表注释开始行，这一行就会被当做一条注释。

想要多条注释就必须每条开始前面都加上“//”。

如：

//自我提醒：有注释是件好事

//自我提醒：

//有注释是件好事

或者使用/*，*/也是可以多条注释的。

如：

/*自我提醒：

有注释是件好事*/

这种方法的注释适用于大量大段的时候，可以提高整个脚本的可读性。

3、变量（variable）：会发生变化的东西称为“变量”。

假如设置一个变量名为mood，它的值可以设置happy或者sad，但是它的mood名是不变的，值可以随时改变。

把值存入变量的操作称为“赋值（assignment）”。

在javascript中可以这样给变量赋值：

如：mood=“happy”；

age=33；

注意：在javascript中允许不用给变量赋值声明，赋值将自动声明该变量。但这在其他的程序语言中是不允许的。

（2）声明：提前声明

4、常量（const）同时也是关键字。

常量可以储存值，但是初始化后值不能再改变。

const也是可以声明多个常量。

注意：代表明确数字或字符串的常量名都应该由大写字母组成，并用下划线间隔多个单词，便于区分。

如：

const ROOM_TEMP_C=21.5;

注意：变量和常量优先使用“常量”。

明天计划的事情：（一定要写非常细致的内容）

看完师兄给我圈出的js基本的知识点。

遇到的问题：（遇到什么困难，怎么解决的）

暂时还没有遇到
收获：（通过今天的学习，学到了什么知识）

javascript运行的方法，以及语法中的注释、变量、常量以及声明的方法。

任务总结：

任务名称：CSS-task14-15

成果链接： https://guilinxi.github.io/GUI/item-css/task14-15/task14.html

任务耗时：本次任务从19.1.11–19.2.15 总计用时7天，中间有春节期间还有电脑丢失重写的时间。

官方脑图：

个人脑图：

任务总结：

任务14、15其实是代码重构，主要学习的重点知识就是怎么自己编写栅格布局和轮播图的制作原理。之前是学习怎么引用bootstrap这个库，现在是要去把这个库里的栅格自己写出来并了解其原理。因为前面学习的知识，在这个任务里需要全部运用进去，像通过less编辑器去优化代码，使代码更好的阅读，还有一些基础样式可以单独建一个公共文件，再通过外联的方式引入，这也是方便自己，让每个功能的代码都分离开来，清楚明了。

这里我主要是把三个页面相同的功能模块化，像栅格系统的布局、导航栏、还有轮播图我都是单独写的一个文件，需要用到的地方就嵌入进去就可以了。

理清楚思路后写起来就比较容易了，主要的难点就是栅格的编写、还有轮播图的制作。栅格系统分离开也就四个重点：

一、首先建立一个容器container。给它设置一个宽度，这里就是放所有的样式以及html框架。

二、一个页面需要分成每一行row，这样是防止其他列影响到这一行，就是各自占据各自的位置。

三、一行需要分成12列column，这样是为了让写的样式能适应在不同列下的屏幕宽度。

四、就是需要运用到媒体查询，给每一列col的屏幕尺寸大小定宽。

设置容器的宽度。

.container {

width: 90%;
margin-left: auto;
margin-right: auto;
}

这里row需要用伪类::after来清除浮动

.row::after,
.row::after {
display: block;
content: " ";
height:0;
clear: both;
}

还有一个重点就是需要用到选择器

[class*=”col-“]
选择所有类名中含有”col-“的元素

这里是我们在写class类名时，让所有含有col-的元素它的样式能起到作用，这里是栅格布局的一个关键。

这个是用媒体查询定义在2000px以下，每一列的宽度，如：

@media screen and (max-width:2000px) {
.col-lg-2-1 {
width: 20%;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
}

col-lg、col-md、col-sm分别是代表1170px以下、970px以下、750px以下。当然这些数值也不是很清楚怎么算出来的，width是直接复制粘贴的。

这样整个栅格布局基本上就出来了，就可以开始写HTML框架和css样式了。

轮播图其实原理也很简单。主要是运用到的几个属性；

animation-name是绑定@keyframe关键帧的关键。

这两者必须同时使用。

animation的动画属性：几个需要用到的属性：

1、animation-duration：time。规定完成动画所花费的时间

2、animation-iteration-count：infinite；规定动画应播放的次数可以无限循环。

3、animation-direction：normal。规定正常播放动画。

4、animation-timing-function：linear。规定动画的匀速曲线完成一个周期。

5.animation-delay：time。规定在动画开始之前的延迟。因为每张图片延迟的时间不一样，需要计算每张图片延迟的时间来达到轮播动画的图片层次感，所以要处理好每张图片关键帧的延迟时间。

图片的位置需要用到绝对定位来固定轮播图片的位置。

这个是轮播图的html的框架：

用name绑定关键帧：

@keyframes fade {
0% {
opacity: 0;
z-index: 2;
}
5% {
opacity: 1;
z-index: 1;
}
20% {
opacity: 1;
z-index: 1;
}
25% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}