module4-02-流式布局-京东项目
一、流式布局原理
1.1 流式布局（百分比布局）
-
流式布局就是百分比布局，也称非固定像素布局
-
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度进行伸缩
-
（1）注意事项
-
制作过程中，需要定义页面的最大和最小支持宽度
-
max-width
-
min-width
二、京东移动端准备工作
-
①搭建相关文件夹结构，②设置<meta>，③引入初始样式normalize.css/base.css，④常用初始化样式（设置body）（特殊样式）
三、京东首页
3.1 tips区域布局
-
使用百分比定义tips的每一个宽度百分比，然后设置固定高度与行高，使用新增伪类选择器进行选择
-
vertical-align：middle
-
因为图片是特殊的文本，继承了父元素的行高，在小图片中看起来会已经居中但并不是，使用这个属性能更好的居中。
-
3.2 搜索框布局
-
类似于圣杯布局
-
两侧固定宽，绝对定位脱离标准流
-
中间使用margin把两边压缩
-
-
因为左右两侧高度固定所以一些小图标可以直接使用固定的margin值进行布局，可以使用伪元素进行边框填充
-
二倍精灵图做法
-
量取的尺寸与background-size都要缩小一半
-
3.3 焦点图布局
-
因为tips脱离标准流，所以要加margin-top来代替其区域
-
大椭圆背景
-
设置宽度为150%
-
利用定位加border-bottom-left-radiush和border-bottom-right-radius使其为100%
-
-
背景图片颜色线性渐变
-
3.4 滑动轮播图布局
-
利用定位进行实现轮播图（之前使用的是浮动），然后设置left值
-
注意ul的宽度，还有内外边距对子元素造成的影响
-
图片格式
-
DPG图片压缩技术（京东）
-
webp图片格式（谷歌）
-
3.5 优惠活动布局
-
div > a > img
-
利用a设置宽度33.33%，然后把子元素img的宽度设为父元素宽度的100%
3.6 导航布局
-
nav > div > a > img + span
-
有多个导航栏就设置浮动，第二个开始left为100%，以此类推
-
a与img设为auto，img可设置margin的左右为auto进行居中显示
3.7 新人专享
-
div > a > img
-
设置margin, 然后width为50%
3.8 总结
-
水平用流式
-
