发表于： 2019-08-21 16:13:43

1 643

Task1任务总结：

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task1/Task01.html
展示 https://814885760lp.github.io/jnshu/Task1/Task01.html

任务耗时：本次任务从2019/07/11-2019/07/12 共耗时2天

技能脑图：

官方脑图

个人脑图：

任务小结：

1.0基础完成任务一，开始还是很困难的，首先需要了解html的各种标签，学会使用方法

2.最主要的是CSS这一块的学习，CSS的样式分为三种，但是现阶段推荐使用的是外联CSS，因为可以实现代码的复用，提高效率。

CSS选择器这一块也需要深入的了解，因为CSS样式中使用较为频繁。

3.元素的三大类的特点要记住，行内元素是可以和其他元素共处一行，没有宽度高度和边距的；块状元素是独占一行，宽度高度和边距

可以设置的，如果宽度没有设置那么就是父元素宽度的100%

4.自适应是因为百分比存在的缘故，才能达到自适应

5.浮动float的了解需要非常深入，接下来的学习才能不那么困难，关于浮动，记住以下知识点：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边；

如果一行放不下这两个元素，那么A元素会被挤到下一行；

如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

Task2任务总结：

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task1/Task01.html
展示 https://814885760lp.github.io/jnshu/Task1/Task01.html

任务耗时：本次任务从2019/07/13-2019/07/14 共耗时2天

技能脑图：

官方脑图：

个人脑图：

任务小结：

任务二主要是学会使用开发工具，主要是使用git上传文件到github，步骤如下：

1.新建一个文件夹用来存储代码文件

2.文件内空白处右键点击 Git Bash Here 进入git窗口

3.在git窗口输入 git init，让该目录编程一个git可以管理的仓库，此时文件夹内会生成一个.git文件夹。

注意：这个.git文件夹默认是隐藏的，需要设置为可见才能看得到，方法如下

4.在新建文件夹内git窗口输入touch test.html 新建测试文件test.html，也可以自己将需要上传的文件放进来，输入 ls 可用于查看当前目录下文件

5.如下图是git向本地仓库中添加文件的流程

>>在git窗口输入git status 可查看当前文件状态，初始状态如下

>>在git窗口输入 git add test.html ,此时test文件会传送到暂存区，

此时输入 git status 显示如下窗口则说明test文件成功传送暂存区

>>在git窗口输入 git commit -m '描述信息',此时文件会传送到本地仓

输入 git status 显示nothing to commit, working tree clean说明传送本地仓库成功

6.如下图是git从本地仓库向远程仓库(GitHub)传送文件的流程

>>本地仓库向GitHub传送文件，本地仓与远程仓需要关联，查看是否关联命令为 git remote -v，

新建的文件夹都是没有关联的，显示如下

>>git窗口输入git remote add origin git@github.com:账户名/仓库名.git 关联到远程仓库

git窗口输入 git remote -v 查询是否关联成功,如下则便是关联成功

>>git窗口输入 git push -u origin master 将本地库内容push到远程库，如下表示push成功

（-u ：表示本地分支将建立对远程仓库目标分支的检测，如果远程仓库目标分支不存在，将新建分支再push；

如果存在，将进行push更新。）(第一次加 -u)

登录github查看是否接受到文件test，如下图已成功push

>>注意：如果远程仓库内本身存有文件不为空，则需要在上一步之前(即本地仓库push到远程仓库)，

在git窗口输入 git pull --rebase origin master 获取远程仓库与本地仓库的同步(第一次需要同步)，同步之后在进行push操作

>>以后修改完代码在Git Bash中执行第5第6步，然后输入git push origin master 即可将本地代推送至GitHub服务器端

--------------------------------------以上就是git使用步骤-----------------------------------------------

Task3任务总结：

任务名称：CSS-Task3

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task3/Task03.html
展示 https://814885760lp.github.io/jnshu/Task3/Task03.html

任务耗时：本次任务从2019/07/15-2019/07/16 共耗时2天

技能脑图：

官方脑图：

个人脑图：

任务小结：

1.在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

举例：

