css框架 grid.html 转

转自http://hi.baidu.com/yongqihejiqing/home

"

span-x: 设置它的 float:left; width:(x*40-10)px; margin-right:10px; border: 设置border后时， padding-right:4px; margin-right:5px; border: 1px solid #eee; 当它们同时设置时（ CSS名字是：层叠样式表）， 所以margin-right:5px会覆盖上面的margin-right:10px; <div class="span-1 border"><p>[email protected]</p></div> 它的样式为： float:left; width:30px;/*(x*40-10)px;*/ padding-right:4px; margin-right:5px; border: 1px solid #eee; . last,div. last的主要是为了:margin-right:0; 它平时用在span-x这样的类中，而又因为span-x有margin-right:10px;用. last或者div. last后 margin-right:0;会覆盖margin-right:10px; <div class="prepend-1 span-1"><p>php</p></div> <div class="prepend-20 span-1 append-1  last"><p>zht</p></div> 解释上面代码： 第一个div:     prepend-1意思为:         padding-left:40px;     span-1意思为：         width:30px;         margin-right:10px; 第二个div:     prepend-20意思为：         padding-left:800px;(20*40px)     span-1意思为：         width:30px;         margin-right:10px;     append-1意思为：         padding-right:40px;      last意思为：         margin-right:0px; 最后 CSS代码为： 第一个div:{     padding-left:40px;     width:30px;     margin-right:10px; } 第二个div:{     padding-left:800px;     width:30px;     margin-right:0px;     padding-right:40px; }

"