我的地盘's Blog http://www.yangjinjuan.cn/关注互联网那些事在俺的地盘发发牢骚RainbowSoft Studio Z-Blog 1.8 Arwen Build 81206zh-CNCopyright 2009-2012 http://www.yangjinjuan.cn. Some Rights Reserved. Tue, 15 May 2012 10:48:45 +0800要相信我可以！yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/zatan/133.htmlTue, 15 May 2012 10:27:34 +0800http://www.yangjinjuan.cn/zatan/133.html        人很奇怪，每天都在遭遇着不同的事情。我喜欢平淡而又平静的日子，可是这段时间各种各样的事情统统找上门来，生活也没那么规律了，心情也没那么平静了。可是，日子每天都还是一样的在过着，太阳照常每天东升西落，街上人们忙碌奔波着。。。反正老天给了什么样的日子，就得接受，高兴不高兴，快乐不快乐，都是一样的过，那就努力过好。多一些自信，有一颗向上的心！

]]>杂谈http://www.yangjinjuan.cn/zatan/133.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=133http://www.yangjinjuan.cn/cmd.asp?act=tb&id=133&key=d9526721[转]不要告诉我你懂margin(标题好嚣张啊)yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/web/132.htmlSun, 15 Apr 2012 23:39:26 +0800http://www.yangjinjuan.cn/web/132.html很长的一篇文章，很实用，收藏起来好好看看。

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用 padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……

写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。

Margin是什么

CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

Margin的特性

margin始终是透明的。

margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有：auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法，基本如下：

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。

垂直外边距合并问题

别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
  <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
  <div class="secondChild"></div>
</div>
</body>
</html>
 

如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要 border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。

为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。

用Margin还是用Padding

何时应当使用margin：

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

这里我截取了部分另外一篇文章的内容，详细内容请见用Margin还是用Padding

margin在块元素、内联元素中的区别

HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是 block，像table这种display:table的元素也是block元素。

inline元素（内联元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定 padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）

margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。

这是因为边界应用于内联元素时不改变元素的行高度，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line- height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，因为内联元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？这都说不准，所以统一都给每行定一个高，只能是line-height了。

margin-top/margin-bottom对内联元素没有多大实际效果，不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;，左边这个css如果写在inline元素上，他的效果大致是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。

最后在内联元素中还有上文我们提到的非可置换inline元素（non-replaced element），这些个元素img|input|select|textarea|button|label虽然是内联元素，但margin依旧可以影响到他的上下左右！

总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。

常见的浏览器下margin出现的bug

林林总总写了那么多，最后总结一些浏览器中常见的margin Bug吧，以后遇到margin下的布局问题可以查看这里找到解决的方案，如果你还发现其他关于浏览器下margin的Bug你可以发表留言，核对采纳后我会及时添加进去，感谢你的分享：

IE6中双边距Bug：

发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。

解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。

原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是 inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素 haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。

IE6中浮动元素3px间隔Bug：

发生场合：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。

解决方法：右边元素也一起浮动；或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。

原理分析：IE6浏览器缺陷Bug。

IE6/7负margin隐藏Bug：

发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时，超出父元素部分不可见。

解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

原理分析：iE6/7独有的hasLayout产生问题。

IE6/7下ul/ol标记消失bug：

发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。

解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。

原理分析：IE6/7浏览器Bug

IE6/7下margin与absolute元素重叠bug：

发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。

原理分析：这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

IE6/7/8下auto margin居中bug：

发生场合：给block元素设置margin auto无法居中

解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加 with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。

原理分析：缺少Doctype声明。

IE8下input[button | submit] 设置margin:auto无法居中

发生场合：ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

解决方法：可以给为input加上宽度

原理分析：IE8浏览器Bug

IE8百分比padding垂直margin bug：

发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。

解决方法：给父元素加一个overflow:hidden/auto。

