[html5]据说这是alibaba前端的css设计规则（技术文章分享）(3)

所提供样式可以分为以下几类：

• a>  tag optimization    即标记优化。

  包括对body,td,select,input,form,ul,li,img,h3,p的优化，有待扩充。主要优化margin,padding,font-size

  强调几个比较重要的，也是较常出现引发问题的。

  Form{margin:0px;}有时页面上莫名出现了空白，很多时候是因为忽略了form的margin

  Img{border:0px}如果没有border:0px; 当给<img />套上<a/>时，图片会出现丑陋的边框色

  Input{font-size:12px;}这可是很重要的哦，没有font-size限制的密码框会呈现超大的圆点并且撑大input框

  Body{} 也许大家不会留意到，如果不加定义font-family:宋体这个属性，在font-size:12px下，ie里文字的实际占高 14px，而ff里实际占高是15px，当然即使加了，在opera下文字占高还是不一样的，这就需要在任何文字情况下不要忘了line-height或 height。

  h1{font-size:14px;margin:7px 0px;}

  h2{font-size:14px;margin:7px 0px;text-align:left}

  h3{font-size:14px;margin:7px 0px;text-align:center}

  h1-h3 建议所有页面加粗的内容用h1-h3取代自定义的font-weight，SEO教导我们使用 h 可以提高搜索效率。

• b>    link 部分。可以修改或增加你喜欢的链接样式。
  注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用

• c>   for testing 故名思意。当你需要做测试时，可以用到的，例如，你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’

  .lb 使用范例：<ul class=”lb”><li></li></ul>这样就能看到ul下所有li的边框了。

