geekman

整 理：徐秀、晋哲

时 间：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.

1. 基础选择器

2. 组合选择器

3. 属性选择器【ie8- 版本必须声明<!doctype>,否则(伪)属性、伪类选择器无效】

4. 伪类选择器

5. 伪元素选择器

• 常用选择器

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... 

1. 单词组合命名，用连字符”-(减号)”连接，单词组合体现模块功能或者是模块内容。如: .article-hd（文章头部）;  .page-tt （页面标题）
2. 特殊化class，可以采用前缀/后缀来命名。如: 用户页的页面标题用: . user -page-tt 。
3. 对于公用样式，命名最好多体现其功能，如: sidebar/subnav/left-page… ，并降低其权重;对于相对稳定的样式，可以跟内容结合：如goods-name/goods-intro/user-info…。

CSS选择器HTML示例地址：
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端文档临时存放\示例文件\CSS选择器示例

整 理：肖雅君、曹燕

时 间：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完成一次动画、每次动画都以匀速演示、奇数次动画正向播放、偶数次动画逆向播放。

 

整    理：晋哲、徐秀

时    间：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;
}

整    理：肖雅君、曹燕

时    间：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端的分享按钮(如上图)、固定位广告等。

 

整 理：徐秀、晋哲

时 间：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）



（*注：以上演示图片中部分图片为了清楚的显示和对比样式，采用了换行显示，实际做项目时不能换行不能有空格。）

4、加注释

(1)给重要的区块加上注释，如：给重要图片加上 alt 标签。

(2) 给区块代码及重要功能(比如循环等)，需在区块的开始或结尾添加注释。（另注释太多，在 ie6 下会有bug，故酌情添加。）

5、特殊符号

特殊符号使用代码替代，如<用&lt;替代、>用&gt;替代等。

6、内部js代码的位置

如果 js 文件只是要实现某些功能（比如点击按钮事件），那就在底部</body>前引入它。如:
   <body>
         <div>
         </div>
   <script>
   </script>
   </body>

 
附录：

1、PC端（公司统一）

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<meta name="keyword" content="">
<meta name="description" content=""> 
<link rel="stylesheet" href="styles/style.css"> 
</head> 
<body> 
/* HTML代码 */
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script> 
</body> 
</html>

2、Wap端（公司统一）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="stylesheet" href="styles/style.css">  
</head> 
<body> 
/* HTML代码 */
<script src="http://file2.ci123.com/ast/js/zepto.js"></script> 
</body> 
</html>

3、PC端格式化样式

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}body,button,input,select,textarea{font-family:Arial,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;font-size:12px;}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}ul,ol{list-style:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;}a:link,a:visited{color:#000;text-decoration:none;}a:hover{color:#c00;text-decoration:underline}img{border:0;-ms-interpolation-mode:bicubic}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*zoom:1;clear:both;}* html>body .clearfix{display:inline-block;width:100%}* html .clearfix{/*\*/height:1%;/**/}*+html .clearfix{min-height:1%}

4、WAP端格式化样式

body{padding:0;margin:0;font-size:14px;font-family:Arial;}h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}dl,dt,dd,ul,li,ol{list-style:none;}img{border:0;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{clear:both;}table{border-collapse:collapse;border-spacing:0;} 


参考链接：

公司后台前端开发文档：
http://abc.ci123.com/admin/tech/shareexp/list.php?cpage=4 
HTML编码规范：http://blog.geekman.vip/archives/353
CSS编码规范：http://blog.geekman.vip/archives/352

整    理：晋哲、徐秀

时    间：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】：改变图像大小