今天完成的事：基本把任务13重新写了一遍；差个侧边栏菜单和轮播图就可以了；

明天要完成的事：通过任务13；以及稍微接触一下任务14；主要精力还是对自己的公共样式；以及任务13的修改

感觉自己的代码量还是有点多；注意js的部分和css的一些理论；

难题：看到侧边栏的时候；有点意外，因为整个html都进行了移动；有点难以接受；

后面想了一下图片中header也移动了，说明是直接出想在左侧且整个html的都进行了缩减（阉割）；

用input加ul做菜单栏 lable做按钮当lable被触发时；input显示且html宽度进行变化；

前面都还好；input出现容易html宽度出现变化难；要在整个body下面建一个div；

display：flex；  body里原来的头部内容为不变；

只是宽度改为flex：1；（并给予最小宽度;不一定需要）

菜单栏则定死宽度；并且不触发是宽度为零；或者不触发display：none；触发diplay：flex；or display：block；

有点想偷懒直接拿之前任务九写的用算了；结果又关联错了；呜呜

还是需要多练习；不过已经大概掌握怎么去写整体方向；小的细节还是不够；

师兄帮我找到了问题；天天被关联卡；我太难了 用input和lable一定要注意关联问题；有毒；

侧边栏到是写出来了不过代码量大不说；还很容易错；我写一个页面和写一个左侧菜单栏一个菜单栏要多3分之1到4分之1的css代码量。有点亏；还差个轮播图；师兄让我下个任务在写；

收获：

input和lable相互关联；一个input可以关联几个lable；

关联要注意一定小心；

什么是组件，组件和模块有什么区别

1、组件，模块：
相同：都是基于功能划分的单位。比如说完成网络功能的组件、模块、完成统计功能的组件、模块； 这二者没有上下级的包含关系，模块可以由多个组件构建，独立的组件也通常由多个模块实现。

组件和模块都可以使用面向对象的方法来实现，通过处理一定的对象，完成自身的功能。

从形态上来看，模块和组件都是相对稳定的代码的一种称呼。但是从实际的功能范围上来看，组件一般来说是实现某一种功能或者某一个功能的某一个细节的稳定的相对独立的类，而模块则至少有一个组件组成，也就是说模块的覆盖范围要比组件更大一些，它可能有多个组件组成，甚至除了组件之外还有很多相对稳定但并不会提供独立功能的代码一起来构成。
这就是两者的差别。

（没太看懂组件就像是我今天写的左侧菜单或者是菜单里的选项；模块则是这个页面或者中间那个轮播图；各有各的用处；不过组件重在复用；模块也复用不过更多的是有针对性的一种组合毕竟也可以由组件拼成）

看了一下nec的命名规则：

CSS文件的分类和引用顺序

通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。

我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。

1. 公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
2. 特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
3. 皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。
4. <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>
5. （这好像不用理解但是要死记）

6. CSS内部的分类及其顺序

   重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！

   统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通

   
   

   用性较高的布局、模块、元件内的清除）等统一设置处理的样式！

   布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

   
   

   模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！

   
   

   元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

   
   

   功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！

   
   

   皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！

   
   

   状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。

   （就是一些（比如a 没有下划线的））

   功能类和皮肤类样式为表现化的样式，请不要滥用！以上顺序可以按需求适当调整。

   相同语义的不同类命名

   方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。

   其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

   模块和元件的扩展类的命名方法

   当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。

   方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。

   补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。

   如果你的扩展类是表示不同状态，那么你可以这样命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然后像这样使用：class="u-btn u-btn-dis"。

   如果你的网站可以不兼容IE6等浏览器，那么你标识状态的方法也可以采取独立状态分类（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然后像这样使用：class="u-btn z-dis"。

   （看的有点多；先去改下我的任务13；感觉确实要这么做）哇心态炸了；没保存日报没了；ctrl加z按多了

   js对之前14日日报的补充：

   http协议：就是合同；签了合同；就按着合同办事就有钱拿（就可以跟外界传输数据；访问别人的网页）

   端口：分为物理和软件；一般指软件：（简单来说你的电脑就是你家；端口就是门；只有开了们才能传输数据及接收数据；并且有的门是固定的有的门是随机的）

   路径：url （网络路径：出去访问的路；本地路径家里的走道楼梯；

   之前都看到过d盘c盘哪个文件那个是指本地路径；之前也说过你的电脑也能做服务器；服务器上存着资料跟你电脑上存资料很像；都是访问的路；路径就是详细的指标）

   呜呜不写了心态炸了；我的日报

   
   

   
   

   flex容器的属性：之前用过一个flex：1；就是拉伸并占剩下的全部宽度；

   4、项目的属性

   
   

       order：数字。

   该属性用来排列顺序，数值越小，越靠前，可以为负数，默认为0，数值相同时按照源码中的顺序排列。

   
   

       flex-grow：数字。

   项目的拉伸因子，当有剩余空间时，项目会根据各自的拉伸因子进行拉伸。默认为0（不拉伸），负值无效。

   
   

       flex-shrink：数字。

   项目的缩小比例，默认为1，负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

   
   

       flex-basis：auto/content/宽度。

   指定了 flex 元素在主轴方向上的初始大小，默认为auto。

   
   

       flex：none。

   是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

   
   

       align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

   
   

   默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。