html申明

对ie6-8在html中添加no-css3这个class和各个版本的class，对ie7以下添加lte7这个class，然后根据我们目前使用浏览器的比例，把第一的ie6放在判断第一位。

判断浏览器，添加所需文件

//为ie6-8添加一个ie.css文件
     //为ie6添加处理png的js文件
     

常规布局

这个布局的特点是border，margin，padding由里面的inner部分来完成，所以左中右三个加起来就是总的宽度，而不用考虑左中右的margin，border，padding之类的，当然之所有选择这个布局，还有其他的一些变化，详细请参看。这里列出左右边栏布局的代码以供参考。

关于H1

在首页的时候，网站的h1标题为站点名字，当网站在内页的时候，内页标题为h1。所以对站点名字输出进行判断，以jsp为例：

<% if(isFront) { %>  
天涯游戏
<% }else { %>  天涯游戏<% } %>

当然大多数时候其实我们一般是显示logo，而网站名称我们也许是需要隐藏的，那样我们添加了个ele-invisible的class，这个class的样式为：

/*ele-invisible  */.ele-invisible{
       position: absolute;    clip:rect(1px 1px 1px 1px);/* ie6,7*/    clip: rect(1px, 1px, 1px, 1px);}

边栏区块

边栏一般加有aside-block这个class，然后每个区块有一个属于自己的id，以方便协作查阅及日后修改。内容由block-content这个class包括起来，如果标题右侧有更多等信息，使用head-title结构。当然如果边栏区块足够简单如就一张图片，那就根本就不需要这个结构了。

tabs选项卡

对所有的选项卡提供一个相同的class结构以方便js操作，标题用tabs-nav包裹起来，tabs-content里面放切换的内容，所有的内容用tabs-content-wrap包裹。如果项目本来就一种tabs，那么可以直接在这三个class上面定义样式，如果有多种tabs样式，建议样式由其他class来控制。

title1title2
     
  
      
       content1
      
  
      
       content2
      
     

多列

这里的多列指的是二等分，三等分或四等分的情况，二等分的时候class为col-two,三等分的class为col-three，四等分的class为col-four，当然因为子元素并列排行所以一般也得配合clearfix用，然后子元素有一个共同的class为col。对于最后一栏margin的处理，可以采用加个class为last，或者使用父元素的负margin来撑大容器。

     
     
  
      
    
       
    
       
  
      
  
      
    
       
    
       
  
      
     
     
     
  
      
    
       
    
       
  
      
  ...
     
     
     
  
      
    
       
    
       
  
      
  ...
     

 

From: