移动端技术选型：
单独制作移动端页面之流式布局
1.准备的文件夹（网站）：
2.在京东页面收集素材（其中index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置，其他不同格式的图片都是从京东下载下来的）：
3.设置视口，分析手机分辨率：
<!-- 标准的viewport --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">body {/* 流式布局 */width: 100%;/* 根据自己情况*/max-width: 540px;min-width: 360px;}
4.分析京东页面布局（如图标记，分5个部分来写。注意在下载搜索框里的小放大镜的时候，是精灵图（二倍图解决））：
5.最后一步一步写下来就好了：
附上代码：
index.css:
body {/* 流式布局 */width: 100%;max-width: 540px;min-width: 360px;/* 整个页面水平居中 */margin: 0 auto;font-size: 14px;/* 苹果样式 */font-family: -apple-system, Helvetica, sans-serif;color: #666;/* 行高 */line-height: 1.5;background-color: #fff;height: 2000px;
}a {color: #666;/* 去掉下划线 */text-decoration: none;
}/* 注册 */.app {height: 50px;
}.app ul {margin: 0;padding: 0;list-style: none;
}.app ul li {float: left;height: 50px;background: #333333;/* 水平居中 */text-align: center;/* 垂直居中 */line-height: 45px;color: #fff;
}.app ul li:nth-child(1) {width: 8%;
}.app ul li:nth-child(1) img {width: 10px;/* 10*10 不能写高 *//* 而cancel只有是像素，跟字体一样大小，所以能对齐 */
}.app ul li:nth-child(2) {width: 10%;
}.app ul li:nth-child(2) img {/* 30*30,高度不写 图片和默认文字的基线对齐 要注意水平处垂直居中的问题*//* 图片属于行内块 */width: 30px;vertical-align: middle;
}.app ul li:nth-child(3) {width: 57%;
}.app ul li:nth-child(4) {width: 25%;background-color: #F63515;
}/* 搜索 */.search-wrap {/* position: relative; *//* 改为固定定位 但是要加上最大的以及最小的宽度 */position: fixed;/* 注意100% */width: 100%;max-width: 540px;min-width: 360px;height: 44px;overflow: hidden;background-color: #F63515;
}.search-btn {position: absolute;left: 0;top: 0;/* background-color: pink; */width: 40px;height: 44px;
}.search-btn::before {content: "";/* 因为before是行内元素，所以要用display:block */display: block;width: 20px;height: 18px;background: url(../images/s-btn.png) no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}.search-login {position: absolute;right: 0;top: 0;/* background-color: purple; */width: 40px;height: 44px;color: #fff;line-height: 44px;
}.search {position: relative;height: 30px;background-color: #fff;/* 上下0，左右50 */margin: 0 50px;border-radius: 15px;margin-top: 7px;/* 用了margin-top,这样的话两边的盒子会往下面走（外边距合并），这就需要在父级元素用到 overflow: hidden */
}.jd-icon {width: 20px;height: 15px;position: absolute;top: 8px;left: 13px;/* background-color: pink; */background: url(../images/JD.png) no-repeat;/* 图片太大，显示不全，来一个缩放 ，需要先测量*/background-size: 20px 15px;
}.jd-icon::after {position: absolute;right: -8px;top: 0;content: "";display: block;width: 1px;height: 15px;background-color: #ccc;
}.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;/* 这是一张精灵图，需要紧张二倍缩放 用fw进行等比测量*/background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}.slider img {width: 100%;
}/* nav */nav {margin-top: 5px;
}nav a {float: left;width: 20%;/* 图片文字都居中 */text-align: center;
}nav a img {width: 40px;margin: 10px 0;
}nav a span {display: block;
}/* 新人专享 */.new1,
.new2 {margin-top: 20px;
}.new img {width: 100%;
}.new div {float: left;
}.new .new1,
.new2 {width: 50%;
}
index.html:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 标准的viewport --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"><!-- 引入css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 再新建一个自己的css文件index.css,并引入 --><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 注册 --><header class="app"><ul><li><img src="images/cancel.png" alt=""></li><li><img src="images/logo.png" alt=""></li><li>打开京东App,购物更轻松</li><li>立即打开</li></ul></header><!-- 搜索 --><div class="search-wrap"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="sou"></div></div><div class="search-login">登录</div></div><!-- 主体内容部分 --><div class="main-content"><!-- 轮播图 --><div class="slider"><img src="upload/slider.jpg.dpg" alt=""></div><!-- 品牌日 --><!-- nav部分 --><nav><a href=""><img src="upload/p1.png.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/p2.png.webp" alt=""><span>数码电器</span></a><a href=""><img src="upload/p3.png.webp" alt=""><span>京东服饰</span></a><a href=""><img src="upload/p4.png.webp" alt=""><span>京东生鲜</span></a><a href=""><img src="upload/p5.png.webp" alt=""><span>京东到家</span></a><a href=""><img src="upload/p6.png.webp" alt=""><span>充值缴费</span></a><a href=""><img src="upload/p7.png.webp" alt=""><span>9.9元拼</span></a><a href=""><img src="upload/p8.png.webp" alt=""><span>领券</span></a><a href=""><img src="upload/p9.png.webp" alt=""><span>赚钱</span></a><a href=""><img src="upload/p10.png.webp" alt=""><span>PLUS会员</span></a></nav><!-- 新人专区 --><div class="new"><div class="new1"><img src="upload/p11.jpg.dpg" alt=""></div><div class="new2"><img src="upload/p22.png!q70.jpg.dpg" alt=""></div></divclass></div>
</body>
</html>
欢迎指正~