原理分析：IE8浏览器Bug

 

 

 

 

]]>web前端http://www.yangjinjuan.cn/web/132.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=132http://www.yangjinjuan.cn/cmd.asp?act=tb&id=132&key=59a127ce寻找长尾关键词的方法yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/wangzhanyouhua/131.htmlSat, 14 Apr 2012 00:05:22 +0800http://www.yangjinjuan.cn/wangzhanyouhua/131.html寻找长尾关键词是SEO者必备技能，长尾关键字如何挖掘呢，这里总结一些常用方法


1、百度指数工具，(可申请账号)监控自己关注的某些词汇。
2、从百度搜索框获取，百度相关搜索。
3、辅助工具：追词网、莫大数据。
4、51啦、cnzz等统计器工具，收集时间段关键词。
5、百度竞价后台系统会推荐相关关键词。
6、百度竞价后台的关键词查询工具。
7、地域拓展法：如：SEO，东莞SEO、上海SEO、北京SEO等。
8、季节拓展法：如：鼻炎，可以拓展为夏季鼻炎注意事项、春季鼻炎注意事项等。
9、职业拓展法：如：如何预防前列腺炎，可以拓展为司机如何预防前列腺炎、教师如何预防前列腺炎等。
10、性别拓展法: 如：去痘方法，可以拓展为男士去痘方法、女性去痘方法、男孩去痘方法等。
11、用户思维习惯法：哪里有、哪里买、哪里可以、怎样、如何、怎么、多少钱、哪里好、最好的、哪里便宜等。
12、百度风云榜：http://top.baidu.com/ ；谷歌热榜：http://www.google.cn/rebang/ 。
13、商务通、53kf、乐语live800等软件下载关键词。
14、关键词询问拓展法，例如：SEO研究中心关键词，可以拓展为报名SEO研究中心培训班什么样？
15、对比关键词法，例如：你是Ａ企业，你竞争对手是Ｂ企业，就可以组合　Ａ和Ｂ到底哪个好？
16、百度知道，搜搜问问等问答平台。
17、分析同行网站关键词。
18、网民搜索意图，举例：以“减肥”为目标关键词，“我要减肥，减肥用什么药”都是通过网民搜索意图拓展。
19、质地 特点 功能，举例：以“汽车”为目标关键词，“敞篷汽车”是根据该产品特点拓展的长尾关键词。
20、应用领域和地域，举例：以“除湿机”为目标关键词，“工业用途除湿机”是根据应用领域拓展的。
21、品牌名称 通用型号，举例：以“手机”为目标关键词，“NOKIA5230手机”是根据产品品牌名称和型号拓展的。
22、商业模式，举例：以“童装”为目标关键词，“童装批发市场，童装代理商，童装品牌加盟”都是通过商业模式拓展的。
23、服务方式，举例：以“SEO”为目标关键词，“SEO培训，SEO外包”是通过服务方式拓展的。
24、企业性质，举例：以“英语培训”为目标关键词，“，英语培训中心，英语培训学校”都是通过企业性质拓展的。
25、销售模式，举例：以“性保健品”为目标关键词，“性保健品直销，性保健品团购，性保健品网购”都是根据销售模式拓展的。

]]>网站优化http://www.yangjinjuan.cn/wangzhanyouhua/131.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=131http://www.yangjinjuan.cn/cmd.asp?act=tb&id=131&key=5f76ab67WEB前端开发规范文档yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/web/130.htmlSat, 14 Apr 2012 00:03:24 +0800http://www.yangjinjuan.cn/web/130.html        有用的实在的文章转来一起分享

无论是从技术角度还是开发视角，对于web前端开发规范文档都有一定规范，本文就css3和html5的发展前景总结了一系列的web开发文档，仅供大家参考。

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;

2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”utf-8″ />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

<link rel=”stylesheet” href=”…” />

<style>…</style>

<script src=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向，例如：href=”http://itaolun.com/”, 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & ?(?) 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

样式写法:  #mainnav  .firstnav{…….}

按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

样式写法:  .main_firstnav{…….}

