CSS例子总结

1. UL

效果：

 

HTML:

<div class="gz"><ul><li class="tit">活动时间：1月5日至1月10日</li><li class="tit">活动规则：</li><li>1.邀好友助威“雨神”，以排行榜为准；<br />2.前50名获“萧敬腾演唱会门票”一张；<br />3.助威超过10人送1888；<br />4.规则第“2”“3”条每人限领取一次；<br />5.1月16日前领取验证码，逾期视为自动放弃。</li><li class="bom">本活动最终解释权归XXX微信所有</li></ul></div>

 CSS:

.gz { width: 90%; margin-left: 5%; display: inline-block;}.gz ul { list-style: none; padding: 0; margin: 0;}.gz li { font-size: 12px; line-height: 20px; display: block;}.gz li.tit { font-size: 18px; margin-bottom: 10px;}.gz li.bom { text-align: center; color:rgba(150,150,150, 1.0); margin-top: 10px;}

 

 

2.类表格

效果图：

 

HTML：

<div class="per_list"><ul><li class="tit"><span class="pe">用户昵称</span><span class="pe">时间</span></li><li>暂无纪录</li><li><span class="pe">suhai3688</span><span class="pe">2014-12-21</span></li><li><span class="pe">suhai3688</span><span class="pe">2014-12-22</span></li><li><span class="pe">suhai3688</span><span class="pe">2014-12-23</span></li></ul></div>

 

CSS:

<!--  设置 字体 /背景颜色 -->body{ width:100%; font-family:"Microsoft YaHei",Arial; background:rgba(0,0,0, 1.0); margin:0 auto; padding:0; height:auto;  color:rgba(255,255,255, 1.0); font-size:12px;}<!--  设置  外边框 /外间距/大小等 -->.per_list {margin-top: 10px;margin-left: 3%;width:94%;border:1px solid rgba(255,0,0, 1.0);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;min-height: 36px;height: auto;padding-bottom: 5px;}<!-- 去掉标识符/内边距/外边距 -->.per_list ul {list-style: none; padding: 0; margin: 0;}.per_list li {line-height: 36px; height: 36px; color:rgba(255,255,255, 1.0); font-size: 14px; text-align: center;}.per_list li span {text-align: center; width: 32%; display: inline-block;}.per_list li span.pe {text-align: center; width: 45%; display: inline-block;}<!-- 奇数行背景 -->.per_list li:nth-of-type(odd) {background: rgba(50,50,50, 1.0); color:rgba(255,255,255, 1.0); line-height: 36px; height: 36px;}.per_list li.tit { width: 100%; height: 36px; line-height: 36px; color:rgba(255,255,255, 1.0);background: rgba(255,0,0, 1.0);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}.per_list li.tit span {text-align: center; width: 32%; display: inline-block;}<!-- 设置span等分，然后居中-->.per_list li.tit span.pe {text-align: center; width: 45%; display: inline-block;}

 
分析：

外层DIV如图：

 设置了外边距和顶外边距。

 

去掉UL样式时，如图：

 

3.