页面头部制作

outline: none;//去除轮廓线

Flex布局教程：

https://www.runoob.com/w3cnote/flex-grammar.html

摘要：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

点击触发事件

.head .line2 .search input:focus{
background-position: 0 1px;
}

.head .line2 .search input:focus+span{
background-position: -453px -46px;
}