7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相应的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等； 自身属性主要包括: width  &  height  &  background  &  border; 文本属性主要包括：　font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；其他属性包括: list-style(列表样式)　＆　vertical-vlign　＆　cursor　＆　z-index(层叠顺序) 　＆　zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

定义

ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)

13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式’画’代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;

建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.

原文地址http://www.html5cn.org/article-558-1.html

]]>web前端http://www.yangjinjuan.cn/web/130.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=130http://www.yangjinjuan.cn/cmd.asp?act=tb&id=130&key=6acfe7f9面试时如何看出JavaScript工程师的水平yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/web/129.htmlFri, 13 Apr 2012 23:59:56 +0800http://www.yangjinjuan.cn/web/129.html基础

冒泡与捕获：它们的定义，它们的区别，如何阻止冒泡?基础知识，经典题目。但是不是每个人都能完整全面的回答出这个问题，面试者需要对DOM tree有自己的理解。

闭包：闭包是一个很好的面试题目，能够很好的考查出不同水平的面试者。了解什么是闭包、如何使用闭包、闭包的原理、闭包的真正原理，只有对JS的作用域链、垃圾回收机制有深入了解的工程师才能正确无误的完整回答这个问题。

 

 

Scope Chain是了解Closure原理的关键

工具库

jQuery：考查编程习惯和经验。jQuery作为现在使用最为广泛而且最简单的JS库，能够很好的测出使用者的开发经验和JS水平。一个有着真正开发经验的工程师，应当能正确的写出各种类型的选择器，回答为什么用bind来进行事件绑定、mouseover和mouseenter的区别。如果这些考不倒他，别急，live方法的实现原理、ready方法的实现机制这两个问题足以考查出他对DOM、浏览器差异的认识。

extJS、YUI、Prototype：这些工具库或框架都有各自的特点，可以采用像上面类似的问题从浅入深进行了解。

实际问题

解决实际问题考查的是你把知识融会贯通的能力、解决问题的能力、理解能力以及学习能力，这对综合素质的考查是一种很好的方式。第一次面对一个问题，面试者是否能迅速给出思路、由过程推导出结果，能否在一些提示下一步步得到最终的完整答案，这都是很好的考察点。

Autopager：自动翻页功能(实现方式参考http://blog.csdn.net/hfahe/article/details/5827483)是一个由浅入深考查面试者能力的好例子。对滚动条事件的了解，pageHeight、windowHeight、scrollY的区别和关系是两个关键点，而最后对于事件的clearTimeout优雅处理是隐藏的考查点。

Lazyloader：许多人见过图片延迟加载的产品，但是他们是否有了解过背后的实现原理?从功能抽象到具体实现，onresize的考虑、延迟触发的考虑，这道题目有一定难度，和上面的例子也有一定相似之处。

经过了前三个方面的了解，你应该已经对这个面试者的基本水平有了一个大致的判断。下面的步骤可以让你了解这个人能够承担什么样的工作，他的发展潜力多大。

项目

通过之前的项目经历可以认识他的Team work能力、解决问题的能力，在项目中的角色和承担的责任也可以反衬他的个人能力。

如果他没有做过跨浏览器开发，那么这种需要长期积累的任务就不适合分派给他来解决;如果他曾经有浏览器插件的开发经历，那么浏览器App的工作也许能够利用他的现有经验;如果他用过jQuery Mobile、sencha touch或者XUI，那么他可能适合开发移动Web App。作为管理者高明的地方在于，把合适的人用在合适的地方。

技术视野

具有技术视野的人一般具有很大的发展潜力，他们未来不会仅仅只是一个普通的工程师，而有可能会成长为技术专家或者技术管理者。

在HTML5方面应当对新的语义标签、Canvas、Webworker、Drag & Drop有所经验或者了解;在CSS3方面，应当或多或少尝试过Radius、Gradient、Transform。当然，如果能够了解Mask，甚至能够知道Flexible Box的使用方法和原理，那么这个人对盒子模型的理解和对新知识的学习能力可以得到很好的体现。

JS开发工程师是最容易的职位，也是最难的职位。新的技术和框架层出不穷、浏览器版本日新月异、越来越多API的出现，好的JS开发工程师需要随时学习和更新许多知识，包括后台(Webworker、Websocket、Node.js)、UI(Canvas、Transparent)、动画(Transform、Transition、Animation)等方面。面试者是否有自我更新意识，他的技术视野多高决定了他能够涵盖的范围多大，他的未来发展潜力多大。

 

 

 

 

HTML5已经战胜移动Flash，前途无量

如果能够把以上所有问题清楚、顺利的回答完整，我相信他的表达能力、沟通能力应该是相当优秀的，同时值得欣喜的是，我们又找到了一位优秀的同伴。

原文：http://blog.csdn.net/hfahe/article/details/6970474

]]>web前端http://www.yangjinjuan.cn/web/129.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=129http://www.yangjinjuan.cn/cmd.asp?act=tb&id=129&key=a4faff20如何用GA数据做科学的SEO优化yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/wangzhanyouhua/128.htmlFri, 13 Apr 2012 23:42:48 +0800http://www.yangjinjuan.cn/wangzhanyouhua/128.html做SEO离不开网站统计与分析工具，在这些统计工具中，最专业的要属GA了，它的功能比较强大，而且做得非常的专业， 基本上可以从网站的各个纬度来分析问题，它与google webmaster tools工具合称为SEO的两大利器，对于一些中大型网站来说，基本上都是用这两个工具配合着使用的。下边从实际工作经验出发，谈谈我们能够从GA中挖掘出什么有价值的数据。

