pz-box带边框和白色背景的包围Demo code (右侧是显示效果):
<div class="pz-box">
<div class="pz-box-header">
这是box的标题 <span>附属说明</span>
</div>
<div class="pz-box-content">
box内容
</div>
</div>
pz-block仅划分一个包围区域,没有边框和背景Demo code (右侧是显示效果):
<div class="pz-block">
<div class="pz-block-header">
这是block的标题 <span>附属说明</span>
</div>
<div class="pz-block-content">
block内容
</div>
</div>
4月27日消息,在近期推出的Android旗舰机型中,HTC One无疑是一款引人注目的设备,有人钟意于它精良的设计,也有人怀疑所谓Ultrapixel技术实际的拍摄性能。日前,科技网站Pocket- lint就对HTC One在实际使用中的拍摄性能进行了测试。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div class="pz-box">
<div class="pz-box-header">
Table的标题 <span>附属说明</span>
</div>
<table class="pz-table" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>李雷</td>
<td>男</td>
<td>14</td>
<td>
<div class="pz-btn-group">
<a href="javascript:;" class="pz-btn" title="查看"><i class="icon-search"></i></a>
<a href="javascript:;" class="pz-btn" title="删除"><i class="icon-remove"></i></a>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>韩梅梅</td>
<td>女</td>
<td>13</td>
<td>
<div class="pz-btn-group">
<a href="javascript:;" class="pz-btn" title="查看"><i class="icon-search"></i></a>
<a href="javascript:;" class="pz-btn" title="删除"><i class="icon-remove"></i></a>
</div>
</td>
</tr>
......
</table>
</div>
| # | 姓名 | 性别 | 年龄 |
|---|---|---|---|
| 1 | 李雷 | 男 | 14 |
| 2 | 韩梅梅 | 女 | 13 |
| 3 | Jim | 男 | 14 |
| 4 | Lucy | 女 | 13 |
| 5 | Lily | 女 | 13 |
| 6 | 林涛 | 男 | 13 |
| 7 | Uncle Wang | 男 | 40 |
| 8 | 高慧 | 女 | 26 |
| 9 | Polly | n/a | 1 |
| 10 | Lady GaGa | ? | ? |
<div class="pz-box">
<div class="pz-box-header">
Table的标题 <span>附属说明</span>
</div>
<table class="pz-table pz-border-table" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>李雷</td>
<td>男</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>韩梅梅</td>
<td>女</td>
<td>13</td>
</tr>
......
</table>
</div>
| # | 姓名 | 性别 | 年龄 | 操作 |
|---|---|---|---|---|
| 1 | 李雷 | 男 | 14 | |
| 2 | 韩梅梅 | 女 | 13 | |
| 3 | Jim | 男 | 14 | |
| 4 | Lucy | 女 | 13 | |
| 5 | Lily | 女 | 13 | |
| 6 | 林涛 | 男 | 13 | |
| 7 | Uncle Wang | 男 | 40 | |
| 8 | 高慧 | 女 | 26 | |
| 9 | Polly | n/a | 1 | |
| 10 | Lady GaGa | ? | ? |
空格或换行符,否则会出现很丑的缝隙!div class="pz-form"做为外框包围你的表单div class="pz-form-row"包围div class="pz-form-label"包围div class="pz-form-input"包围div class="pz-form-footer"容器内pz-form-text, pz-form-password, pz-form-select,
pz-form-radio, pz-form-checkbox, pz-form-textarea, pz-form-file<span class="pz-form-hint"></span><i class="pz-form-required icon-pencil" title="必填"></i>大按钮必须附带一个大图标,为按钮内部<i> 标签增加一个big-iconclass即可变出大图标
<i class="icon-glass"></i> 成生图标: