Azzip UI - 基础css

包围 区块 排版 表格 翻页类 表单 按钮 图标

包围 pz-box, pz-box-header, pz-box-content

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>
这是box的标题 附属说明
box内容

区块 pz-block, pz-block-header, pz-block-content

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>
这是block的标题 附属说明
block内容

排版 h1 ~ h6, p, strong

内容展示

h3 大标题 Lorem ipsum

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

h1 这是标题,Lorem small 小字ipsum

h2 这是标题,Lorem small 小字ipsum

h3 这是标题,Lorem small 小字ipsum

h4 这是标题,Lorem small 小字ipsum

h5 这是标题,Lorem small 小字ipsum
h6 这是标题,Lorem small 小字ipsum

表格 pz-table

Table的标题 附属说明
# 姓名 性别 年龄 操作
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" 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>

带边框线的表格 pz-table pz-border-table

Table的标题 附属说明
# 姓名 性别 年龄
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>

紧凑的表格 pz-table pz-compact-table

Table的标题 附属说明
# 姓名 性别 年龄 操作
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 ? ?

翻页类 pz-pagination, pz-pager

Table的标题 附属说明
翻页类的 a 标签和 span 标签之间不能有空格换行符,否则会出现很丑的缝隙!
a 标签表示每页的链接, span 标签是当前页面(不可点击)

表单 pz-form

Form的标题 附属说明
名字
这是提示 pz-form-hint
Pwd
必填啊
状态Status
申请理由
不少于800字
性别
性取向
上传照片
使用div class="pz-form"做为外框包围你的表单
每一行用div class="pz-form-row"包围
每行标签使用div class="pz-form-label"包围
表单输入内容使用div class="pz-form-input"包围
表单提交按钮请包围到div class="pz-form-footer"容器内
表单元素class: 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>

按钮 pz-btn, pz-small-btn, pz-big-btn

普通 pz-btn

提交 pz-btn pz-btn-submit

危险 pz-btn pz-btn-danger

反色 pz-btn pz-btn-reverse

警告 pz-btn pz-btn-warning

成功! pz-btn pz-btn-success

信息 pz-btn pz-btn-info

被禁用 pz-btn pz-btn-disabled

带图标按钮 < ...><i class="icon-ok-sign"></i> 文字</a>


大按钮
pz-btn pz-big-btn pz-btn-submit
input 和 a 标签都可以做成按钮样式,不建议使用 button 标签(老浏览器有兼容问题)

大按钮必须附带一个大图标,为按钮内部<i> 标签增加一个big-iconclass即可变出大图标

图标 icon-xxx, big-icon

<i class="icon-glass"></i> 成生图标:
图标支持多颜色多尺寸,只需设置style: font-color:#xxx, font-size:xxpx

图标一览

 icon-glass  icon-music  icon-search  icon-envelope  icon-heart  icon-star  icon-star-empty  icon-user  icon-film  icon-th-large  icon-th  icon-th-list  icon-ok  icon-remove  icon-zoom-in  icon-zoom-out  icon-off  icon-signal  icon-cog  icon-trash  icon-home  icon-file  icon-time  icon-road  icon-download-alt  icon-download  icon-upload  icon-inbox  icon-play-circle  icon-repeat  icon-refresh  icon-list-alt  icon-lock  icon-flag  icon-headphones  icon-volume-off  icon-volume-down  icon-volume-up  icon-qrcode  icon-barcode  icon-tag  icon-tags  icon-book  icon-bookmark  icon-print  icon-camera  icon-font  icon-bold  icon-italic  icon-text-height  icon-text-width  icon-align-left  icon-align-center  icon-align-right  icon-align-justify  icon-list  icon-indent-left  icon-indent-right  icon-facetime-video  icon-picture  icon-pencil  icon-map-marker  icon-adjust  icon-tint  icon-edit  icon-share  icon-check  icon-move  icon-step-backward  icon-fast-backward  icon-backward  icon-play  icon-pause  icon-stop  icon-forward  icon-fast-forward  icon-step-forward  icon-eject  icon-chevron-left  icon-chevron-right  icon-plus-sign  icon-minus-sign  icon-remove-sign  icon-ok-sign  icon-question-sign  icon-info-sign  icon-screenshot  icon-remove-circle  icon-ok-circle  icon-ban-circle  icon-arrow-left  icon-arrow-right  icon-arrow-up  icon-arrow-down  icon-share-alt  icon-resize-full  icon-resize-small  icon-plus  icon-minus  icon-asterisk  icon-exclamation-sign  icon-gift  icon-leaf  icon-fire  icon-eye-open  icon-eye-close  icon-warning-sign  icon-plane  icon-calendar  icon-random  icon-comment  icon-magnet  icon-chevron-up  icon-chevron-down  icon-retweet  icon-shopping-cart  icon-folder-close  icon-folder-open  icon-resize-vertical  icon-resize-horizontal  icon-bar-chart  icon-twitter-sign  icon-facebook-sign  icon-camera-retro  icon-key  icon-cogs  icon-comments  icon-thumbs-up  icon-thumbs-down  icon-star-half  icon-heart-empty  icon-signout  icon-linkedin-sign  icon-pushpin  icon-external-link  icon-signin  icon-trophy  icon-github-sign  icon-upload-alt  icon-lemon  icon-phone  icon-check-empty  icon-bookmark-empty  icon-phone-sign  icon-twitter  icon-facebook  icon-github  icon-unlock  icon-credit  icon-rss  icon-hdd  icon-bullhorn  icon-bell  icon-certificate  icon-hand-right  icon-hand-left  icon-hand-up  icon-hand-down  icon-circle-arrow-left  icon-circle-arrow-right  icon-circle-arrow-up  icon-circle-arrow-down  icon-globe  icon-wrench  icon-tasks  icon-filter  icon-briefcase  icon-fullscreen  icon-group  icon-link  icon-cloud  icon-beaker  icon-cut  icon-copy  icon-paper-clip  icon-save  icon-sign-blank  icon-reorder  icon-list-ul  icon-list-ol  icon-strikethrough  icon-underline  icon-table  icon-magic  icon-truck  icon-pinterest  icon-pinterest-sign  icon-google-plus-sign  icon-google-plus  icon-money  icon-caret-down  icon-caret-up  icon-caret-left  icon-caret-right  icon-columns  icon-sort  icon-sort-down  icon-sort-up  icon-envelope-alt  icon-undo  icon-legal  icon-dashboard  icon-comment-alt  icon-comments-alt  icon-bolt  icon-sitemap  icon-umbrella  icon-paste  icon-lightbulb  icon-exchange  icon-cloud-download  icon-cloud-upload  icon-user-md  icon-stethoscope  icon-suitcase  icon-bell-alt  icon-coffee  icon-food  icon-file-alt  icon-building  icon-hospital  icon-ambulance  icon-medkit  icon-fighter-jet  icon-beer  icon-h-sign  icon-plus-sign-2  icon-double-angle-left  icon-double-angle-right  icon-double-angle-up  icon-double-angle-down  icon-angle-left  icon-angle-right  icon-angle-up  icon-angle-down  icon-desktop  icon-laptop  icon-tablet  icon-mobile  icon-circle-blank  icon-quote-left  icon-quote-right  icon-spinner  icon-circle  icon-reply  icon-github-alt  icon-folder-close-alt  icon-folder-open-alt  icon-linkedin