JD m站自我解析理解

第一步：从首页着手

文档部分：应用的是H5默认文档开头即：

head部分：放了一些相关的JS，title描述，然后就是meta表述了。比较有参考的如下

<meta name="author" content="m.jd.com">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 禁止滚动，默认设备大小；

<meta http-equiv="Content-Type" content="text/html; charset=GBK">  编码类型

<meta name="author" content="m.jd.com">

<meta name="apple-mobile-web-app-capable" content="yes">   默认的工具栏

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta http-equiv="Expires" content="-1">

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Pragma" content="no-cache">

什么缓存之类的了

body部分：就是放内容的地方了；

第二步：内容区按块自我分析

首先是基本的CSS设置，

第一:清除边距，设置最大宽度640px，最小宽度300px;居中显示。默认的字体，给元素加一个vertical-align:baseline;为所有的元素设模型为 box-sizing:border-box等等。

依次下来：第一个就是一个a标签，看类型应该就是一个top顶部了，不过具体也没有什么样式。用的还是一个ID，或许是给后台留了一个接口吧。

第二：客户端首单满多少送多少，一直显示在顶部的一个通栏。

外层宽的100%，子级为320px(行内样式，因此应该是用JS控制的，这个宽度应该是判断大于max-width:那么就等于这个max-width)

内部放的就是各种浮动，然后外加各种行内样式。

第三：viewport部分

max-width:640px; min-width:320px; margin: 0 auto; padding: 0 5px;

第一块就是搜索，不过N的地方就是，人家JD把位置移动下来了，但是为了抓取，人家放了一个占位在那。(然后用了一个定位)

定位后，内部放一个jd-header，然后也就没哟什么特别的了，比较推荐的借鉴就是input里面用的是margin-top不是我们习惯用的padding

第三：快速导航

宽度为25% 并且为相对定位。内部加一个::after伪类，来实现考右的小竖线。

第四：楼层2

上半部也定时器，也没有什么特别的布局，挺简单的span出来的。

下部分，秒杀，用的也就是百分比33.3%,然后加了一个左边框，margin-left:-1px; 反正所有的都是box-sizing:border-box;因此不用担心撑开之类的。

布局呢，考虑的也不用那么多，就是能正常显示的就不用管了，靠其它的来显示就可以。

第五：金秋风暴

比较有特色想法的是，标题部分。左边的小红竖条是一个::before来实现的，是一个width:3px; background:red;的背景色。

下面图片这块的部分，做的真的不错。竟然没有看出来用个什么方法，但经过测试发现，一定是在改变窗口尺寸的时候做了处理。用的也不是flex属性，也没有看到JS有什么改动。不过有理由相信它应该就是JS控制。左边的高度等于右边两张图高度总和。

第六：主题馆

这个用的方法非常好，背景图片就是一个图片，上面切换的图片是放在一个相对定位高度为1px的盒子里。

第七：猜你喜欢

这个地方也有一个地方用的很好，就是他没有用table但是他把元素用了display:table; display:table-cell;的形式，模拟了table。

然后也就没有什么了，首页就这样的过去了。好多不懂的，看是也懂了好多。看别人写的东西，一点好处就是，学到对方很多的思维与方法。好的去学，不好的去发现去避免。