打开几个门户站试下，发现新浪和腾讯的门户站有部分不是广告的区域也被屏蔽掉了，新浪的左侧，腾讯的右侧。

查看被屏蔽的区域发现和之前遨游浏览器上出现的情况一样，在ID Class 命名当中包含了ad字符，被当作广告屏蔽掉了。

新浪的左侧：

<div class="txtadsblk01"></div>

腾讯的右侧（比较多还是截图吧）：

站点呈现的样子我就不附图了，大块的空白位置占着，这部分信息都不见了。

哦对了另外Chrome中iReader这款扩展也不错，就是类似与Safari5、遨游浏览器中的阅读模式一样，iReader还可以自定义设置。

其实，回过头来可以想想这些插件扩展出来的原因，很多下载站、资源站点N多的广告和难以阅读的排版方式，包括一些旗帜网站（大红色背景,看多了就火眼金睛了），我这里是白板。。细节体验还需要持续的完善~

回到正文，文件头部的申明信息不可能每次都要手动去敲上去，比如之前提到的：

文件申明信息

• 文件头部添加申明信息，包含描述、作者、最后更新（更新人+更新时间）；

示例供参考

/**
 * Description: register style css (可中文)
 * Author: JeffPan
 * Update: JeffPan(2011-11-16 14:11)
 */

上面这段在IDEA编辑器中可以在模板中自定义下：

/**
 * Description: ${NAME}
 * Author: ${USER}
 * Update: ${USER}(${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE})
 */

修改方法：File - IDE Settings - File Templates 可以在右侧进行编辑操作.

当然如果是公用电脑，会有团队其他成员用到也可以将${USER}设置成如${MyName}（PS:我是直接上文本JeffPan），代码如下：

/**
 * Description: ${NAME}
 * Author: ${MyName}
 * Update: ${MyName}(${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE})
 */

新建文件时生成的头部信息是相同的，唯一区别的是设置的参数${MyName}在新建文件的时候会弹出对话框让当前编码人员填写自己的名字，如下图所示:

生成申明信息如下：

/**
 * Description: common
 * Author: JeffPan
 * Update: JeffPan(2011-11-16 16:04)
 */

OK. 新建文件时生成的申明模板已经搞定，但是平时编辑更新保存后，时间和更新人的信息IDEA这款编辑器下是如何自动更新的呢，求教~

额 好吧，IDEA只是在创建文件时生成的，编辑时不会去更新，要使用Keyword Substitution方法搞定，移步这里.

文件申明信息

• 文件头部添加申明信息，包含描述、作者、最后更新（更新人+更新时间）；

示例供参考

/**
 * Description: register style css (可中文)
 * Author: JeffPan
 * Update: JeffPan(2011-11-16 14:11)
 */

注释

• 通过注释有效的组织管理代码文档，提升团队开发的合作效率，减少维护成本；
• 注释的形式 – 使用一致的标点和结构来注释代码，在维护他人的代码时不要使用新的注释形式，要顺延已有的注释形式，确保一致性；
• 注释的简洁 – 注释的书写要避免冗长及凌乱不堪，确保简洁的同时不产生歧义；
• 注释的数量 – 注释必不可少，但也不宜过多，确保有效的提示，避免眼花缭乱的注释；
• 注释的清理 – 在代码交付及合并部署发布之前，删除临时或无关的注释（如：add-11-12-06），以避免日后在工作中产生混乱；

示例供参考

/* S global */
Global code here …
/* E global */
 
/* S header */
Header code here …
/* E header */
 
/* S nav */
Navigation code here …
/* E nav */
 
/* S main content */
Main content code here …
/* E main content */
 
/* S footer */
Footer code here …
/* E footer */
 
/* S 11月临时广告插入 */
11月临时广告插入 code here …
/* E 11月临时广告插入 */

