淘宝静态页面（四）——头部搜索+导航栏

day3
快到3.8妇女节了。淘宝网的页面可能又会发生改变，所以得加快一点速度了！

1. 关于头部搜索部分，这其实应用了三栏布局，按左右中顺序排布，一左浮动，一右浮动。

2. 以图换字就是加个背景图片，把字移到一个夸张的位置，有多种的实现方式textindex:-9999px;overflow:hidden;
   cursor: pointer;鼠标移动到他身上是个小手；

3. 叠在一起用定位
   position: absolute:
   相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果没有则相对文档进行定位,脱离原来位置进行定位，跑到上一层
   position: relative;
   保留原来位置进行定位，不能让其他元素占领，但也是跑到上一层去了
   相对于原来自身的位置进行相对定位

4. border-radius: 6px 6px 0 0;加圆角的顺序为左上 右上 左下 右下

5. 设置渐变效果的两种方式，filter滤镜是为了兼容ie9以下
   background-image: linear-gradient(to right, #ff9000, #ff5000); 第一个参数默认为向下
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=’#ffff9000’, endColorstr=’#ffff5000’, GradientType=1);

6. 两侧是浮动元素，img文字环绕效果，height容易跟着旁边的浮动元素走,所以给他一个height;
   outline: none;消除轮廓

7. /* 为了能看到后面的文字 */
   background-color: transparent;透明属性
   vertical-align: 1px;一般用于调整小图标与文字的对齐
   最后附上代码：
   
   
   
   
   
   
   
   导航栏相对简单，但在爬虫时比较重要，所以就不把他放到首屏内容里面了。其中涉及到bfc的问题需要巩固，还有未知宽度的求法 width:calc(100% - 190px)运算符号前后必须有空格 IE9+支持
   margin-left:190px;
   overflow:hidden触发bfc高度一有，背景就出来
   代码：