• d>  common    部分。重头戏来了，有必要一个个详细说明了。
  .clr{clear:both}为了保留之前的习惯，做的一次向下兼容。需要说明，clear层样式在

  .c{clear:both;overflow:hidden;+overflow:visible}里已经重新定义，请尽量使用新样式，并牢记新样式只能在单独的clear层使用

  ——什么是单独的clear层？<div class=”c”></div>就是，除了.c样式没其它className，并且<div/>内为空。

  为什么要重新定义？完全出于兼容opera考虑，最近才做opera下的兼容，还是源于同事对opera的推荐。（如嫌麻烦，不必深究，用就行了）

  .l{float:left;display:inline}   最常用的属性了。但注意，新的定义里多了 display:inline，由于在当前构架下，多使用margin布局，而float元素在ie6下有著名的double margin bug，解决方案即给float元素加display:inline，当然，所有的float元素都加上这条属性不是完全没问题，ul就会稍微有点问题， 在后面会有针对这类问题的样式解决，比起给全局的float元素解决double margin问题要省事的多。

  .f{width:100%} 该属性的作用不言而喻，设置本层的宽度为上层的宽度。需要强调：本属性与 padding、border、margin-left、margin-right一起使用要特别小心，这些属性会给额外增加元素的实际宽度，在ie下多 余的宽度会撑大上层元素，而ff和opera下则不会有撑大现象。

  .z{zoom:1} 非常重要的一个样式，用来解决ie6 下的块级元素layout上呈现的多种bug。

  .h{width:50%;+width:49.99%} 跟上面的属于同类，设置本层宽度为上层宽度的一半，至于为什么49.99%       我也不想的，ie6不让50%通过嘛。下面是测试代码（需要有global.css样式文件引用）

  <div class=”bd”>

  <div class=”l h bg h17″></div>

  <div class=”r h bg h17″></div>

  </div>

  .b .s .m .g 不说了，控制文字大小和加粗的。

  .pa{position:absolute } 定义层为绝对位置，float元素定义 .pa 后float属性失效。既然是绝对层left、top属性是必不可少了不然失去了绝对层的意义，所以不要忘记设置left，top。绝对层上层一定记得要 套相对层position:relative，不然，绝对层left、top属性参考的对象会是最外层的window，在body之外了，谁也不希望定义 的元素跑到body外面去吧。在相对层内的绝对层可以随意定位，配合z-index属性几乎可以用html代码模拟photoshop画图了，^_^纯属 玩笑。

  .pr{position:relative}给left、top定值是相对于本来应该在的位置。一般与 .pa 配合使用。

  .dl{display:inline}

  .db{display:block}

  .dn{display:none !important}

  以上3个不想多说，重要，非常重要，实用，非常实用。<div class=”bd dn”></div>你只用敲两个字母，这一层就没了。

  .in{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;

  background:url(http://img.china.alibaba.com/images/cn/home/070214/new_l.gif) no-repeat}

  “新”图标

  .ih{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;

  background:url(http://img.china.alibaba.com/images/cn/home/070214/hot_l.gif) no-repeat}

  “热”图标

  好用！不过要求前面元素float，记得配合margin属性调整位置。示例：

  <div class=”bd l23″>

  <div class=”l”>ddddddddddddddddddd</div><div class=”ml7 mt5 in”></div>

  <div class=”c”></div>

  </div>

  .oh{overflow:hidden} 隐藏超出的内容

  .tc{text-align:center} 文字居中

  .bn{border:none !important} 消除border，有!important加权。

  .b_1{border:1px solid #B8B8B8}

  .bt_1{border-top:1px solid #ff7300}

  .bt_2{border-top:1px dashed #CCC}

  .bt_3{border-top:1px dashed #FFB980}

  .bl_1{border-left:1px dashed #CCC}

  .bg_1{background-color:#FFF1E6}

  .bg_2{background-color:#F0F0F0}

  .bg_3{background-color:#9ACD68}

  Border和background系列就不说了

  .o_1{opacity:.7;filter:alpha(opacity=70)}

  .o_2{opacity:.9;filter:alpha(opacity=90)}

  两个透明属性，给喜欢透明层的用。

  .l17{line-height:17px;}

  .l20{line-height:20px}

  .l23{line-height:23px}

  .l15p{line-height:150%}

  这里需要强调，line-height是最常用的属性之一，出于兼容的考虑页面所有文字都应该具有line-height属性（这一属性可被子元素 继承，所以不用担心浪费笔墨）。至于用px 还是用 % 建议用px，不同浏览器显示文字的高度是不一样的，用%只会放大这种差异，用px 才能消除差异。% 到底用不用的上呢？当然有用，不考虑高度差异的，象文章内容推荐用 % 当选用不同字号增大的比例是相同的。

  这样，common部分就结束了。

• e>     布局部分layout

  .ma{margin-left:auto;margin-right:auto}

  Div居中样式，这个属性可以让block块级元素自身居中，而不是里面的内容居中

  .w778{width:778px;margin-left:auto;margin-right:auto}

  .w952{width:952px;margin-left:auto;margin-right:auto}

  2个布局用的样式，窄布局下用 .w778 宽布局下用 .w952 自定义布局用。

• f>      列表ul li 专用样式

  可以说这是重中之重了，主页级别的页面大部分的内容都是做在无序列表里面的，其庞大的使用规模，需要有完备的样式支持。

  ul.lzb, ul.lzl {zoom:1} 这两个样式包括下面两个是zoom在ul里的应用

  ul.lzb li{zoom:1;+margin-bottom:-4px} 针对ie下ul li 元素的margin-bottom:4px 的bug（bug出现条件：li 里有float 元素）使用了该样式的li其内可有浮左、浮右div，并且li内可兼容多行结构，这是样式ul.ll20 li无法实现的。（具体案例见xls 文档）

  ul.lzl li{zoom:1;+margin-left:-16px} 这个样式的出现有些不得已，记得前面说过，为了避免ie6下的double margin bug，我们给所有的float元素额外加上了display;inline，这导致float属性的ul 在ie下出现意料之外的缩进问题，只能再增加这个样式来解决这一问题。

  ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}

  ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}

  以上两个样式适用于固定高度的单行li，什么是单行li？指的是li中的文字无换行。

  和height等值的line-height让 li中文字垂直居中。使用了这个样式的li其内可以有浮左、浮右div，是解决单行li兼容的比较好的方式。

  ul.li20 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;

  padding-left:15px}

  ul.li23 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;

  padding-left:15px}

  这两个样式没什么好说的，分别针对li高度20px和23px的li背景样式，背景其实就是一个no repeat的方点。

  ul.ll li{float:left;display:inline}

  ul.lr li{float:right;display:inline}

  想让一个个li象火车一样首位相接吗？用上面两个样式吧，让所有的li浮起来。

  ul.ldl li{display:inline} 这个样式我不太喜欢，同样可以让li象火车一样首位相接，但是代价太大，所有的li都变成inline了，很多css样式对inline的元素无效，包括最基本的width、height、margin-top

  ul.lbt li{border-top:1px dashed #CCC}

  ul.lbl_1 li{border-left:1px solid #000}   

  两个给li加边框的样式，给了li 更好的分隔效果。

  这样，ul li 专用样式部分就结束了。