//对于大段的同类代码我们使用S（Start）开头和E（End）结尾，小模块的注释可以只保留S（Start）开头，避免过多的结尾重复，注意大写字母S和E两边要保留1个空格位，HTML注释亦同。

• 尽量避免中文及特殊符号出现在CSS样式表中（确保CSS样式与页面编码一致的情况下可以适当使用）

就写这么多吧，最近花了些时间在网络营销上，博客还是要坚持更新，在此勉励下自己，有好的建议欢迎补充哈~

公司从分部调来一位前端MM，以缓解最近项目上的压力，毕竟目前公司的整个项目流程上前端这个位置处于瓶颈（我们整个工作流程视为环链，决定环链的强度的关键因素在于最弱的那个环，也就是说最弱的那个环就是我们所说的制约因素、瓶颈，部门的工作成果品质或是效率，并不会因为某个人的出色表现而如何如何。）

另一方面也是为了减少沟通成本，团队起步期需要逐渐形成规范文档，加强团队配合。下面是工作沟通过程中的其中一部分：

代码精简取舍

关于模块化一词，在工作中被很多人谈到认可，之前整理了两篇相关的《淘宝栅栏布局模块化命名浅析》、《Column布局参考 – 圣杯》大体记录整站或单页面中的一种布局及命名方式。

这篇不会给出小模块的细节部分代码示例，网上真的很多，例如 Ghost的这篇《页面重构中的模块化思维》及文中提到的《从宜家的家具设计讲模块化》 ，这些都是中工作生活中累积下来的，和前端知识收集与管理习惯有关，这里让我想起一些微博上的一些短句：“别人比你牛B并不可怕，可怕的是比你牛B的人比你更努力。” 真的压力好大，想想自己除了工作，大部分时间都在吃睡玩，在此写出来勉励下自己博客要坚持更新。

鸡蛋的例子

上图结合代码重构可以简单的理解为：

a.鸡蛋数量较少时 – 减少使用固蛋装置，书写精简的HTML结构会显得很自然贴切

b.鸡蛋数量适中时 - 使用固蛋装置，将一枚枚鸡蛋嵌入到已经制作好的模具中，方便存取及安全防护

c.鸡蛋数量较多时 - 可能会用到不同的交通工具输送到不同的场合时，使用固蛋装置，多个模块的平稳融合，方便存取、安全防护及协作维护

在网站重构过程中，项目初期适当的增加标签嵌套，尽量的统一每个模块中的标签结构，同时注意标签语义化，并为这些结构标签添加统一规则的类命名，使得制作出的模型有统一的接口（凹槽、挂钩），方便后期的扩展、降低维护成本。重构工作入门相对简单，但越是简单的东西，要处理的贴切得当，过程中所要做出的取舍需要不断的总结积累。

欢迎拍砖哈，共同进步~

－－－－－－－－－－－－－－－－－－原文PPT－－－－－－－－－－－－－－－－－－－－

源：http://sofish.de/1864

其实就是两个地方添加下修饰代码，如下：

1、引用页iframe标签上添加属性（宽高可无视，这里是高清IPTV的屏幕尺寸）：

<iframe src="transparentPage.html" frameborder="0" width="1280" height="720" allowtransparency="true" style="background:transparent" ></iframe>

主要是这句

allowtransparency="true" style="background:transparent"

2、被引用页（如transparentPage.html页面）中的body标签添加属性：

body {
   background: transparent;
}

这样关于iframe背景透明的问题就得到修复

看完效果分析一下：这里有三个嵌套的元素：第一个是最外层不做任何的变化，第二个是第二层元素做顺时针旋转，第三个是最里层元素在同一方向作逆时针旋转。如图：

HTML

<div class="box">
	<div class="inner">
		<div class="content"><img src="img.jpg" alt="my bike" /></div>
	</div>
</div>

The CSS

在三个元素中最重要的一个属性是：overflow:hidden.如上所说第一个元素不做任何的旋转，给一个固定的width and height.第二个元素和第三个元素同时旋转，但两者旋转的方向一个是顺时针一个是逆时针，旋转的角度是一样的。设置好后可以做进一步的调整，使其更加美观。

