京东（百分比项目）

步骤

1.创建基本文件夹

2.首页引进css初始化文件 css首页样式 设置meta标签

为body设置基本的样式

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:#666;
    line-height:1.5;

}

header设置样式及填写内容（采用百分比）

注意

使用verticail-align:middle  可以让图片与文字对齐

搜索部分

----

注意：

   1. 分为三部分： search-bth    serch   search-login
   2.左右两侧采用固定布局  中间的部分不要给宽度。尽可能跟margin值
   3.尽量采用伪元素选择器创建标签
   

二倍精灵图的做法

清除浮动的常见技巧

浮动技巧：https://segmentfault.com/a/11...

图片格式

源码地址

源码：链接：pan.baidu.com/s/18Il64kJA…