完成的事情：

完成css任务14、15

计划的事情：

开始复盘项目？自查js技能，angular框架

问题：

小框架搭建的过程，其实就是个查漏补缺的过程。（参考bootstrap完成）

导航条应用简单的样式，图标和导航标签，在less中使用一个变量规定导航条高度，其他标签高度以此为参考乘以一定比例，加少量的px定值。导航标签依然使用ul标签完成，应用flex来进行布局，另添加如下class样式可实现靠左和靠右

.nav-right{

justify-content:flex-end;

}

.nav-left{

justify-content:flex-start;

}

媒体查询的按钮下拉功能相对复杂，似乎与js相关，故使用隐藏图标来完成。

参考bootstrap的栅架功能，

@rowWidth:8.3333%;

.row{

width:100%;

display:flex;

.col-md-1,.col-xs-1,.col-sm-1{

width:@rowWidth;

}

.col-md-2,.col-xs-2,.col-sm-2{

width:@rowWidth*2;

}

划分和规定栅格分布，在媒体查询中更新对应class宽度为100%即可完成换行。在使用栅架过程中，发现padding的设置会撑大栅格导致换行，搜索得知需要设置限定包括border以内为box大小属性，故有：

*{

margin:0;

padding:0;

-webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

至此，任务中的两大应用框架基本搭建完成，在应用上针对样式进行个性化修改。

但是对于一些行内非12相关数目的布局，还是需要另外制定，然后，其他参考之前的任务代码完成。

收获：

小框架搭建和使用