京东移动端首页案例

1、上次我们说过京东移动端的首页是通过单独制作的。
所以我们采取单独制作移动页面的方案
2、布局采用流式布局
静态、自适应、流式、响应式的特点点击直达。

设置视口标签:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0,minimum-scale=1.0"> /*width - viewport的宽度 height - viewport的高度,initial-scale - 初始的缩放比例,maximum-scale - 允许用户缩放到的最大比例,user-scalable - 用户是否可以手动缩放*/
引入初始化样式

index.css 是需要自己写的css。
二倍精灵图的做法。
在firework里面把精灵图等比例缩放为原来的一半。
之后根据大小测量坐标
注意代码里面background-size也要写:精灵图是原来宽度的一半。
图片格式:
DPG图片压缩技术
京东自主研发推出的DPG图片压缩技术，经测试该技术，可直接节省用户近百分之50的浏览流量极大的提升了用户的网页打开速度，能够兼容jepg实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人浏览测试后发现，压缩后的图片和webp的清晰度对面没有差异。
wbep图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量服务器的带宽资源和数据空间。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东移动端首页</title><!-- 引入我们的css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
</head><body><!-- 头部 --><header class="app"><ul><li><img src="images/close.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><div class="main-Content"><!-- 滑动图 --><div class="slider"><img src="upload/banner.dpg" alt=""></div></div><!--小家电品牌 --><div class="brand"><div><a href="#"><img src="upload/pic11.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic22.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic33.dpg" alt=""></a></div><!-- nav --><nav><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a></nav><!-- 新闻模块 --></div></div><div class="news"><a href="#"><img src="upload/new1.dpg" alt=""></a><a href="#"><img src="upload/new2.dpg" alt=""></a><a href="#"><img src="upload/new3.dpg" alt=""></a></div>
</body></html>

上面的是HTML代码
下面的为css代码需要单独创建文件

    body {width: 100px;min-width: 320px;max-width: 640px;margin: 0 auto;/*使盒子居中对齐*/font-size: 14px;/*整个移动端设置为14px*/font-family: -apple-system, helvetica, sans-serif;/*如果手机是苹果的话就用syste 如果不是就是helvetica和sans-serif*/color: #666;line-height: 1.5;}a {color: #666;text-decoration: none;}ul {margin: 0;padding: 0;list-style: none;}img {vertical-align: top;}.app {height: 45px;}.app ul li {float: left;height: 45px;line-height: 45px;background-color: #333;text-align: center;color: #fff;}.app ul li:nth-child(1) {width: 8%;}.app ul li:nth-child(1) img {width: 10px;}.app ul li:nth-child(2) {width: 10%;}.app ul li:nth-child(2) img {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: fixed;overflow: hidden;height: 44px;width: 100px;min-width: 320px;max-width: 640px;}.search-btn {position: absolute;top: 0;left: 0;width: 40px;height: 44px;}.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(/images/s-btn.png);background-size: 20px 18px;margin: 14px 0 0 15px;}.search-login {position: absolute;right: 0;top: 0;width: 40px;height: 44px;color: #fff;line-height: 44px;}.search {position: relative;height: 30px;background: #fff;margin: 0 50px;border-radius: 15px;margin-top: 7px;}.jd-icon {width: 20px;height: 15px;position: absolute;top: 8px;left: 13px;background-color: pink;background: url(/images/jd.png);background-size: 20px 15px;}.jd-icon::after {content: "";position: absolute;display: block;right: -8px;top: 0;width: 1px;height: 15px;background-color: #cccccc;}.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background-color: pink;background: url(../images/jd-sprites.png) no-repeat -81px 0px;background-size: 200px auto;}.slider img {width: 100%;}/* 品牌日 */.brand {overflow: hidden;border-radius: 10px 10px 0 0;}.brand div {float: left;width: 33.33%;}.brand div img {width: 100%;}nav {padding-top: 5px;}nav a {float: left;width: 20%;text-align: center;}nav a img {width: 40px;margin: 10px 0;}nav a span {display: block;}.news img {width: 100%;}/* news */.news {margin-top: 20px;}.news a {float: left;box-sizing: border-box;}.news a:nth-child(1) {width: 50%;}.news a:nth-child(2) {width: 25%;border-left: 1px solid #ccc;}.news a:nth-child(3) {width: 25%;border-left: 1px solid #ccc;}