发表于： 2019-12-27 22:42:08
1 1270
今天完成的事情
1.总结
Css1 css2
知识点
Html标签：各标签的意思作用
<!DOCTYPE> 定义文档类型。
<body> 定义文档的主体
<h1> to <h6> 标题
<div> s一个区域部分 等等
Css：css内外联，放置的位置
Css选择器，id选择器、类选择器、标签选择器
Css样式，通过css样式渲染出自己需要的静态效果
比如任务1涉及到的九宫格宽高、颜色、外边距、浮动：浮动的框可以向左或向右移动、它不再处于文档流中，它不占据空间
标准盒子模型（内边距占宽度）、ie盒子模型（内边距不占位子）
Git 次的基本用法 github 它 svn
难点
如何保持九宫格
环境搭建
Css3
知识点
单位，px、rem、em、vw、wh、vh、% em相对于父元素，rem相对于根元素 更适用于响应式布局。
学习ps软件：切图、取色、测量距离宽高。
为了让手机也能获得良好的网页浏览体验 viewport视觉窗口 代码
难点
巩固任务1的浮动、盒子模型、
Css4
知识点
定位：绝对定位：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。（绝对定位的元素框从文档流完全删除）
相对定位：它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。（元素仍然占据原来的空间）
固定定位：相对与试图窗口而定位，不会随着上下滑动而改变
初始表单：input 默认类型
难点
常见的表单元素有哪些，当时理解不了更改类型，变换其他单选复选元素
理解定位
Css5
知识点
开始学习flex弹性布局，没学之前，布局基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
原理：设置flex弹性属性后，它的所有子元素自动成为容器成员。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），通过弹性布局的六个属性
代码规范：缩进、行长度、特殊符号两边空格。代码规范的必要性，规范的代码方便修改代码，规范的代码可以减少bug处理
难点
理解flex弹性盒子
Css6
知识点
雪碧图的学习使用，通过PS软件切图，网上有很多在线制作雪碧图的网址，导入切出来的图，会自动生成一张雪碧图，自动生成各图片所在位置的选择器代码。好处，提高响应速度，减少代码量，坏处，不好维护。
bootstrap框架的学习使用：简洁、直观的前端开发框架，让web开发更迅速、简单。从中第一次了解到cdn npm的一些下载引入方式，综合官网文档选择组件使用，效果不满意通过自行设置选择器代码引入。
难点
Css7
知识点
桌游精灵 三个页面 通过以前的知识点布局，从而去巩固前面的知识，从中学习到新标签。
这个任务包括了三个静态页面，很多细节的处理都能学到很多知识点
从中设计的到新标签
音频自动播放
半透明 通过0-1设置透明度，举例0.5=50%
页面跳转 a标签
Hover选择器，选择鼠标指针浮动在其上的元素，并设置其样式：
Css8-9
任务主要继续使用框架的栅格系统 、轮播图、导航栏，轮播图就是去了解一下原理，把需要的图片放进去。
媒体查询；任务89引进了一个响应式的概念，媒体查询。用于一些页面缩放，比如页面缩小到900px，内容中一些排序和盒子的大小会展示得有些变扭。这时就用上媒体查询，当小于900px的时候，父元素会改变一些排序，或者其元素改动为一些样式，从而在小像素时展示出页面
过度属性。一般弄在一下按钮点击展示信息，不让信息框出现得那么生硬。
栅格系统；每行的一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变container容器的宽度，对应栅格宽度自然也跟着改变
重构任务89自己写了下导航栏。知识综合运用了一下
Css10
知识点
流程图
Input 其它类型的学习使用，单选框、复选框，自定义input单选框样式。一般使用单选按钮会搭配<label>雷柏 元素使用并将关联起来，可以为<label>元素添加生成伪元素，并基于单选按钮的状态来为其设置样式，并将真正的按钮隐藏
Css11-15
知识点
选择Sass来重构任务，很多内容，用得最多的是嵌套，宏属性。可以减少代码量，比如一些宽高是重复使用的话，可以定义个宏属性。减少代码量。
重构的话 主要是一些模块化组件化的使用，就像任务89，页眉页脚是相同的，可以单独此写一个模块，然后单独外联引入就可以了
2.重构任务6-10
主要是一些公共部分的整理。
明天计划的事情
重构好任务6-10
遇到的困难
vue的重构不同于js JQ 有些地方需要好好查查
收获
整理以往的知识点
返回列表
评论