2.viewport参数的设置，开始不知道什么意思设置错了，导致模拟手机店端访问界面特别小，

以下是参数解读：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

3.此任务需要理解元素的分类

块状元素和行内块状元素的区别：

块状元素的特点是独占一行，且能设置宽度高度以及边距，块状元素若不设置宽度，则宽度默认是其父元素的100%;

行内块状元素的特点是和其他元素共处一行，且能设置宽度高度以及边距；

Task4任务总结：

任务名称：CSS-Task4

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task4/Task04.html
展示 https://814885760lp.github.io/jnshu/Task4/Task04.html

任务耗时：本次任务从2019/07/17-2019/07/19 共耗时3天

技能脑图：

官方脑图：

个人脑图：

四大定位的小结如下：

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

Task5任务总结：

任务名称：CSS-Task5

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task5/Task05.html
展示 https://814885760lp.github.io/jnshu/Task5/Task05.html

任务耗时：本次任务从2019/07/20-2019/07/23 共耗时3天

技能脑图：

官方脑图：

个人脑图：

任务小结：

1.用css画 ">"

开始以为”<“符号可以直接在文本框中输入，后来只要输入就会报错，因为它会和div标签中的”<“匹配导致出错，后来又想着用切图的方式插入图片进来，但是最终选择的是用css来画出来，开始怎么都想不明白怎么可以画出来这个，后来百度后恍然大悟，原来还是利用盒子模型

其实箭头是一个盒子模型的两条border

之后将盒子旋转一定角度，就可以达到>的效果，以下是代码，，其中transform就是角度转换作用

.text1{
border-top: 2px solid;
border-right: 2px solid;
width: 10px;
height: 10px;
border-color: rgb(248, 248, 248);
transform: rotate(-135deg);
margin: 15px 0 0 15px;
float: left;

2.弹性盒子的使用

justify-content：规定子元素在容器内水平方向上的对齐方式

　　flex-start：默认左对齐

　　flex-end: 右对齐

　　center：居中对齐

　　space-between：均匀分布对齐贴合容器

　　space-around：均匀分布对齐均匀距离容器

align-items：规定子元素在容器内纵轴上的对齐方式

　　flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

　　flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

　　center：弹性盒子元素在该行的侧轴（纵轴）上居中对齐

　　baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐

　　stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max- width/height'属性的限制

flex-wrap：规定子元素在容器内换行方式

nowrap：默认不换行

　　wrap: 换行

　　wrap-reverse：换行逆序

Task6任务总结：

任务名称：CSS-Task6

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task6/Task06.html
展示 https://814885760lp.github.io/jnshu/Task6/Task06.html

任务耗时：本次任务从2019/07/24-2019/07/26 共耗时4天

技能脑图：

官方脑图：

个人脑图：

任务小结：

1.bootstrap下拉框的使用

目前无法理解bootstrap的使用原理，暂时也无需理解，直接按照格式使用，使用过程中有两点记住：

》在盒子模型class取名中可以class多个css样式

》!important具有优先级的作用

以下是bootstrap下拉框的使用模板

2.雪碧图的使用

使用雪碧图的优点有以下几点：

将多张图片合并到一张图片中，可以减小图片的总大小将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

雪碧图的制作与使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片

3.溢出的文字隐藏

word-break

自动换行，针对单词使用

normal ：使用浏览器默认的换行规则

break-all ：允许在单词内换行

keep-all ：只能在半角空格或者连字符处( - )处换行

white-space

normal ：默认处理方式

nowrap ：强制在同一行内显示所有文本，知道文本结束或者 <br>换行标签对象才换行

text-overflow

text-overflow : clip /ellipsis

设置或检索是否使用一个省略标记 (...) 表示对象内文本的溢出

clip ：不显示省略标记（...) ,而是简单的裁切

ellipsis ：当对象内文本溢出时显示省略标记 (...)

注意：使用前提是先强制一行内显示（white-space：nowrap），以及同时搭配overflow：hidden使用

Task7任务总结：

任务名称：CSS-Task7

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task7/Task07-1.html
展示 https://814885760lp.github.io/jnshu/Task7/Task07.html