　　1、网站的着陆页数据

　　许多站长都比较关心网站的收录数据，可是收录多并不代表着流量就多，我们更加应该关心的是网站的有效收录，也就是不但收录了，而且还至少通过搜索引擎来过流量的页面，这样的页面，在谷歌的分析工具中已经给出来了，也就是网站的着陆页，比起收录来说，着陆页要更加重要得多，我们不但要重视着陆页页面的数量，而且还要重视它的用户体验，重视它的转化率，比起对比收录来说，对比着陆页数量更加有参考价值，例如这个月着陆页数据比上个月增多了，说明你的网站在SEO方面进步了。而且许多用户都是通过着陆页再往下浏览的，所以一定要好好优化着陆页，引导直接成交或者引导往下浏览。

　　2、细化流量来源的转化率

　　特别是对于一些电商网站来说，利于GA可以设定目标，例如可以设定一个目标是当用户点击了购买确认页面，就算一次成交，当用户把东西放入购物车算另外一个目标，当用户在产品页面停留三分钟算一个目标，这样可以大概知道一个网站的转化率是多少，而且我们还可以细分流量，看看每个流量来源的转化率到底有多少，哪个低，哪个高，从而有针对性的去调整推广策略。

　　3、通过搜索查询优化网站的整体点击率

　　在GA里边，谷歌把一个网站中前一千个最热门的搜索查询数量、网站页面的展示数，以及点击数量都展现出来了，我们可以根本这个数据算出一个网站的整体点击率，而且还可以根本某个词语来算点击率，从而知道哪些词语的点击率高，还可以根本页面来算点击率，这样就可以优化页面了，当把一个页面的点击率提升时，网站的流量肯定会有所提高的。

　　4、可以设置规则计算出每个特征URL的流量

　　我们可以设置一定的过滤规则，统计出网站中每个目录的流量，以及流量来源关键词，可以大概算下它们的比例，看看我们网站中最主要的目录是不是来的流量最多，而且可以算出它们分别的转化率，从而根据这些数据对网站进行调整。

　　5、可以追踪用户的行为特征

　　在GA中，我们可以清楚的知道在所有的流量中，有多少人的电脑使用了火狐浏览器，有多少人使用的IE以及谷歌的chrome浏览器，而且可以知道每个操作系统用户有多少，例如有些网站中，它的用户电脑操作系统中，除了微软的之外，就是苹果的了，说明还是有很多人用苹果电脑上网站浏览的，甚至可以追踪出用户的电脑显示品的分辨率是多少，为分析用户行为提供了宝贵的数据来源。

