适用于单独制作移动端页面 - (百分比+float)

介绍 & 要求

image.png

案例 - 京东

初始化样式

image.png

头部

百分比布置头部li左浮动 形成一行
image.png

导航栏

整体做法 : 左右两个盒子绝对定位, 中间放置一个标准流盒子不给宽度,给左右margin ,body宽度 100%
中间搜索做法: 都是绝对定位 - JD图标,伪类做竖线,放大镜是二倍精灵图做法如下
image.png

image.png

图标导航栏

width:20%
image.png

图片导航栏

三个链接占了100%宽度,加border-left会掉下来
image.png