任务耗时：本次任务从2019/07/28-2019/07/30 共耗时3天

技能脑图：

官方脑图：

个人脑图：

任务小结：

背景半透明

实现原理：background-color：rgba（r,g,b,透明程度0-1）

box-sizing: border-box

今天在使用固定定位固定头部和底部盒子的时候，使用width：100%加上padding后，出现图标往页面外挪的现象,经过师兄指点后添加

box-sizing: border-box;完美解决

Task8-9任务总结：

任务名称：CSS-Task8-9

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task8/Task08-1.html
展示 https://814885760lp.github.io/jnshu/Task8/Task08.html

任务耗时：本次任务从2019/07/31-2019/08/7 共耗时8天

技能脑图：

官方脑图：

个人脑图：

任务小结：

1.锚定位的学习

般一个复杂的页面都会有标题栏，有时页面内容太多，我们一直往下翻比较麻烦，但是使用锚定位可以很好的解决这个问题

以下是锚定位的使用：

（1）超链接用的最多，但是超链接中锚点也是被用的较多的一个功能。

>>>>先需要被跳转到的地方放一个锚点。锚点其实也是一个a标签，只是这个a标签没有href属性，只有name属性，这个name属性就是它的标识，别人要跳转过来，就是按照这个标识。

>>>>然后点击超链接的地方，写这个锚点即可，前面是#符号。

>>>>这也是我们在很多时候发现网址后面会有#ad之类的符号，如：http://www.36kr.com/p/219420.html#ad，这里的#就是一个锚点。

>>>>一般使用在活动页面中、常见问题页面中。

（2）发邮件的链接，使用的还是蛮多的，很多网站都有。但是貌似直接点击的人很少。一般都是复制这个邮件地址，然后打开自己的邮箱写邮件，而不是直接点击。

注意：一般a标签使用后字体颜色会发生改变，如果想要改变颜色，可以在a标签内用style添加color属性。

Task10任务总结：

任务名称：CSS-Task6

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task10/Task10.html
展示 https://814885760lp.github.io/jnshu/Task10/Task10.html

任务耗时：本次任务从2019/08/8-2019/08/14 共耗时7天

技能脑图：

官方脑图：

个人脑图：

任务小结：

before和after伪元素：

使用CSS伪元素，before and after 画出一个五角星

before 和 after 顾名思义其就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，所以你在浏览器查看元素上是看不到伪元素的HTML结果的。

还有一点与大家想象的不同的是，before和after 和父元素在一个线性空间内的，而是另一层元素盖在父元素上的。

在伪元素的样式上，可以使用content属性去指定元素的内容。如果设置为 '' 或是 None，那我们是看不到该元素的。默认去情况下伪元素是行内显示的，想让它呈现出不同的效果的话，就需要设置它为块显示。

Task11任务总结：

任务名称：CSS-Task11

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task11/Task11.html
展示 https://814885760lp.github.io/jnshu/Task11/Task11.html

任务耗时：本次任务从2019/08/16-2019/08/16 共耗时1天

技能脑图：

官方脑图：

个人脑图：

任务小结：

Task12任务总结：

任务名称：CSS-Task12

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task12/Task12-1/Task12-1.html
展示 https://814885760lp.github.io/jnshu/Task12/Task12-1/Task12-1.html

任务耗时：本次任务从2019/08/17-2019/08/18 共耗时2天

技能脑图：

官方脑图：

个人脑图：

任务小结：

input type=checkbox

在进行任务十的时候就使用到了 input和label for的组合使用，从那时候起就开始曲解了input的使用方法以及原理，经过师兄今天的指导，基本是明白了。之前一直以为label的作用是让点击按钮后能显示之前隐藏的东西，今天才知道这个是input本身的作用，input会生成一个单选点击框，但是我们一般都不会使用默认的单选框，可以使用-webkit-appearance: none; 去除默认样式，然后通过添加背景图或者自己写的方式来做自己需要的样式。当需要点击input按钮来显示之前隐藏的东西，使用 checked属性完成。如下例子，sidebar默认是消失不见的：

.menu-btn:checked+.sidebar {
display: block;
}