虽然写了很多的标准布局，写了很多的css，但是觉得自己还是很粗糙 , 并不能达到灵活多变，shiningRay 推荐了 Mollio 给我 。

Mollio CSS/HTML Templates

学习Mollio , 一来是学习一下成熟多变的css的写法，二来是看一下Mollio给出了Styleguide (PDF) ，并尝试制作一份项目的Styleguide。

以下我总结了我眼中Mollio的几个对我有帮助的技巧(会不断更新):

1. 给”big div” 添加 ” position:relative; ” (这个的好处是大大减少了float和clear的使用)

2. div中尽量自上而下写大小,避免不规则的margin,padding (例如: header{margin-bottom:5},content{margin-bottom:10px;footer{ margin-bottom:0;})

3. form中可以尝试 <label for=”input-1″><span>用户名</span><input type=”text” name=”input-1″/><br /></label>作为一行 (这个方式我觉得很好，<span><input> float:left; , <br/>清楚浮动)

4. form中使用fieldset会比div更有魅力~~

5. 连接标签为 More ，的优化可以这样, <a href=”#” title=”这是混乱八小时的连接” >More<span>这是混乱八小时的连接</span></a>  ( span {left:-9999px; position:absolute; width:900px;} )

6. ol中的序列数字的大小是根据li里面的字体的大小调整的