1.移动端技术选型
方案：单独制作移动页面方案
布局：流式布局
2.搭建相关文件夹结构
其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从下载保存到相应位置。
images主要是放置背景图，upload主要是放置一些产品图片
3.设置视口标签以及引入初始化样式
4.整体html结构
5.分析页面布局
移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。
body初始化样式，
body必须先设置好，只有设置好了body后，才能写好里面的内容，body的宽度设置为100%后，里面的内容就默认和body一样宽了
5.1头部
html结构
css样式
首先将高度写死，然后将li设置浮动，水平居中和垂直居中，利用。app ul li:nth-child（n）对这4个部分的宽度设置百分比，li中的img需要缩放。
logo图片默认和文字的基线对齐，设置line-height是不能垂直居中的，还需要把图片在垂直方向上居中对齐，应该要加上vertical-align: middle;
5.2 搜索区域
html结构
css样式
左右是用定位实现，中间是自适应的。中间的盒子是一个标准流的盒子，盒子不设置宽度，默认与父级一样宽，父级是一个100%宽的盒子，父级盒子伸缩时，子盒子也跟着伸缩，最后将左右用margin设置，将两侧空出来
放大镜的图标用的是精灵图
二倍精灵图的做法：
在firework里面，把精灵图等比例缩放为原来的一半根据大小，测量坐标注意，代码里面background-size也要写： 精灵图原来宽度的一半不要保存firework里缩放的图，否则会修改原图
实现的效果如下：
搜索内容的部分，要设置的样式挺多的：
5.3 主体内容部分
首先先建一个大盒子，把下面的所有内容包起来，再来一块块划分内容。
5.3.1 轮播图
html结构
css样式
img插入的图片要进行缩放，让图片的宽度设置为100%
轮播图应该位于搜索的下面，将search部分包起来的盒子设置为固定定位，同时要设置min-width和max-width，宽度也要设置为100%
5.3.2 小家电品牌日部分
html结构
css样式
首先建一个大盒子，大盒子的高度不用设置，大盒子里面是3个大小相等的盒子，每个盒子各占33.33%，并且设置浮动。大盒子的左上角和右上角是小圆角，因此要设置 border-radius，我们将 border-radius写在了大盒子上，图片是没有变化的，要将图片也设置小圆角，在大盒子上设置 overflow: hidden;
同时要注意一点图片默认底部有空白缝隙，要在img上设置vertical-align: middle
5.3.3 移动端导航栏部分
首先建一个大盒子，大盒子的宽度、高度都不用设置，让内容自动撑开，一行上分为5个小块，每个各占20%，不设置高度，给它们设置浮动
html结构
css样式
5.3.4 新闻部分
首先设置一个大盒子，里面有3个链接，链接a中放img
html结构
css样式
利用 .news a:nth-child（n）设置这三个部分的宽度百分比，
。news a:nth-child（n+2） {
width: 25%;
}
是
。news a:nth-child（2），
。news a:nth-child（3），
{
width: 25%;
}
的简写形式，n+2就是从第二个开始往后面选
小竖线的写法是让第二个和第三个盒子设置左边框，此时盒子会掉下来，因为多了2px,解决办法是利用CSS3盒子模型，设置box-sizing:border-box,它可以将边框和内边距的值算进去，因此盒子就不会掉下来啦
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery