项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。
(1)开发工具sublime、fireworks（ps）、各种浏览器(ie6.7要测看心情)
(2)CSSRest类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)
normalize.css只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSSreset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于TwitterBootstrap、HTML5Boilerplate、GOV.UK、Rdio、CSSTricks以及许许多多其他框架、工具和网站上。你值得拥有。。-保护有用的浏览器默认样式而不是完全去掉它们-一般化的样式：为大部分HTML元素提供-修复浏览器自身的bug并保证各浏览器的一致性-优化CSS可用性：用一些小技巧-解释代码：用注释和详细的文档来(3)技术栈
HTML5结构+CSS3布局
(4)低版本浏览器单独制作一个跳转页面(都是孩子，也舍不得打，舍不得扔)
要实现结构和样式相分离的设计思想。根目录下有这4个文件（目录）。
标题上的小图标
右键另存为到网站根目录下。
引入icon图标
转换icon图标
SEO是由英文SearchEngineOptimization缩写而来，中文意译为“搜索引擎优化”！
SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。
简单的说就是，把产品做好，搜索引擎就会介绍客户来。
我们现在阶段主要进行站内优化。网站优化，我们应该要懂。。。
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
建议：
首页标题：网站名（产品名）-网站的介绍
例如：
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
京东网：
注意：
点击截图按钮——截取整个网页——保存，稍后可用ps来截取我们需要的图片
①版心：
用ps量出网页的版心，修改css代码，定义版心宽度并居中
分析：一个div里面套一个版心，版心中有一个图片形式的链接（a标签+img标签/背景图片，如果使用背景图片的方法要先将a转换为块级元素，设置高度，再填充背景图片）
ps量出高度，修改css样式，编写HTML结构
①写好结构和基本样式
分析：一个div（底部有边框），里面套一个版心div，一部分文字（ul）向左浮动，一部分文字（ul）向右浮动；最后引入字体图标
/*浮动的公共类*/.fl{float:left;}.fr{float:right;}a{text-decoration:none;/*取消链接默认下划线*/font-size:12px;color:#999;}a:hover{/*鼠标放到链接上的颜色*/color:#c81623;}ul{list-style:none;/*清除列表样式*/margin:0;/*清除内外边距*/padding:0;}body{background-color:#f6f6f6;/*整个页面的背景颜色*/}/*快速导航栏部分*/.shortcut{height:30px;/*没有高度撑开，不会显示*/line-height:30px;/*行高=容器高，可以使字体居中*/background-color:#e3e4e5;border-bottom:1pxsolid#ddd;font-size:12px;/*导航栏中字体大小*/color:#999;/*字体颜色*/}.city{/*定义“北京”的左外边距，给logo倒出位置*/margin-left:200px;}.shortcutli{/*列表本来是竖着排列，浮动后变为一行*/float:left;}.space{/*间隔的小竖线*/width:1px;height:10px;background-color:#ccc;margin:10px12px0;}.f10{/*常用的红色单独定义出来*/color:#f10215;}②引入字体图标：
点击这个按钮，选择想要的图标，进行下载~
将下载好的压缩包解压，font文件夹下得到下面4个文件，放入项目的fonts文件夹中。
引入字体图标步骤：
1）打开压缩包中的demo.html。复制想要的图标到i标签中，将i标签插入到需要字体图标的位置。
3）调用字体图标。
font-style：normal，去掉i默认的倾斜样式
③手机京东下面的二维码
如果直接在手机京东后加图片，会把手机京东这几个字挤下来
解决办法：给它们开启定位
分析：
①左边的logo
②搜索框
搜索栏和按钮之间会有缝隙，按钮较小时会被挤下来，让他们都浮动即可解决
③购物车
④关键词
⑤下边的小导航
知识点：
分析：footer标签，里面两个div
①多快好省部分
品类齐全···文字部分直接给margin-left，‘多’（使用雪碧图）定位到文字左边，不占空间
text-indent设置负值，可以隐藏文字，一般是-999px。
li浮动后，脱离文档流，高度坍塌，给父元素清除浮动即可
②购物指南部分
两个部分，‘购物指南’那五栏整体左浮动，右边‘京东自营覆盖区县’部分右浮动
sublime快捷键：快速到达某行，ctrl+g，输入行数，回车
‘购物指南部分’用dd、dl标签实现
准备工作：
头部和底部属于公共样式，在css文件夹中再新建一个index.css，写中间部分css样式
模块划分：
首先一个大盒子，给一个高度480px
大盒子中有左中右三个盒子
使用ul、li实现
撑开文字整体与盒子间上下左右的间距：
给ul设置上下padding
给li设置左右padding
撑开每行文字间的间距：
给li里的a设置margin
撑开行与行文字间的间距：
给li指定line-height
鼠标放置变色：
li：hover
a：hover
上边一个大盒子，大盒子下面并排两个小盒子，‘品’型。
箭头垂直居中：
transform:translateY(-50%)
bug：左边的箭头跑出去了，稍后解决
图片上翻页的小圆点：
用ul，li+浮动实现
上部分：宽度就是文字部分宽度，给图片绝对定位
促销公告模块：
样式没生效可能是权重不够的问题。
促销下的红线用一个单独的div底边框+定位实现
下半部分用ul+li实现
服务模块：
用ul和li实现，每个li有个边框。
给li设置浮动解决框框排成一竖排的问题
每个li盒子的宽度给多了，会挤到下一行，解决办法：给ul的宽度调大一些，
使用overflow：hidden将右侧和下侧多余部分隐藏
动画效果：过渡（一开始大图片宽度设置为0，鼠标放上去大图片宽度恢复）