今天完成的任务

a.任务14 2个页面的重新手写

b.拓展知识

明天的计划

a.任务14 第三个页面的编写

b.深度思考

遇到的问题

说一说重写卡到的地方:

第一个卡到的是这里，主要原因是因为手写栅格式的问题，col-md-3, col-sm-6等，因为你总不能每一个媒体查询就加上一些属性，就很不优雅！，悄咪咪的从师兄日报里进行学习(偷师？）然后发现了这个东西

简单来说就是这东西有3个属性

[class^="col-"]

选择所有类名中含有"col-"的元素

与此类似的还有：

[class^="col-"]

选择所有类名中以"col-"开头的元素

[class$="-col"]

选择所有类名中以"-col"结尾的元素

然后提到我准备的公用组件库里（本来轮播也放进去的，但是已经写好了，而且后面不用就没有放，明白是个什么意思就好）

然后一些细节的问题---这4个图标高度是不同的，所以需要自己调节，把设置在同一水平上，就舒服了（第二个的文本因为字

数少，跟着其他用左对齐也很吃藕，所以我推荐额外给个居中就好了）

第二个在这里

鬼知道我前面怎么想的，开始做的时候想做边框效果又不想影响背景色，就套成了5个div然后排列在一起，然后发现有额外间距（间距之间露出了背景色很丑）如果是无缝的width:20%又会被挤到下一行（因为有边框），为了解决这个问题，甚至用了flex;后来恍然大悟，再外面套了给width：100%的长方形Div，然后给背景色，就完美解决了（所以说，有的嵌套不能省~捂脸)

第三个

经过前面坑的温习，这里思路就清晰很多，<a>标签外面有个<li>然后 li又分成2个<ul>（这样好布局点），前置准备做好了，下面就是直接用flex；来搞定，

换行的重点主要是：flex-wrap: wrap属性，不然你换的时候布局会错乱的。

第二个页面没有什么卡住的，不过有一些需要注意的地方

第一个就是这个hover的属性， 我是先设置一个父元素的hover，点击之后字体换色，然后在 &:hove .button(子元素类名） 来再次设置父元素hover的

时候子元素跟着有一个Hover效果，即背景色变色。

说的不是太清楚，直接上代码

html:

sacc:

这样就很清楚了。

然后还有注意个

这个，我是直接父元素嵌套一个子元素做Logo，然后直接写文本，不然的话分成2个盒子，他们就算是浮动环绕也不会有下面这种效果

也是老规矩，把代码贴出来，好理解一些：

这就是全部的2个页面的东西了。

收获

拓展知识：

设计原则

我们说模块是一个功能相对独立且完整的结构体，其实这应该是 组件 的概念，我们这里只从css的范围内来探讨模块化，那么模块的定义就可以缩窄到：一个（组）样式相对独立且完整的类。

原则上来讲，一个css模块应该遵循以下几点要求：

1.只对外暴露一个类名；

2.不影响周围布局：一般情况下，尽量不要使用一个脱离文档流的布局（既使用了float:left/right，position:absolute/fixed的布局），尽量不要使用外边距（margin）。这是为了使得模块更加稳定、具备更高的可塑性；

3.模块尽量设计为方便复用的量级，避免大而全，求精巧；

[class*="col-"]的3三种属性

[class*="col-"]

选择所有类名中含有"col-"的元素

与此类似的还有：

[class^="col-"]

选择所有类名中以"col-"开头的元素

[class$="-col"]

选择所有类名中以"-col"结尾的元素

ext-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。

基本语法

{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {

box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

PS:js看的有点朦胧，不是很理解，就把资料总结在我的记事本里，然后精简了一下放到了这里。先记着有给印象，到学Js的时候希望不要卡太久

JS是解释性程序设计语言，Web浏览器是解释器，负责有关代码解释执行

JS基础

statement之间“;”间隔，养成良好习惯

"//" 注释提高代码可读性

var variable = data 变量严格var声明

data类型,字符串，数值，布尔值，转义字符

数组variable = Array（data,data）或 variable = [data,data,...]

对象variable = Object(propertyName:value,propertyName:value) 或 variable = {propertyName:value,propertyName:value}

操作符 +,-,*,/,++,+=,%

JS语法

条件语句

if (condition){statement;} else if (condition) {statement} else{statement}

条件condition：比较：>,<,>=,<=,!==,===,逻辑操作符：&&与,||或

循环语句

while循环:initial condition;while(condition){statement; increment}

do while循环: initial condition;do {statement increment} while(condition)

for循环 for (initial condition; test condition; increment/alter condition

函数

function nameName(parameter){condition}

全局变量：函数外定义变量，局部变量，函数内定义变量

对象

对象Object，对象的属性：object.property 对象的方法object.method()

var 实例 = new 对象

DOM

D：document，从网页文件转化而来的文档对象

O：object，对象

M：Model,HTML树状模型

节点node，DOM中HTML树状模型的节点

• 元素节点：element node，HTML中的标签元素
• 文本节点：text node，HTML元素的文本内容
• 属性节点：attribute node，HTML元素的属性与属性值

元素的属性和内容是元素节点的子节点；元素的文本节点是该元素的第一个子节点

CSS：HTML元素的的层叠样式表，树状结构继承特性

标识元素属性

• Class，类标识符，标识某一类多个元素
• ID，独立标识符，标识某一个特定元素

获取元素

DOM方法

• Tagname: document.getElementsByTagName("tagname")得到一个数组包含对象 即使只有一个对象，也会返回数组
• class: document.getElementsByClass("class")；得到一个数组包含对象 即使只有一个对象，也会返回数组
• ID: document.getElementById("Id")；得到一个对象

元素节点的属性和方法

elementObject.getAttribute("attributeName") elementObject.setAttribute("attributeName",value) elementObject.childNodes：获取当前节点的所有子节点，返回数组 elementObject.firstChild/lastChild:获取当前节点的第一个或最后一个节点 elementObject.nodeType:获取当前节点的类型 元素节点1属性节点2文本节点3 elementObject.nodeValue：获取当前节点的内容

Event

事件处理函数，特定事件发生时调用JS代码；例如onmouseover/click...

语法Event = "js statements;js statements"

onclick="return false" 不触发a标签跳转事件

Event = functionName(this-当前标签元素)