整 理：晋哲、徐秀 时 间：2015-11-05 说 明：Transition属性的介绍和简单的用法 一、定义 允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标指针浮动到元素上时、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 二、语法 transition: property duration timing-function delay; 需要注意的一点：transition-duration与transition-delay的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。1、属性名称：transition-property 2、过渡时间：transition-duration 3、变换速率：transition-timing-function 4、开始时间：transition-delay 三、属性 1、属性名称：transition-property 描述：规定设置过渡效果的 CSS 属性的名称。 其属性值: none：没有属性会获得过渡效果。 all：所有属性都将获得过渡效果。（默认值） [property]：定义应用过渡效果的元素属性名称，多个属性以逗号分隔 注：[property]是可以指定元素的某个属性值。其对应的类型可以是：color、值为数字的属性、transform属性等等。 2、过渡时间：transition-duration 描述：规定完成过渡效果需要花费的时间，以秒或毫秒计。默认值是 0，意味着不会有效果。 3、变换速率：transition-timing-function 描述：规定速度效果的速度曲线。 其属性值: linear：匀速 ease：逐渐变快，再逐渐变慢（默认） ease-in：加速 ease-out：减速 ease-in-out：加速然后减速 cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，自定义一个时间曲线
4、开始时间：transition-delay 描述：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认值是 0，意味着立即执行，没有延迟。 四、浏览器的兼容性 Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 为兼容各大现代浏览器，在应用transition时需要加上各自的前缀，如： -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -o-transition: all 2s linear; transition: all 2s linear; 五、DEMO示例 实现效果：鼠标移上去时，宽度逐渐增加、改变背景色、方形变圆形，降低透明度。 <!-- HTML --> <div class="box"></div> <!-- CSS --> .box{ width: 100px; height: 100px; background: #000; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .box:hover{ width: 300px; height: 300px; background: #f00; border-radius: 50%; opacity: .5; }
【svn入门】- 1、初次使用
编 写：袁 亮
时 间：2015-11-02
说 明：从未接触过svn的人，5分钟内学会简单使用svn
一、获取svn地址
1、发送邮件到cjy@corp-ci.com，告知项目名，申请获取svn地址
例如：http://****/demo/
2、如果没有svn账号的，也一并邮件中申请
二、windows中开始使用
1、下载TortoiseSVN安装
2、在需要使用svn的文件目录上右击，选择SVN CheckOut
3、从svn控制中心，更新最新的程序到本地
4、新增的文件，添加到版本库中
5、将改动提交到svn控制中心（新增或者修改都需要做这步操作）
三、linux种开始使用
1、进入到项目开发目录 cd demo/
2、从版本库中checkout下来
3、从svn控制中心更新最新版本
3、将新文件加入到svn中
4、将改动过的内容提交到svn版本控制中心
四、常用命令使用
1、【svn入门】- 2、常用命令及练习
2、pdf版本下载：【svn入门】- 初次使用
【前端技术文档】Position定位详解
整 理：肖雅君、曹燕
时 间：2015-10-30
说 明：position定位详解
一、兼容性 二、文档流 三、定义和用法 1．position介绍 1.1 说明 1.2 主要的值 1.3 辅助属性 2.position定位方式 2.1 position: static 2.2 position:relative 2.3 position:absolute 2.4 position:fixed 2.5 z-index 三、用途 1.布局 2.设置垂直居中 3.设置全屏 4.固定内容位 一、兼容性 所有的主流浏览器都支持position属性。 二、文档流 含义：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有3种情况会使得元素脱离文档流，分别是：浮动、绝对定位、固定定位。 三、定义和用法 1．position介绍 1.1 说明 position属性规定元素的定位类型，也就是说元素脱离文档的布局后，在页面的任意位置显示。 1.2 主要的值 (1) 默认值：static，无特殊定位，即不设定元素的position属性时，position值是static。它遵循正常的文档流对象，对象占用文档空间。在该定位方式下top、right、bottom、left、z-index等属性是无效的。 (2) relative：相对定位，不脱离文档流的布局，还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 (3)absolute：绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为body文档本身。 (4)fixed：固定定位，脱离文档流，相对于浏览器窗口进行定位，不随着滚动条的移动而改变位置。 (5)inherit：规定从父元素继承position属性的值。 1.3 辅助属性 position属性要想使元素脱离文档流后按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： (1)left：表示向元素的左边插入多少像素，使元素向右移动多少像素。 (2)right：表示向元素的右边插入多少像素，使元素向左移动多少像素。 (3)top：表示向元素的上方插入多少像素，使元素向下移动多少像素。 (4)bottom：表示向元素的下方插入多少像素，使元素向上移动多少像素。 2.position定位方式 2.1 position: static 2.1.1 static详解 （1）默认值static通常都会影响到元素的位置。主要是看元素本身是block属性或是inline属性。 如下图，两个<div>因为是block的关系，所以就会上下各占据一行，那如果是两个<span>，因为是inline，所以会在同一行里呈现。 代码：.div1{width:50px;height:50px;background:#f1f411;} .div2{width:50px;height:50px;background:#dfafda;} .span1{background:#f1f411;} .span2{background:#dfafda;}(2) static不能通过z-index进行层次分级。 2.2 position:relative 2.2.1 说明 相对定位。不脱离文档流的布局，在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置(即下图虚线部分)。
2.2.2 relative详解 (1)relative定位的top / right / left / bottom 属性是不会对相对定位的元素所占据的文档空间产生偏移的。
如下图：.div1{position:relative;top:20px;left:20px;}，而top值和left值并没有对div1原来的位置（即红色虚线部分）产生影响。 (2)元素的margin / padding会让该文档空间产生偏移，从而对定位产生影响。 对div1设置margin:20px;后
2.3 position:absolute 2.3.1 说明 绝对定位。a脱离文档流的布局，遗留下来的空间由后面的元素b填充。a定位是相对于距离a最近的父元素定位,且父元素的postion不为static，否则就相对于body文档本身定位。
2.3.3 absolute详解 absolute定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absolute定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的。 这里还需要注意的是，relative和static方式在最外层时，是以<body>标签为定位原点的，而absolute方式在无父级是position非static定位时，是以<html>作为原点定位。 如下图，示例1的最外层wrapper层未设置position,则第一个子级a是相对于body定位，子子级a-1和a-1-1都是相对于临近的设置了position的父级定位的；而示例2的最外层设置了position，则a是相对于wrapper定位的。示例3的a-1未设置position,则子级a-1-1是相对于临近的设置了定位的a进行的定位。
（2）使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值auto，此时该元素也是脱离文档流的。 （3） 少了left/right/top/bottom属性不行，那如果多设了呢？例如，同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则： 如果top和bottom一同存在的话，那么只有top生效。 如果left和right一同存在的话，那么只有left生效。 与top/bottom/left/right的书写顺序无关。 （4）绝对(absolute)定位对象在可视区域之外会导致滚动条出现，而相对(relative)定位对象在可视区域之外，不会出现滚动条。 2.4 position:fixed 2.4.1 说明 固定定位。类似于absolute，但不随着滚动条的移动而改变位置。
2.5 z-index z-index属性，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠。 如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。 需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。 三、用途 1.布局
2.设置垂直居中 例：在移动端，由于设备宽高不固定，所以对<div>设置垂直居中需用到定位，用于匹配不同的移动设备。 .wrapper{position:relative} .head{position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); } 注意:这里定位是相对于.head的左上角定位，所以还需设置margin-top和margin-left,值为.head宽高的1/2(或者设置transition)。
3.设置全屏 常用于移动端，如：设置蒙层。 手机宽高不一定时，要保证弹出的蒙层全屏显示，可以用到position:absolute,代码如下： .wrapper{position:absolute;top:0;bottom:0;left:0;right:0;} 效果图：
4.固定内容位 如PC端页面侧栏广告、WAP端的分享按钮(如上图)、固定位广告等。
【前端技术文档】Float浮动
整 理：徐秀、晋哲 时 间：2015-10-23 说 明：float浮动原理、用法、清浮动方法一、什么是float
float是在传统的印刷布局中，使文本可以按照需要围绕图片的布局方式。一般把这种方式称为“文本环绕”。浮动的元素仍然是网页流的一部分。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。故而浮动框会影响相邻的元素样式表现。二、float应用
float的可用值：1.图文环绕的浮动效果。 设置img{float:right;}
2.替代无表格的首页布局 .sidebar{float:left;width:200px;...} main{margin-left:200px;...}
3.创建水平菜单栏 设置li{float:left;...}的效果。
设置li{display:inline-block;...}的效果。
4.创建段首字母悬浮于左侧
三、float的影响。
1.无法撑开父级的高度。 2.影响同级非浮动元素样式的表现。 3.ie6中float元素双边距bug。四、 float的清除方法。
1. 清除对父级高度的影响 1.1. 指定父级高度。【不推荐】 1.2. 为父级渲染BFC(块级格式化上下文)【推荐，具体方法，量情况而定】 1.2.1. 父级overflow不为visible；可为（auto/hidden） 1.2.2. 父级设置display:inline-block/table-cell/table-caption/ flex/inline-flex; 1.2.3. 父级也设float 。 1.2.4. 父级设置绝对定位；position:absolute; 1.3 父级定义伪类:after;并设置父级zoom:1【推荐，某宝就使用的该方法】 way1: .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfix{zoom:1} way2: .cf:before, .cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {zoom:1;} 2. 清除对同级非浮动元素影响 2.1 为后面的非浮动元素添加“clear:both;”【推荐】 2.2 在浮动元素后面添加一个空的div，样式设置为clear:both;”【不推荐】 3. 清除IE6下的双边距bug。 问题描述：如果给元素设置了float，并设置了水平方向的margin【比如margin-left:100px】，会IE6下会出现margin-left:200px的显示效果。 解决方法：设置浮动元素的display:inline-block.
前端培训流程及实例练习
编 写：晋 哲 时 间：2015-10-29 说 明：文章底部附实例练习文件的下载地址 > 前端培训步骤 一、前端规范文档的了解 请查看geek上的规范文档 《HTML编码规范》http://blog.geekman.vip/archives/353 《CSS编码规范》http://blog.geekman.vip/archives/352 二、基础HTML结构编写 了解常用标签，结构布局。 请查看geek上的《DIV+CSS布局》http://blog.geekman.vip/archives/426 三、手机页面常用CSS样式属性 了解常用样式属性，请查看文章底部的《页面常用样式属性》 可以对应w3school上的解说快速了解 四、PS切图工具的基本使用 请查看geek上的操作文档 《Photoshop基本切图操作文档》http://blog.geekman.vip/archives/476 《CSS Sprites》http://blog.geekman.vip/archives/497 五、手机页面实例练习 按顺序练习Demo1-4，从简到繁。 六、审核页面、疑问解答 1、审查元素，调试页面 2、与后端配合须知 到此步基本可以实现简单页面的编写。先示范讲解，再自己练习。 之后是丰富知识和熟练程度，需自己学习了解、实例练习。 七、手机端常用的简单Js或jQuery网页动态交互效果 结合Demo5中的交互效果，熟悉jQuery的常用交互效果 八、手机端常用的CSS3新属性 结合Demo6了解CSS3的过渡、动画属性用法，再对应w3school上的解说进行详细了解 九、强化实例练习，理解、解决遇到的实际问题 十、阅读《公司前端项目规范文档》 geek地址：http://blog.geekman.vip/archives/495 -----------------------分割线----------------------- > 文件说明（具体内容见底部附件） 一、手机页面固定HMTL框架、PS切图练习源文件 简单了解HTML页面的组成，编写环境；通过对“每日新衣首页”页面的解析，了解页面整体框架。 二、Demo1_HTML简单局部 通过编写简单的登录页面，练习HTML代码架构，以及简单标签的使用。 三、Demo2_CSS基础样式运用 该练习初步涉及到CSS样式设置定位布局和浮动布局，以及间距、颜色等基础样式的运用。 四、Demo3_深入定位布局、背景图片 定位布局的灵活嵌套运用，强化浮动布局和盒模型设置，以及图片的运用，区别<img>标签图片和背景图片的设置 五、Demo4_切图操作、强化布局 稍复杂布局结构，开始PS切图练习，以及Sprite图合并与使用 六、Demo5_交互效果、完整练习（分两步） 1、弹窗页面的编写 通过练习了解页面固定定位、弹窗蒙层设置、预留Class设置交互效果，了解Js基础交互效果实现。 2、详情页整体页面练习 全局架构，简单的Js交互效果编写，如切换效果、显示隐藏效果、滑动效果等。 七、Demo6-CSS3动画效果介绍 了解常用的CSS3属性，以及实现效果练习。 -----------------------分割线----------------------- > 页面常用样式属性 通过www.w3school.com.cn了解以下属性，即可应对日常样式调整。 一、布局 1、定位：position 2、位置：top / right / bottom / left 3、浮动：float 4、框类型：display 5、溢出：overflow 6、层叠顺序：z-index 二、盒模型 1、边框：border 2、外边距：margin 3、内边距：padding 4、宽度：width 5、高度：height 三、文本排版 1、文本系列： a、字号：font-size b、字体：font-family c、字体粗细：font-weight 2、排版系列： a、行高：line-height b、水平对齐：text-align c、垂直对齐：vertical-align d、缩进：text-indent 四、视觉效果 1、背景系列：background a、背景色：background-color b、背景图片：background-image c、背景平铺方式：background-repeat d、背景图片定位：background-position e、背景图片尺寸：background-size 2、颜色：color a、十六进制值（如：#fff） b、rgba形式值（如：rgb(255,255,255,.9)） 3、圆角边框：border-radius 4、边框阴影：box-shadow
附件：前端实例练习文件下载地址
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端培训流程
【前端技术文档】公司前端项目规范文档
整 理：肖雅君、徐秀 时 间：2015-10-23 说 明：公司前端需遵守的项目规范 目录 第一节、 文档目录结构 第二节、 HTML书写规范 1、 声明和头部 2、 标签属性 第三节、 CSS书写规范 1、 外部引用样式 2、 格式化标签的默认样式： 3、 CSS书写规范 4、 CSS样式规范 第四节、 图像处理 1、 图像压缩 2、 图片格式 3、 Sprite雪碧图 第五节、 通用 1、 编码格式UTF-8 2、 书写小写 3、 去掉多余空格 4、 加注释 5、 特殊符号 6、 内部js代码的位置 附录： 参考链接： 第一节 、文档目录结构 |-- 前端项目名 |-- index.html /*存储HTML文件以及PHP文件*/ |-- styles |-- images /*存储样式引入的图片，如公共图片*/ |-- style.css /*存储CSS样式文件，默认初始命名为style.css*/ |-- js /*存储js文件*/ |-- images /*存储<img>标签所用图片，一般为数据调取的图片*/ |-- global /*放置公共引用的模块，如多个页面引用的header和footer部分*/ 第二节、HTML书写规范 1、声明和头部 1.1 PC端固定头部（公司统一）（见附录） 1.2 WAP端固定头部（公司统一）（见附录） 2、标签属性 2.1 缩进与换行 设置 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符与空格的混合。 2.2 闭合标签 所以的标签都必须闭合。非成对标记必须以“/>”结尾，且“/”前必须有一个空格，如<img />、<input />、<br />等。 2.3 标签语义化 如：<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，有利于搜索引擎的查询。 2.4 标签简洁化 标签的嵌套应尽量简洁，减少嵌套层次，减少不必要的的标签。 如：<!-- good --> <img class="avatar" src="image.png" /> <!-- bad --> <span class="avatar"> <img src="image.png"> </span> 2.5 类名或id名命名规则 （1）类名或id名命名要在保证通俗易懂的前提下尽量简洁。（2）同一页面内，禁止使用相同的 name 与 id 2.6 连字符 id、class 命名必须单词全字母小写，class 命名单词间以“中划线”分隔；id 命名多个单词使用“下划线”连接。如<div class="goods-list"></div>。 2.7 布尔类型的属性 布尔类型的属性，不添加属性。如：<input type="text" disabled /> 第三节、CSS书写规范 1、外部引用样式 所有的样式文件都写到css文件中，使用<link rel="stylesheet" href="styles/style.css" />引入到页面中。优先使用“外部样式表”，不建议使用内嵌样式，实际情况按后端需求。 2、格式化标签的默认样式： 2.1 PC端格式化样式（见附录） 2.2 WAP端格式化样式（见附录） 3、CSS项目书写规范 3.1 简洁型书写格式 实际项目中需压缩CSS样式，所以使用样式属性单行书写的格式，且去除多余空格。 样式紧接着选择器写，样式之间不能有空格，同一选择器的样式不换行。
3.2 写上父级类名 禁止使用*选择符。嵌套的类名很多的时候，需把父级也写上，当超过5个类名时可省略父级：如下 4、CSS样式规范 4.1 简化CSS属性 如font、margin、padding、border等。 <!-- bad --> border-left:0;border-top:5px;border-right:0;border-bottom:5px; <!--good --> border:0 5px; 4.2 0和单位 （1）0后省略单位，非0数值必须加上单位。如：width:5px;height:0; （2）属性值出现小数点忽略0，如：font-size:.8em; 4.3 a标签 a标签伪类书写要严格按照a:link，a:visited，a:hover，a:active的顺序，否则在某些浏览器中会失效。 4.4 简写颜色 如果不是为了制作半透明效果，颜色值必须使用十六进制记号形式 #rrggbb，颜色能简写的要简写，且颜色值使用小写字母。如：用{color:#f00;}代替{color#red;}和{color：#ff0000;}。 4.5 清浮动 在html中添加类名“.clearfix”，样式文件中添加代码 如：html中<div class="wrapper clearfix"></div> CSS样式：
第四节、图像处理 1、图像压缩 所有图片必须经过一定的压缩和优化才能发布(压缩软件：PNGGauntlet可压缩PNG图片)。 2、图片格式 用png图片做图片时, 要求图片格式为png-24格式,用png-8为ie6单独定义背景。WAP端默认用png-24。 3、Sprite雪碧图 能用雪碧图的尽量做成雪碧图（CSS Sprite是一种将数个图片合成为一张大图的技术，既可以是背景图也可以是前景图）。在一个位置统一调用背景图片，然后通过偏移background-position来进行图像位置选取； 使用url()时忽略括号中的""。如：
第五节、通用 1、编码格式UTF-8 不管是HTML还是CSS文件，都统一采用UTF-8编码格式 2、书写小写 所有的html代码、CSS代码、颜色值等必须要用小写。 3、去掉多余空格 不管是html文件还是CSS文件，都不要有多余的空格。（sublime有插件能显示并一键删除所有多余空格：trailing Spaces）
【前端技术文档】CSS Sprites
整 理：曹燕、肖雅君
时 间：2015-10-23
说 明：CSS Sprites
1. 原理简介 2. 优点 3. 使用场景 4. background-position属性 4.1基本用法 4.2使用示例 5. CSS Sprites使用方法 5.1设置background-image 5.2设置background-repeat 5.3设置background-position 6. 综合示例 7. 使用注意点 8. 雪碧图在线生成工具
CSS Sprites是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”等属性组合进行背景定位。
①减少网页的http请求；
②减少图片的字节，n张图片合并成1张图片的字节总是小于这n张图片的字节总和；
③解决网页设计师在图片命名上的困扰，只需对一张集合的图片进行命名，不需对每一个小元素进行命名；
④更换风格方便，只需在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
①静态图片，不随用户信息的变化而变化；
②小图片，图片容量比较小；
③加载量比较大。
要想灵活使用CSS Sprites，首先要完全理解background-position这个属性的含义和使用。background-position属性用于设置背景图像显示的起始位置，与CSS Sprites相关时的取值方式是：
background-position : x , y ;
其中x设置了水平位置 ，是指背景图片左边界距离容器左边界的距离。若背景图片左边界在容器左边界的左方，则x<0；若在容器左边界的右方，则x>0.
y设置了垂直位置，是指背景图片上边界距离容器上边界的距离。若背景图片上边界在容器上边界的上方，则y<0；若在容器上边界的下方，则y>0；
background-position的默认取值是0,0.
例如：有一个宽300px，高150px的容器，有一张背景图片bg.jpg
①background-position:0,0; 时的效果是：
②background-position:70px,40px; 时的效果是：
③background-position:-70px,-40px; 时的效果是：
首先将网页上用到的小图标合并到一张图片上。
background-image: url(bg.jpg);
将容器的背景图片设置为最终合成的雪碧图；
background-repeat: no-repeat;
将背景图片设置为不重复；
通过设置这个属性将背景图片显示的位置调整到需要显示的部分。
该示例使用的雪碧图以及要实现的效果分别如下：
备注：雪碧图中每个图标的宽度是40px，高度是24px。
①html部分的代码如下（整体上是一个ul，每个图标的位置都是一个i元素）：
②加上基本的css样式
此时的效果是：
③给i元素添加背景图片并将background-repeat设置为no-repeat
此时的效果是：
解释：因为background-position的默认值是(0,0)，所以背景图片（雪碧图）都是紧贴容器左上角（i元素的左上角）显示的。
④以第二个图标为例，要显示的图标是绿色皮鞋，此时应该将背景图片向上移动24px，横向上不需移动，所以第二个i元素的background-position设为(0,-24px)
此时效果为：
⑤下面的几个图标用一样的方法进行定位显示，这样就能实现最终的效果了。
①在手机端切图的时候注意要为每张图片之间留出足够空隙。因为使用元素的地方可能包含各种不同的内容，这些内容会导致容器变宽变高，预留了足够的空白的话，在容器大小发生变化时，可以避免其他的图片显示出来。
②不要等完成所有工作后再开始使用CSS Sprites。在网站全部完成后再使用CSS Sprites，也就意味着你要返回重写CSS，并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片。如果在刚开始构建页面时就着手使用CSS精灵，那么一切都会变得简单。
③有些情况不要使用CSS Sprites。
（1）wap端：需要图片的高度撑起内容的，如设置img{width:100%;height:auto;}不能合成雪碧图。
（2）某些需要重复的图片不能合成。如：需要重复的背景图。
（3）轮播的banner图
如果用photoshop或其他工具测量计算每一个背景单元的精确位置，虽然没什么难度，但是很繁琐，可以利用一些雪碧图在线生成工具来帮助我们实现。
工具地址：http://www.cn.spritegen.website-performance.org/
①打开网页之后，页面上会有一些示例图片，点击“Clear”按钮将之清空
②点击“Open”打开文件夹选择多张图片（直接选多张图片即可，不可用压缩包）
例如文件夹中有：
全选放入之后生成：
③点击“Settings”可以进行相关设置，包括图片的布局（紧缩型、垂直型、水平型）、生成css或less代码、代码前缀、图片之间的间距。保存设置，生成的雪碧图会自行进行调整。
④得到想要的效果之后，点击“Downloads”进行下载。包括生成的雪碧图、css代码，以及使用的html代码。
推荐一些其他实用的工具：
雪碧图在线生成工具： http://www.spritebox.net/
雪碧图在线生成工具：http://csssprites.com/
background定位工具：http://www.spritecow.com/
【前端技术文档】Photoshop基本切图操作文档
整 理：晋哲、徐秀
时 间：2015-10-23
说 明：切图思路步骤、批量切图软件推荐、PS工具手工切图操作
一、总览设计图，判断哪些需要保存成图片，哪些可以用样式编写实现。
1、需保存成图片的一般为颜色、形状多样的图像，如以下几种：
a、轮播的banner图片
b、商品图片
c、形状复杂的icon图标
2、可用样式编写一般为纯色块的形状区块，如常用的“确认”按钮。
二、提取图片图层，进行裁切
有两种方式：A：批量化工具，B：手工操作
A：批量化工具（推荐）
方法一：PxCook像素大厨（软件工具）
步骤：
1、命名输出
将想输出的图层或图层组以.png或.jpg为后缀的名称命名之后，该图层或图层组就可以被PxCook软件识别了。
2、转换图层
推荐将有特效的图层或多个图层转化为智能对象，以便更好地识别PSD文档。
3、在PxCook中打开PSD文件
打开【切图工具】界面 -> 选择“保存按钮”中的【导出切图】即可
注意事项：
1、不能重命名，否则会覆盖；
2、PSD文件不能太大，可以事先转化为智能对象，以及把不需要的图层删除掉；
3、适合手机端页面切图，不适合PC端页面。
官网链接：http://www.fancynode.com.cn/pxcook/home
有具体的步骤说明，及软件下载
方法二：PS快速提取图层的方式
【文件】->【脚本】->【将图层导出到文件】
注意事项：
1、PSD文件一定不能大，图层不能太多，不适合PC端页面；
2、会将文件中的所有图层全部分别导出，所有不需要的图层得事先删掉；
3、需事先将图层组合并，否则会将元素组件分别导出。
B：手工操作
方法一：元素自身复制粘贴
操作步骤：
1、借助图层左侧的“可见”按钮，取消图片底部的背景图层的显示，直至背景区域透明；
2、“移动工具”点击选中要切的图片（最外围），再从“标尺”处拖出四条“参考线”分别至图片四周边缘（注：在图层选中的情况下，参考线会自动贴边）；
3、使用“选取工具”将四条“参考线”所围成的区域选中；
4、【Shift+Ctrl+C】合并拷贝，再【Ctrl+N】新建画布，最后“粘贴”即可。
注：再切下一个图片时，需先将上一个“选区”去除，再拖动参考线。
方法二：去除元素周围透明区域
操作步骤：
1、在众多图层中选中一个图片所组成的所有图层。
在选中所属图层的过程中，有两种方法可以借助：
a、借助“移动工具”点击快速选中图层，前提是勾选上“自动选择”；
b、借助图层左侧的“可见”按钮去查看该图层是否属于图片上的元素；
2、选中图层 -> 右击选择“复制图层” -> 选择文档“新建”，确定。
3、选择菜单栏的“图像” -> “裁切”工具，确定后可将透明区域裁切掉。
三、保存图片
保存图片需考虑实际需求
1、“存储为” -> PNG格式
当背景需要透明显示时使用，页面常用格式，如元素图标
2、“存储为Web所用格式” -> JPG格式
当背景为实体的图片时使用，如banner图片，商品图片
3、“存储为Web所用格式” -> PNG-8 格式
PC端需要考虑PNG格式图片的兼容性问题时使用，所以，PC页面一般保存为两张图，一为PNG透明背景的图片，一为PNG-8兼容图片
四、整合成Sprite图
当设计稿中所有图片元素存储下来之后，需考虑哪些图片需要整合成Sprite图，哪些是保存为单独的个体。
一般如图标元素则需要整合到一张图片上；<img>单独呈现的为一个个独立的图片。按需抉择。
五、颜色值的提取
1、纯色块的颜色值
单击“前景色及背景色”工具即可打开“拾色器”，这时鼠标就变为“吸管工具”功能，在色块上点击一下，即可在“拾色器”上读取到其颜色值
2、文字的颜色值以及其他属性
首先选中文字图层，再点击“文字工具”，即可在顶部的工具栏展现它的文字属性：字体、是否为粗体、字号、颜色值。
单击“颜色区域”即可获得它的颜色值
六、其他注意事项
1、当遇到平铺循环展示的图片，只需截取其中一部分，在用样式里的repeat平铺。
比如：渐变条、循环背景图片等
2、当同一版块中的每个图标的宽高各异时，在切图时需要为这些图标设置一个统一的宽高，方便样式统一编写。
方法：PxCook工具有关于“修改切图尺寸”的操作。
常用快捷键：
【V】：移动工具
【M】：选框工具
【T】：文字工具
【I】：取色工具
【Ctrl+Shift+C】：合并拷贝
【Ctrl+N】：新建图层
【Ctrl+Shift+Alt+S】：存储为web所用格式。同菜单栏【文件】->【存储为web所用格式…】
【Ctrl+Shift+S】：另存为，快速存储
【Ctrl+“+”】：放大图片
【Ctrl+“-”】：缩小图片
【Ctrl+R】：标尺的显示/隐藏切换
【Ctrl+T】：变换工具，选中图层变形
【Ctrl+Alt+C】：改变画布大小
【Ctrl+Alt+I】：改变图像大小
HTML5地理定位（使用实例）
整 理：曹燕
时 间：2015-10-22
说 明：html5地理定位的使用实例
1.功能描述
程序包括一个html文件和一个php文件。
实现的功能是：①在定位成功的情况下，显示用户所在位置的经纬度、用户所在地点；当用户点击“查看周围店铺”时，在地图上显示周围的店铺以及从用户所在点到达店铺的路线。②在定位失败（包括用户拒绝定位等）的情况下，显示用户所在的省市。
2.前端html文件说明
2.1 getLocation()方法
功能：该方法在文档加载时执行，功能是获取定位
说明：若浏览器支持地理定位，则利用html5中提供的定位api进行定位；否则调用ip定位的方法。
2.2 onSuccess(position)方法
功能： 该方法是定位成功时执行的回调函数，功能是获取并显示用户所在位置的经纬度、显示用户所在地点。
说明：①利用h5地理定位获取当前所在地点的经度和纬度；②将经度和纬度传给后台，通过ajax向后台请求获得位置信息，包括转换之后的百度标准经纬度、用户所在地点的详细信息。
2.3 onError(error)方法
功能：该方法是定位失败时执行的回调函数，功能是调用ip定位的方法。
2.4 ipLocate()方法
功能：该方法是在浏览器不支持地理定位或者地理定位失败时调用的函数，功能是显示用户所在位置的省市信息。
说明：通过ajax向后台请求获得位置信息，传给后台的经纬度是（400,400）这组无效数据，以表示经纬度获取失败
2.5 showStores()方法
功能：该方法在用户点击“显示周围店铺”按钮时执行，功能是在百度地图上显示从用户位置到周围店铺之间的路线。
说明：此方法的顺利执行需要在html文件头部引入百度地图api
<script src="http://api.map.baidu.com/api?v=2.0&ak=gS3IRPx5CG3SUixVgIUbUi2c"
type="text/javascript"></script>
3.后台php文件说明（待补充）
代码下载：20151019locate
HTML5地理定位（原理知识）
整 理：曹燕
时 间：2015-10-22
说 明：html5地理定位的原理知识
1.地理定位的作用 2.地理定位的原理 3.地理定位的机制 4.浏览器支持情况 4.1 PC浏览器支持情况 4.2 手机支持情况 5.使用API前检测浏览器 6.API的使用 6.1 getCurrentPosition()方法 6.2 watchPosition()方法 6.3 clearWatch()方法 7.代码示例 8.扩展
HTML5地理定位（HTML5 Geolocation）提供了一组API用于获取用户的地理位置。鉴于该特性可能侵犯用户的隐私，在访问位置信息前，浏览器都会询问用户是否共享其位置信息。
Geolocation的位置信息主要来源于以下四种方式：
①GPS全球定位。在露天环境下效果较好，获取位置信息非常精确。适合移动设备。
②IP地址定位。适用于接入互联网的设备，比如台式机。但是因为浏览器是将位置信息发送给 ISP 服务商来解析，其IP 地址与服务商所在位置有关，可能与用户所在位置不同，所以这种方式的解析容易出现偏差。
③WiFi定位。这种方式与GPS效果同样精确，它通过多个WiFi接入点三角距离获取位置信息数据。适用于室内环境的移动设备。
④GMS网络定位。与TCP/IP协议不同，它基于GMS数据交换协议。通常用于移动服务商的GPRS数据服务。解析方式精确。
Firefox 3.5+
Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+
Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian (S60 3rd & 5th generation)
Blackberry OS 6
Maemo
在使用地理位置API之前首先要检测浏览器是否支持：
navigator.geolocation对象有三个方法：
功能：获取用户当前位置
参数：
①successCallback是定位成功时执行的回调函数，是必须参数；
successCallback返回一个地理数据对象position作为参数，该对象的属性有：
| 属性名 | 描述 |
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
②errorCallback定位失败时执行的回调函数，是可选参数；
errorCallback返回一个错误数据对象error作为参数，该对象的属性有：
| 属性名 | 取值 | 描述 |
| code | PERMISSION_DENIED (数值为1) | 表示没有权限使用地理定位API |
| POSITION_UNAVAILABLE (数值为2) | 表示无法确定设备的位置 | |
| TIMEOUT (数值为3) | 表示超时 | |
| UNKNOWN_ERROR(数值为4) | 表示未知错误 |
③options参数为额外参数，用来实现更精细的执行定位，是可选参数。
options = {
enableHighAccuracy：true,
timeout:1000,
maximumAge:3000
}
enableHighAccuracy表示是否要求高精度的地理信息，默认为false。
timeout表示等待响应的最大时间，单位是ms，默认是0，表示无穷大。
maximumAge表示应用程序的缓存时间，当第二次请求定位与第一次定位的时间差超过maximumAge，则重新获取一个定位；否则返回缓存中的位置。
功能：持续获取当前用户位置（定期轮询设备的位置）
参数：该方法的参数和getCurrentPosition()方法的参数是一样的，包括：successCallback（必须）、errorCallback（可选）、options（可选）
返回值：数值型的watchId
功能：配合watchPosition()使用，用于停止watchPosition()的轮询
参数：watchPosition()方法的返回值watchId
效果(显示当前所在位置的经度和纬度)：
在获取用户位置时除了以数值的形式显示出来，还可以结合百度或谷歌地图的API，这样可以在地图上显示位置。
首先引入百度地图API：
然后改写上面代码示例中的onSuccess方法（定位成功时执行的回调函数）
这样就能将当前位置显示在地图上：
附：百度地图开放平台：
http://developer.baidu.com/map/jsdemo.htm#a1_2