/* angled box styles */
 
.box{
	width:700px;
	height:300px;
	background:#ccc;	
	overflow:hidden;
	margin:1em 0;
	}
.box .inner{
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	width:300px;
	height:450px;
	margin-top:-70px;
	margin-right:100px;
	overflow:hidden;
	background:#aaa;
	float:right;
	border:3px solid #fff;
	}
.box .inner .content{
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	width:500px;
	height:320px;
	margin-top:60px;
	margin-left:-80px;
	overflow:hidden;
	background:#f1f1f1;	
	}

因为用到的属性是css3中的，所以在ie里的效果没有chrome和firefox以及其他浏览器美观。

另外再写一种我在工作中遇到的关于图片旋转的方案，当然所用的的css属性基本上都是一致的：

HTML

<div class="photo_box">
    <div class="photo photo1"> <img src="image.gif" > <div>
    <div class="photo photo2"> <img src="image.gif" > <div>
    <div class="photo photo3"> <img src="image.gif" > <div>
    <div class="photo photo4"> <img src="image.gif" > <div>
<div>

The CSS

.photo_box {
position:relative;
width:350px;
height:250px;
margin:0px auto; 
float:right; 
margin-right:20px;}
.photo{ 
width:350px; 
height:250px; 
position:absolute;}
.photo img {
background-color:#FFFFFF;
border:1px solid #666; 
width:350px; 
height:250px;}
 
.photo1 {
top:10px;
left:60px;
transform:rotate(5deg) scale(0.5);
-o-transform:rotate(5deg) scale(0.5);
-webkit-transform:rotate(5deg) scale(0.5);
-moz-transform:rotate(5deg) scale(0.5);
}
.photo2 {
top:30px;
left:80px;
transform:rotate(8deg) scale(0.5);
-o-transform:rotate(8deg) scale(0.5);
-webkit-transform:rotate(8deg) scale(0.5);
-moz-transform:rotate(8deg) scale(0.5);
}
.photo3 {
top:35px;
left:-10px;
transform:rotate(-10deg) scale(0.5);
-o-transform:rotate(-10deg) scale(0.5);
-webkit-transform:rotate(-10deg) scale(0.5);
-moz-transform:rotate(-10deg) scale(0.5);}
.photo4 {
top:15px;
left:50px;
transform:rotate(-5deg) scale(0.5);
-o-transform:rotate(-5deg) scale(0.5);
-webkit-transform:rotate(-5deg) scale(0.5);
-moz-transform:rotate(-5deg) scale(0.5);
}
.photo:hover {
transform:rotate(0) scale(0.5);
-o-transform:rotate(0) scale(0.5);
-webkit-transform:rotate(0) scale(0.5);
-moz-transform:rotate(0) scale(0.5);
z-index:2;
cursor:pointer;
}

当然这里的top和left的值可以随便设置，只要看着美观就OK。当然这种旋转的方法在IE里面是不兼容的，不过我可能过改变位置的方法使它在层次上面变得美观一些。当然这个例子是基于上面例子之上的。

既然图片可以旋转，那么文字必然也可以做旋转了，方法和图片差不多。但在网上查了一下，发现用的最多的就是writing-mode : lr-tb、tb-rl属性，但是这个属性并不是所有的浏览器都支持，为此困扰了一阵子。现在介绍一种兼容ie firefox chrome的文字旋转90度的方法：只要我们在sytle中加上以下style就OK了

.text{
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
/* for IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

文字的旋转相对于图片来说更容易一些也更易于兼容浏览器。

HTML部分

<div id="content">
 
    <div class="block col-m-s300-e100">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
        <div class="extra">extra</div>
 
    </div>
 
    <div class="block col-s350-m-e200">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
        <div class="extra">extra</div>
 
    </div>
 
    <div class="block col-m-s300">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
    </div>
 
</div>

CSS部分

.main-wrap, .sub, .extra { float:left;}
.main-wrap { width:100%;}
.main { background-color:#eef;}
.sub { background-color:#fee; }
.extra { background-color:#efe;}
 
.block { border-bottom:20px dashed #6C0; width:100%; }
.block > div, .block > div .main { height:200px;}
 
/*  Clearfix
----------------------------------------*/
.block:after, .block .main:after, .block .sub:after, .block .extra:after {
	clear:both;
	content: '20';
	display:block;
	height:0;
}
.block, .block .main, .block .sub, .block .extra {
	zoom:1;	/* ie6 */
}
 
/*  The First Block
--------------------------------------- */
 
.col-m-s300-e100 .main {
	margin:0 400px 0 0;
}
 
.col-m-s300-e100 .sub {
	margin-left:-400px;
	width:300px;
}
 
.col-m-s300-e100 .extra {
	margin-left:-100px;
	width:100px;
}
 
/*  The Second  Block
--------------------------------------- */
 
.col-s350-m-e200 .main {
	margin:0 200px 0 350px;
}
 
.col-s350-m-e200 .sub {
	margin-left:-100%;
	width:350px;
}
 
.col-s350-m-e200 .extra {
	margin-left:-200px;
	width:200px;
}
 
/*  The Third  Block
--------------------------------------- */
.col-m-s300 {}
.col-m-s300 .main {
	margin:0 300px 0 0;
}
.col-m-s300 .sub {
	margin-left:-300px;
	width:300px;
}

这里分享自己常用的一种分栏方式之一，之前整理过淘宝栅栏布局模块化命名浅析，当时并不晓得圣杯布局，有幸看到lifesinger的渐进增强式布局探讨（下），受益匪浅。

先看看之前的这个图

上面这个class中的 3 5 7分别指的是三列布局在24栏栅格化分别占到的栏数。

但事实是并不是所有站点都适合或使用了栅格化布局，尤其是在多项目快速开发的过程中，人少活多，面对着大量的页面，应该没有太多人那么高效率的，配合设计师实施栅格化设计布局。

但是这种负margin值，页面内容部分主次顺序分明（main、sub、extra），兼容性好(IE6 zoom:1; 清除浮动，clearfix)，任意列可高出等优点。

我们给到它，固定列宽的具体数值，就可以摆脱删栏的束缚，随意使用了（即便是高压下给到设计稿精度不高），我们用这样的命名来应对：

col-m-s300-e100
main列100%;
sub子列300px；
extra附加列100px;
//实际上m的宽度一般是通过 content 这个div的宽度来限定的

col-m-s-e
我们通过m s e的从左至右的出现次序来确定网页中3列的显示位置，这点从文章开始的图和对应的代码中可以看出。

演示地址：http://uecss.com/demo/jeff/msbox/column.html

今天，你裸了吗

4月9日的CSS裸奔节到了，脱掉CSS，露出HTML真实的脊梁骨吧 – PS:宁可CSS分层多一些，也要保证HTML结构的简洁、语义化的书写习惯。

这是总宽950像素的24栏栅格应用，先来看下淘宝网的一处3栏布局(当然现在的淘宝网已经改版了，尽管我还是不太习惯)：

这里是对应的代码：

我们可以看到 class=”grid-c3-s5e7″ 这个命名似乎有些特别，
再看看其包含的class=”col-main” 和 class=”col-sub” 以及 class=”col-extra skin-orange”

再多一些样本代码：

.grid-c, .grid-c2-s4, .grid-c2-s4f, .grid-c2, .grid-c2f, .grid-c2-s6, .grid-c2-s6f, .grid-c2-s7, .grid-c2-s7f, .grid-c2-s8, .grid-c2-s8f, .grid-c2-s9, .grid-c2-s9f, .grid-c2-s10, .grid-c2-s10f, .grid-c2-s11, .grid-c2-s11f, .grid-c2-s12, .grid-c2-s12f, .grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b, .grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b, .grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b, .grid-c3-s8e8, .main-wrap, .col-sub, .col-extra {
}

我们选择其中一个来仔细看下可以尝试着作出这样的解释：

上图中 s5e7 里的 5 和 7 代表的是在 24栏 中所占的栏数。

如下这样更方便我们进行模块化操作：

.grid-c3 {}
.grid-c3-s5e7 {}
.grid-c3-s5e7 col-main {}
.grid-c3-s5e7 col-sub {}
.grid-c3-s5e7 col-extra {}

.grid-c2 {}
.grid-c2-s7f {}
.grid-c2-s7f col-main {}
.grid-c2-s7f col-sub {}

稍微注意下你会发现 上例中我只提到了 s, e 的解释，并没有对 f, b, d 做出解释，因为我觉得原理我们已经掌握，f b d 只是淘宝因内容区域不同而采取的命名方法(应该可以这样理解)。
可以看出 -s5e7 , -s7f , -s5e7d , -s5e7b , -s9e6c 之类的就显得不太符合语义化命名，只是为了让我们更方便的使用，我这个人喜欢简洁些的风格，因此在这里我对它进行了升级。

下面看下整合出属于自己的栅栏布局命名，我把这些用在公司的项目上，来看下我的命名方法：

(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 简洁版

注意这里的数字和上图中的数字进行对比，你会发现我省掉了w13即最宽的那一栏main（通常最宽的为main），
我将c 和 e这样除了main之外的窄栏通常固定宽度， main的宽度则为width:100%; 具体实现如下：

假设最外层的div 为 <div class=”content”>
.content {
 position:relative;
 width:总宽减窄栏的宽度;
 padding-left&right:窄栏的宽度;
}

窄栏浮动，main 绝对定位
.main {
 position:absolute;
 top:xx;
 left&right:窄栏的宽度;
}

先作下简单的说明，这里与淘宝网命名不同的是我没有采取 s（sub）和 e (extra) 这样的习惯，
而是用到了 w(west), c(center), e(east)
我将网页上的方位分为上北下南左西右东
不使用 l (left) 等上下左右表示是因为在如宋体等字体下 left 里的 l 与数字1 很容易造成混乱。

下面是一系列方位栅栏模块化命名例如：

(两栏页面栅格布局-例：首页) Grid-c2-e5

(两栏页面栅格布局-例：商品详细页) Grid-c2-w6

(两栏页面栅格布局-例：注册流程页) Grid-c2-e7

方案一：(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

方案二：(三栏页面栅格布局-例：部分列表页) Grid-c3-c7e5

(三栏页面栅格布局-例：商城主页、个人空间预览页) Grid-c3-w6e5

(三栏页面栅格布局-例：个人空间管理页) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 这类的完整版去掉main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″ 这类简洁版(很快可以猜出-w5e6所对应的宽栏位c13，即左边占24-5-6=13a的main)，
不想用上面的方法为main定width:100%;

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

.grid-c3-c6e5的名字看起来蛮长的,考虑过去掉.grid-c3-c6e5中的 grid 这个单词，但似乎不太方便阅读，况且后面会出现 .mode-a , .mode-b 之类的模块命名，统一下会更好；
这里的命名习惯建议使用的表意命名《超越CSS》有提到过。

可以看到简洁版的只有3个字母出现 w (west), c (center), e (east)
不用记太多的字母含义，grid-c3-c6e5这样的命名方法让我们更好的对栅格化布局进行操作。

博客园观点：http://www.cnblogs.com/cnpass/archive/2009/05/07/cnpass.html
经典论坛观点：http://bbs.blueidea.com/thread-2926561-1-1.html

PS：一些事情是不会停止的，现在自己再看到这些内容，发现存在很多不足，还好是浅析，标记到这里