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.