　　上边提到的五点是比较重要的几点，其实GA的功能比这要强大得多了，我们可以在平时的实践中多去摸索，这里只是起到一个抛砖引玉的作用，希望大家在平时中多实践、多总结。

转载自：http://www.admin5.com/article/20120321/416857.shtml

]]>网站优化http://www.yangjinjuan.cn/wangzhanyouhua/128.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=128http://www.yangjinjuan.cn/cmd.asp?act=tb&id=128&key=cd30b472做SEO的你知道GA吗？yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/wangzhanyouhua/127.htmlFri, 13 Apr 2012 23:20:20 +0800http://www.yangjinjuan.cn/wangzhanyouhua/127.html        今天接到一个面试电话，本来去西站送同学。也没多想，同学上车后就直接从西站直奔那家公司面试。hr很不错。但是他们所谓的seo经理让人感觉很不咋滴。

        一开始我做自我介绍，其中我说到了用GA分析网站....那个seo经理皱眉瞪眼长嘴问了句“GA是什么？没听说过。。。”他们公司是做电子商务门户网站的，上网搜了下有3、4个这样的网站。中间hr提到公司seo团队有15个人左右。额。。。不是我自己想评判些什么？只想说一句这样的水平也能做SEO经理？做公司自己的电子商城网站都对用户的行为没有一个了解，网站排名好，又有什么用？

        这个行业的混乱和某些人自信大胆的行为，公司使劲压低薪水来招来这样一个seo经理？也能反应这个公司确实不咋滴。。。

        那在做seo的你知道GA吗？看下百度百科吧：

        Google Analytics是著名互联网公司Google为网站提供的数据统计服务。可以对目标网站进行访问数据统计和分析，并提供多种参数供网站拥有者使用。
Google Analytics（分析）向您显示人们如何找到和浏览您的网站以及您能如何改善访问者的体验。提高您的网站投资回报率、增加转换，在网上获取更多收益。
您的免费 Google Analytics（分析）帐户有 80多个报告，可对您整个网站的访问者进行跟踪，并能持续跟踪您的营销广告系列的效果：不论是 AdWords广告系列、电子邮件广告系列，还是任何其他广告计划。利用此信息，您将了解哪些关键字真正起作用、哪些广告词最有效，访问者在转换过程中从何处退出。请勿因此功能免费提供而小看它，Google Analytics（分析）是一种功能全面而强大的分析软件包。

        GA的价值和GA的优势
]]>网站优化http://www.yangjinjuan.cn/wangzhanyouhua/127.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=127http://www.yangjinjuan.cn/cmd.asp?act=tb&id=127&key=266c7784网站分析指标揭秘yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/wangzhanyouhua/126.htmlFri, 13 Apr 2012 23:09:51 +0800http://www.yangjinjuan.cn/wangzhanyouhua/126.html最近很懒，博客开了这么久，现在却烂的一片。那么就看到有用的，还不错的文章就先转来大家一起分享咯。

SEO到一定的程度，必须对网站进行分析，分析主要从一下几个方面

访问量，访客量，网页停留时间，网站停留时间，跳出率，退出率，转化率，参与度，前两个相信是大部分seoer都在关注的，但如果想要做更好的分析，就应该把 下面这些指标也进行分析。

优秀指标的3个特性

 

  1. 简单：好理解，易推广、执行
  2. 相关：与网站业务相关
  3. 即时：如果你所处的行业每过3天就会发生变化而你却要花费9天才能获得一个指标的数据，那么即时这个指标是最好的，也没有任何价值，为了保证即时性甚至可以牺牲指标的复杂度与完美程度。
网站成功的3个教训
  1. 不要过分追求完美：变化很快，要保证及时性
  2. 要做到少而精：简单
  3. 重视网站指标的生命周期：利用优秀指标的3个特性，找出关键指标并用以衡量网站的表现，再分析收集到的数据，转化为实际行动
