Azzip admin layout

全局样式 doctype, 链接和默认字体

链接和字体

默认字体14px (在content类里面是12px)

字体行高20px

字体颜色值 #333333

html doctype

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
......

布局控制左、右浮动，清理浮动

系统内置了class.pz-left和.pz-right表示左浮动和右浮动

使用div class="clear"可以清理其上下容器的浮动

使用div class="clearfix"可以当前容器的浮动内容

使用<i class="i5"></i>产生5px的高度空间（同时清理上下容器浮动）

上例支持i5, i10, i15, i20, i30各种高度

css position:fixed不支持ie6，Azzip UI提供了一个基于css的兼容方案

使用div class="pz-fix-top"让一个div容器固定浮动到页面顶部

使用div class="pz-fix-bottom"让一个div容器固定浮动到页面底部

使用div class="pz-fix-left"让一个div容器固定浮动到页面左侧

使用div class="pz-fix-right"让一个div容器固定浮动到页面右侧

液态预设栅格 DEMO 主侧栏、双栏、三栏、四栏

div.pz-fluid-main

div.pz-fluid-side

div.pz-fluid-main

div.pz-fluid-dual

div.pz-fluid-triple

div.pz-fluid-quad

液态预设栅格 DEMO code

<div class="pz-fluid-layout">
    <div class="pz-fluid-main">
        <div class="pz-box">div.pz-fluid-main</div>
    </div>
    <div class="pz-fluid-side">
        <div class="pz-box">div.pz-fluid-side</div>
    </div>
    <div class="pz-fluid-side">
        <div class="pz-box">div.pz-fluid-side</div>
    </div>
    <div class="pz-fluid-main">
        <div class="pz-box">div.pz-fluid-main</div>
    </div>
    <div class="pz-fluid-dual">
        <div class="pz-box">div.pz-fluid-dual</div>
    </div>
    <div class="pz-fluid-dual">
        <div class="pz-box">div.pz-fluid-dual</div>
    </div>
    <div class="pz-fluid-triple">
        <div class="pz-box">div.pz-fluid-triple</div>
    </div>
    <div class="pz-fluid-triple">
        <div class="pz-box">div.pz-fluid-triple</div>
    </div>
    <div class="pz-fluid-triple">
        <div class="pz-box">div.pz-fluid-triple</div>
    </div>
    <div class="pz-fluid-quad">
        <div class="pz-box">div.pz-fluid-quad</div>
    </div>
    <div class="pz-fluid-quad">
        <div class="pz-box">div.pz-fluid-quad</div>
    </div>
    <div class="pz-fluid-quad">
        <div class="pz-box">div.pz-fluid-quad</div>
    </div>
    <div class="pz-fluid-quad">
        <div class="pz-box">div.pz-fluid-quad</div>
    </div>
</div>

液态12栅格 DEMO 12个等分液态栅格，兼容IE6

液态12栅格 DEMO code

<div class="pz-fluid-grid">
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
    <div class="pz-grid1">
        <div class="pz-box">1</div>
    </div>
</div>

<div class="pz-fluid-grid">
    <div class="pz-grid4">
        <div class="pz-box">4</div>
    </div>
    <div class="pz-grid4">
        <div class="pz-box">4</div>
    </div>
    <div class="pz-grid4">
        <div class="pz-box">4</div>
    </div>
</div>

<div class="pz-fluid-grid">
    <div class="pz-grid4">
        <div class="pz-box">4</div>
    </div>
    <div class="pz-grid8">
        <div class="pz-box">8</div>
    </div>
</div>

<div class="pz-fluid-grid">
    <div class="pz-grid5">
        <div class="pz-box">5</div>
    </div>
    <div class="pz-grid7">
        <div class="pz-box">7</div>
    </div>
</div>

<div class="pz-fluid-grid">
    <div class="pz-grid6">
        <div class="pz-box">6</div>
    </div>
    <div class="pz-grid6">
        <div class="pz-box">6</div>
    </div>
</div>

<div class="pz-fluid-grid">
    <div class="pz-grid12">
        <div class="pz-box">12</div>
    </div>
</div>

Azzip UI - 全局样式和布局