整 理：晋哲、雷媛 时 间：2015-11-12 说 明：前端在团队合作中如何与上下游紧密配合 ---------- 与后端配合须知 ---------- 一、HTML方面 1、不要通篇都是<div>标签，便于后端识别HTML代码。 比如：<ul><li>用于结构、样式相同的列表。 2、在需要结构、样式相同的列表时需注意：如果有个别列表上有特殊样式，尽量不去添加单独的class或内嵌style，选择使用伪类或伪元素选择器编写特殊的样式。保证列表的HTML代码结构的一致性。 比如<ul><li>列表，多个<a>标签列表等，往往需要设置最后一个元素的样式，可以使用伪元素选择器:last-child编写独立的样式。 3、注释很重要 当页面代码很多时，需用注释划分代码区块，注明用途，但也不宜文字过多。 4、前端需要会简单的php，if判断、for循环、include语句的改写 比如：一个列表一样的数据，无需写多个li标签，可以写一个li然后用for循环，精简代码；公共引用的header和footer部分使用include语句引入。 5、在Appserv中直接编写.php文件，利于查看生效的php代码，也方便后端改写。 6、需要后端for循环写入的list代码，前端在HTML中复制出两段以上，方便后端知晓，只有一段list代码不好找。 比如：<li>标签约定俗成地作为循环列表，后端人员看到<li>标签时也可引起注意。 7、需要后端if判断的代码，前端就不需要为了都显示出来而写多余的js代码。只需要显示一个代码段，其他代码段用style="display:none;"隐藏起来就可以了。 比如：下图弹出框有两个条件状态：领取成功、领取失败。将需要改变的代码段，一个显示，一个隐藏，之后后端只需if判断“popup-box”的部分即可。但需注意：选项卡的内容切换不需要后端if判断，所以还是属于前端js去控制显示和隐藏。 二、CSS方面 1、不要使用id选择器编写样式（编写js时可以设置id，建议jQuery用class选择器）。 2、交互切换性的部分，单独立一个特殊样式的class名，方便调取。 比如：<li>列表中需要一个凸显的样式，那么在<li>里面编写公共样式，再将变换的样式写在单独的class上。常提取出背景色background-color、背景图片background-image、字体颜色color、边框色border-color等样式。
3、切图过程中，所有的图片都需要优化，手机端的图片不能超过70KB，避免后期后端还需去单独优化图片。 4、项目页面的样式放置在统一的外部css文件中；多个页面引用的公共样式需提炼出来放置一处，不要多处复制。 5、独立的页面，如活动页面，因css代码较少，根据后端需求，一般内嵌至HTML页面的<head>中。 三、JS方面 1、js代码统一放置在页面代码最下面，位于</body>之上；引用的外部js放置在编写的js代码之前，利于js代码的加载。 2、每个模块区域作用的js代码要分段编写，并注明每段js代码的用途，不要将所有的js代码混合在一起或合并起来，方便后端快速修改、删除，并合并前后端代码。 3、交互性js效果都需前端实现，减少后端工作量；根据用户体验，交互效果尽量考虑周全，减少遗漏。 4、若前期已有现成的js效果代码可以直接采用，比自己现编写更实用、更效率。 四、调试页面 1、做完页面之后前端必须先对照设计稿调试页面，包括电脑上的页面显示以及各种型号的手机上的呈现效果。在确认没有页面结构、样式问题后，再提交到后端。尽量避免HTML结构代码的返工修改。 2、对照设计图调试的同时，需要考虑用户的可操作性，以及页面的美观效果，避免后期上线时需再次修改。 比如：字体的大小是否合适、弹框文字是否居中、弹框的遮罩层点击之后弹框是否关闭（包括确定按钮、关闭按钮）等等，一系列影响美观和用户操作的细节问题。 3、浏览器审查元素调试页面样式更便捷、更直观、更准确。得到属性值后再去编辑器里修改。 4、页面调试时使用PageSpeed插件分析页面性能，进行相应调整。 5、当后端生成出测试页面时，前端需再次测试页面，确保页面代码布局没有遗漏，根据后端需求、实际环境调整样式。 五、及时沟通 1、前端工作开始之前先确认自己的上下游，拿到设计稿后，将JPG效果图传给后端预先知晓。 2、在拿到设计图的同时，整个图的流程需要搞清楚，若不清楚需要和后端或者是负责人及时沟通，避免后端与前端的逻辑流程差异过大，交接时出现不必要的麻烦。 3、当页面交接时有需要特别交代的地方，文字表达不清楚时，当面交流更效率。 ---------- 与编辑、设计配合须知 ---------- 1、总览页面效果图，看到不确定元素时，需与负责人沟通，确定其想要的布局形式以及交互动态效果，避免与需求不符。 2、需要交互变换效果的元素，先确认设计稿里是否有隐藏图层。如果没有再与设计确认交互样式。 3、当页面完成之后，可以交于编辑确认是否有遗漏，再提交给后端或上线。 4、专题页面需编辑提供的信息： （1）专题项目命名 （2）网页标题：title （3）关键字(PC端)：keyword （4）关键描述(PC端)：description （5）微信分享的文案和图片 （6）cnzz代码 （7）“往期回顾”版块所需图片及链接 （8）视频文件：pc版需要flv格式，wap端需要MP4格式
【前端技术文档】CSS选择器
整 理：徐秀、晋哲
时 间：2015-11-09
说 明：CSS各种选择器及其意义，以及常见选择器的用法，附CSS命名建议
- 什么是CSS？
CSS是Cascading style sheets【层叠样式表】的缩写，用来控制DOM节点的表现样式。
- CSS结构
CSS组成: selector{property:value;}
- CSS的选择器
选择器是确定CSS样式控制范围的标识，由于添加样式元素。
选择器优先原则：1、就近原则；2、控制范围越小，权重越高；选择符权重：id：100；class：10；标签：1；一个选择器的权重等于各个层级的权重之和，如：
#container .lists ul li.item { … }的权重:100+10 +1+1+10=122.
- 基础选择器
| 选择器 | 含义 | 示例 |
| * | 通用元素选择器，匹配任何元素 | * { margin:0; padding:0; } |
| E | 标签选择器，匹配所有使用E标签的元素 | p { font-size:2em; } |
| .info和E.info | class选择器，匹配所有class name是info的（E）元素 | .info { background:#ff0; } p.info { background:#ff0; } |
| #info和E#info | id选择器，匹配所有id的name为info的(E)元素。 | #info { background:#ff0; } p#info { background:#ff0; } |
- 组合选择器
| 选择器 | 含义 | 示例 |
| E,F | 群组选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 | div,p { color:#f00; } |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | #nav li { display:inline; } li a { font-weight:bold; } |
| E > F | 子元素选择器，匹配所有E元素的子元素F,如果F下还有F，不受该样式影响;不影响E的孙子元素F。 | .one > strong { color:#f00; } |
| E + F | 毗邻元素选择器，匹配所有紧随E元素之后的第一个同级元素F | .one + p { color:#f00; } |
| E~F | 同级选择器，匹配E元素之后的所有同级元素F。 | .two ~ ul{ list-style:none; } |
- 属性选择器【ie8- 版本必须声明<!doctype>,否则(伪)属性、伪类选择器无效】
| 选择器 | 含义 | 示例 |
| E[att] | 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att属性等于“val”的E元素 | div[class=”error”] { color:#f00; } |
| E[att~=val] | 匹配所有att属性中包含单词“val”的E元素，该单词必须独立，前后被空格隔开。 | td[class~=”name”] { color:#f00; } |
| E[att|=val] | 匹配所有att属性以”val”开头的E元素，且”val”后必须接连字符(“-”) | p[lang|=en] { color:#f00; } |
| CSS3新增属性选择器 | ||
| E[att^=”val”] | 属性att的值以”val”开头的元素 | div[id^="nav"] { background:#ff0; } |
| E[att$=”val”] | 属性att的值以”val”结尾的元素 | a[src$=".pdf"] |
| E[att*=”val”] | 属性att的值包含”val”字符串的元素 | a[src*="abc"] |
- 伪类选择器
| 选择器 | 含义 | 示例 | |
| E:link | 匹配所有未被点击的链接 | a:link {color: #f00;text-decoration:underline; } | |
| E:visited | 匹配所有已被点击的链接 | a:visited {color: #f00;text-decoration:none; } | |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | a:active {color: #f00;text-decoration:none; } | |
| E:hover | 匹配鼠标悬停其上的E元素 | a:hover {color: #0f0;text-decoration:none; } | |
| E:focus | 匹配获得当前焦点的E元素【ie9+】 | input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; }[当input获得焦点且鼠标悬停在input上才获得该样式] |
|
| E:lang(c) | 匹配lang属性等于c的E元素 | q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; } | |
| CSS3界面相关伪类 | |||
| E:enabled | 匹配表单中激活的元素【ie9+】 | input[type="text"]:enabled { background:#ff0;} | |
| E:disabled | 匹配表单中禁用的元素【ie9+】 | input[type="text"]:disabled { background:#ddd;} | |
| E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元【目前只有Opera支持】 | input[type="text"]:disabled { background:#ddd;} | |
| E::selection | 匹配用户当前选中的元素【火狐样式单独写；且只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline】 | ::selection { color:#ff0; background:#222; outline:#f00; } ::-moz-selection { color:#ff0; background:#222; outline:#f00; } |
|
| CSS3结构性伪类 | |||
| E:root | 匹配文档的根元素，在HTML文档，根元素是唯一html | :root { background:#ccc; } | |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 | p:nth-child(2) { color:#f00; } | |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，最后一个编号为1 | p:nth-last-child(2) { color:#f00; } | |
| E:nth-of-type(n) | 与:nth-child()作用类似，但仅匹配使用标签E的元素 | p:nth-of-type(2) { color:#f00; } | |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但仅匹配使用标签E的元素 | p:nth-of-type(2) { color:#f00; } | |
| E:first-child | 匹配父元素的第一个子元素 | p:first-child { font-style:italic; } | |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) | ||
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) | ||
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | ||
| E:only-child | 匹配父元素下仅有的一个子元素。如果父级有多个子元素，那么样式不起作用 | ||
| E:only-of-type | 匹配父元素下使用E标签的唯一一个子元素，如果父级有多个标签为E的子元素，那么样式不起作用 | ||
| E:empty | 匹配一个不包含任何子元素标签为E的元素，【标签可省略】注意，文本节点也被看作子元素 | :empty { background:#f00; } | |
| CSS3反选伪类 | |||
| E:not(s) | 匹配不符合当前选择器的任何元素 | :not(p) { border:1px solid #ccc; } | |
| CSS3：target伪类 | |||
| E:target | 匹配文档中特定”id”点击后的效果[页面内部的锚链接指向的id] | ||
- 伪元素选择器
| 选择器 | 含义 | 示例 |
| E:first-line | 匹配E元素的第一行 | p:first-line { font-weight:bold; color;#600; } |
| E:first-letter | 匹配E元素的第一个字母 | .preamble:first-letter { font-size:1.5em; font-weight:bold; } |
| E:before | 在E元素之前插入生成的内容 | .cbb:before { content:”"; display:block;background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } |
| E:after | 在E元素之后插入生成的内容 | a:link:after { content: ” (” attr(href) “) “; } |
- 常用选择器
1. :hover
1.1. 我们常用的锚链接(a:hover)鼠标悬停在链接上字体变色：
a:hover{color:#f00;text-decorate:none;}
1.2. :hover伪类不是a标签特有，几乎所有标签都有该伪类，且它的浏览器兼容性好。用:hover可以让一个区域在鼠标滑过显示不同的样式。
代码:
效果：
2. :before /:after【注意：使用该类伪属性：必须写content:””;】
2.1.可以在清浮动起作用
2.2.制作对话框效果时对话框侧边的边角。
代码:
css代码:
html代码：
效果：
2.3. 添加小图标，可以减少标签和类的使用。
代码：
效果：
这个例子中，使用伪属性:before和:after可以减少至少两个标签，两个类的编写。
2.4. 用content:"(" attr(href) ")" 获取锚链接指向的网址，即使链接改变不需要手动修改HTML页。
代码：
效果：
3. :first-child/:last-child
3.1. 比如在一个具有相同样式的一组元素里，第一个或最后一个元素与其它元素样式略有不同。（:first-child/:last-child用途类似，下面举例:first-child。）
代码：
效果：
【附】：CSS命名建议（从1.可读性和可维护性。2.易修改性。3.公共样式的复用性 三点出发考虑命名。）
- 布局类：header, footer, container, main, content, aside, page, section
- 包裹类：wrap, inner
- 区块类：region, block, box
- 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表类：list, item, field
- 主次类：primary, secondary, sub, minor
- 大小类：s, m, l, xl, large, small
- 状态类：active, current, checked, hover, fail, success, warn, error, on, off
- 导航类：nav, prev, back,next, breadcrumb, forward, indicator, paging, first, last
- 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星级类：rate, star
- 分割类：group, seperate, divider
- 等分类：full, half, third, quarter
- 表格类：table, tr, td, cell, row
- 图片类：img, thumbnail, original, album, gallery,logo
- 语言类：cn, en
- 论坛类：forum, bbs, topic, post
- 方向类：up, down, left, right
- 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading，joinus，vote，tab,banner,hot...
- 单词组合命名，用连字符”-(减号)”连接，单词组合体现模块功能或者是模块内容。如: .article-hd（文章头部）; .page-tt （页面标题）
- 特殊化class，可以采用前缀/后缀来命名。如: 用户页的页面标题用: . user -page-tt 。
- 对于公用样式，命名最好多体现其功能，如: sidebar/subnav/left-page… ，并降低其权重;对于相对稳定的样式，可以跟内容结合：如goods-name/goods-intro/user-info…。
CSS选择器HTML示例地址：
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端文档临时存放\示例文件\CSS选择器示例
【前端技术文档】CSS3 Animation 动画属性
整 理：肖雅君、曹燕 时 间：2015-11-05 说 明：animation属性的介绍和简单的用法 一、兼容性 二、语法介绍 1 定义keyframes语法 1.1 语法 1.2 值和描述 2 调用动画语法 2.1 语法 2.2 属性值 3 属性值详解 3.1 animation-duration 3.2 animation-timing-function 3.3 animation-iteration-count 3.4 animation-direction 三、综合示例 Animation 一、兼容性 Chrome 13+、Firefox 5+、Safari 5.1+、Opera 12+、IE10+均支持animation 常用前缀： Firefox：-moz Safari 和 Chrome：-webkit Opera ：-o 二、语法介绍 1 定义keyframes语法 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 1.1 语法 @keyframes animation-name{keyframes-selector {css-styles;}} 1.2 值和描述 animation-name：(必需)指定要绑定到选择器的关键帧的名称，即动画的名称。 keyframes-selector：(必需)动画时长的百分比。 建议: 在CSS3中，我们以百分比来规定改变发生的时间，或者通过关键词“from”和”to”,等价于0%和100%，其中，0%是动画的开始时间。100%是动画的结束时间。 例如： @keyframes colorchange { 0% { background-color:#00f; /* from:blue */ } 25% { background-color:#f00; /* red */ } 50% { background-color:#0f0; /* green */ } 75% { background-color:#f0f; /* purple */ } 100% { background-color:#00f; /* to: blue */ } } @-webkit-keyframes colorchange { 0% { background-color: #00f; /* from:blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #f0f; /* purple */ } 100% { background-color: #00f; /* to: blue */ } } 解释：这个例子中定义了background-color这个属性。其中0%这可以用from关键字来代替，100%可以用to代替。即： @keyframes colorchange { from { background-color: #00f; /* from: blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #fF0f; /* purple */ } to { background-color: #00fF; /* to: blue */ } } 2 调用动画语法 2.1 语法 animation:name duration timing-function delay iteration-count direction; 例：animation:changeColor 6s ease-in-out .2s infinite alternate; 2.2 属性值 animation属性是一个简写属性，用于设置动画的属性。 animation-name：该属性主要是用来调用@keyframes定义好的动画。 animation-duraton：动画指定需要多久完成，默认是0。 animation-timing-function：设置动画的速度曲线，默认是”ease”。 animation-delay： 设置在动画将启动之前经过的延迟间隔，默认是0。 animation-iteration-count：设置动画周期的播放次数，默认是1。 animation-direction：设置对象动画在循环中是否反向运动，默认是“normal”。 3 属性值详解 3.1 animation-duration 指定动画需要多久完成。请始终规定animation-duration属性，否则时长为0，就不会播放动画了。 3.2 animation-timing-function animation-timing-function值 ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐减慢。 liner：元素样式从初始状态过渡到终止状态速度是恒速。 ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。常称这种状态为渐显效果。 ease-out：元素状态从初始状态过渡到终止状态时，速度越来越缦。呈一种减速状态。常称这种状态为渐隐效果。 ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。常称这种效果为渐显渐隐效果。 3.3 animation-iteration-count 指定动画的播放次数，取值可以是： n：即具体的数字，表示具体的播放次数； infinite：表示无数次播放。 3.4 animation-direction 有四个值： normal：默认，从0%到100%； reverse：动画从100%执行到0%； alternate：动画在0%到100%之间往复执行； alternate-reverse与alternate一致，不过是从100%开始。 三、综合示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animation</title> <style> @keyframes slide{ 0% {background:#f00; left:0px; top:0px;} /* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-moz-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-webkit-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-o-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } .box{ width:100px; height:100px; background:red; position:relative; animation:slide 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:slide 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation:slide 5s linear 2s infinite alternate; /* Opera: */ -o-animation:slide 5s linear 2s infinite alternate; } </style> </head> <body> <div class="box"></div> </body> </html> 说明：这段代码首先用@keyframes定义了一个名称为“slide”的动画，效果是使一个背景为红色的元素从左向右滑动200px，同时背景色变为黄色；然后将这个动画效果和box类绑定，使这个动画：先延迟2s、然后无限循环播放此动画、5s完成一次动画、每次动画都以匀速演示、奇数次动画正向播放、偶数次动画逆向播放。
【前端技术文档】CSS3 Transition 过渡属性
整 理：晋哲、徐秀 时 间：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/