数据含义及分析
  • 访问量：定义为网站上进行绘画的次数
  • 访问数较高且上扬：说明在这段时间内业务可能在朝着有利的方向发展
  • 单次访问页面数&网站停留时间较高且上扬：可能确实在某方面做的不错
  • 跳出率：用户不做任何深入动作立即离开的比例
  • 跳出率较高：值得担忧
  • 跳出率：从用户角度体现网站有多差，页面跳出率高，则无法确保把用户真正带进网站。
  • 页面查看：访问中客户端向服务器请求过的页面数
  • 平均网站停留时间：指用户在网站上停留的时间长短
  • 新访问比例：第一次来访的会话数占总访问数的比例
  • 新访问比例较高：新流量引入较多对所有业务都有好处
  • 直接流量：指那些直接输入URL或者是使用收藏夹和标签来到网站的流量。
  • 直接流量：极限占比由业务性质决定，若比例较低，则意味着网站在与用户有效互动、吸引用户回访方面存在问题。
  • 反向链接网站：也称为外部来源网站，是那些将链接指向你的站点的博客行业联盟站、论坛和竞争对手网站等。
  • 反向链接网站：查看这些源页面，如果对方靠谱可建立推广关系。此类流量越大越好，如比例较低说明自我推销工作不到位。
  • 搜索引擎：就是由各搜索引擎带来的流量，不只包括自然搜索流量，还包括你的付费搜索流量。
  • 搜索引擎：只收到是排名第三的来源，须严密关注。
  • 其他流量：包括由banner广告、电子邮件营销、社会媒体广告、联盟广告等带来的流量。一般都是买来的广告位流量（但不包括付费搜索）。
  • 其他来源：一般占比较小，若占比较高，说明在吸引免费流量方面没下大工夫。
]]>网站优化http://www.yangjinjuan.cn/wangzhanyouhua/126.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=126http://www.yangjinjuan.cn/cmd.asp?act=tb&id=126&key=93a9716e网页中 点击运行代码功能[带运行,复制,另存为]yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/web/125.htmlThu, 22 Mar 2012 23:00:38 +0800http://www.yangjinjuan.cn/web/125.html function Preview(obj) { var TestWin=open(''); TestWin.document.write(obj.value); } function copyCode(obj) { var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.scrollIntoView(); rng.select(); rng.execCommand("Copy"); rng.collapse(false); } function saveCode(obj) { var winname = window.open('', '_blank', 'top=10000'); winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); winname.document.execCommand('saveas','','homepage.yesky.com.htm'); winname.close(); }


--><FCK:hr size="1" noshade="noshade" style="border:1px #cccccc dotted" />

 
]]>web前端http://www.yangjinjuan.cn/web/125.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=125http://www.yangjinjuan.cn/cmd.asp?act=tb&id=125&key=3698bc53IE6下float后margin出现双倍边距Bug处理办法（转）yangjinjuan@163.com (jinjuanyang)http://www.yangjinjuan.cn/web/123.htmlThu, 22 Mar 2012 22:52:53 +0800http://www.yangjinjuan.cn/web/123.htmlIE6下margin双倍边距Bug的处理办法

一、什么是双边距Bug？

先来看图：

我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：

以下为引用的内容： 

  1. .floatbox{  
  2. float:left;  
  3. width:150px;  
  4. height:150px;  
  5. margin:5px05px100px;  
  6. /*外边距的最后一个值保证了100像素的距离*/  
  7. }  
  8.  

很简单，但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。如下图：

二、怎么会这样？

说实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。

三、如何修正这个Bug？

很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：

CSS代码如下：

以下为引用的内容：
 

  1. .floatbox{  
  2. float:left;  
  3. width:150px;  
  4. height:150px;  
  5. margin:5px05px100px;  
  6. display:inline;  
  7. }  
]]>web前端http://www.yangjinjuan.cn/web/123.html#commenthttp://www.yangjinjuan.cn/http://www.yangjinjuan.cn/feed.asp?cmt=123http://www.yangjinjuan.cn/cmd.asp?act=tb&id=123&key=b7bf8098