成果链接：https://qumra.github.io/task-css/task9/task-91.html
任务耗时： 9.11-9.12 1天
官方脑图
个人脑图：
任务总结：任务九是在任务八的基础上，改为响应式。通过这个任务，.对bootstrap这个框架，像里面的css样式，组件熟悉了不少，看了它的栅格系统，媒体查询等知识。
觉得自己还是比较搞不清的是自适应和响应式的区别，以及分辨率和像素的关系。
发表于： 2018-09-14 22:13:53
1 796
今天完成的事情：今天开始做任务11，因为是之前的任务，布局什么的没有问题，主要是在用sass写媒体查询的时候稍卡了一下，后面百度到了解决方案。
2.看了css架构的一些知识，打算用到后面的任务里。
明天计划的事情：明天开始任务12.
遇到的问题： sass转译出的css文件媒体查询达到分辨率条件不起作用，还是原来的css样式.经过师兄的检查，发现是我sass媒体查询的语法写作错了，这个问题完全是粗心造成的，下次注意。
收获：
sass的高级用法：
1 条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2 循环语句
SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
css架构：
1.css重置
2.通用css样式库
3.网站css样式库
4 网站所有的css sprite合并项
5网站通用小图标样式集
6网站通用组件样式
7网站公共结构样式
8单页面的精细结构
返回列表
评论