一、搜索栏制作
1、使用div、input、button确定html框架
2、使用弹性布局,字符图标确定大致形状
3、最后调整样式
思路最重要,先框架后排版最后样式
二、SASS预处理器
1、变量
例:
$fontcolor:green
div { color:$fontcolor }
方便后期进行统一修改。
如果要在字符串中引用变量,变量需要写在 #{ } 中
例:
$align:left
div{ border-#{$align}-color:green }
2、计算
+ - * /
6px + 10px
(100px / 2)
符号左右需加上“空格”,除法需在计算前后加上括号
3、嵌套
选择器嵌套和属性嵌套
div{
.class{
span{ }
}
}
div{
border{
color{}
weight{}
}
}
4、引用父元素&,这时候“hover”是紧跟在“a”后面的
.class{
a{
&:hover{ }
}
}