module4-02-流式布局-京东项目

流式布局-京东项目

一、流式布局原理

1.1 流式布局（百分比布局）

• 流式布局就是百分比布局，也称非固定像素布局

• 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度进行伸缩

• 再移动web开发使用的比较常见

（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%

• 背景图片颜色线性渐变

  • mdn文档

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 总结

• 水平用流式

• 垂直用rem布局