Pure表单_pure-table-CSDN博客

本文链接：https://blog.csdn.net/bzd_111/article/details/52661612

Pure表单
Pure菜单

Pure表单

默认竖直分隔样式

添加class=”pure-class”

<table class="pure-table">

    <thead>
        <tr>
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

添加水平分隔样式

添加class=”pure-table-bordered”

<table class="pure-table pure-table-bordered">

    <thead>
        <tr>
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

只有水平分隔样式

添加class=”pure-table-horizontal”

<table class="pure-table pure-table-horizontal">

    <thead>
        <tr>
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

添加斑马纹（一条有颜色一条没有颜色间隔）

给tr标签添加class=”pure-table-odd”

<table class="pure-table">

    <thead>
        <tr>
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr class=" pure-table-odd ">
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
        <tr class=" pure-table-odd ">
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
        <tr class=" pure-table-odd ">
            <td>zxc</td>
            <td>man</td>
            <td>23</td>
        </tr>
        <tr>
            <td>zdy</td>
            <td>woman</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

Pure菜单

pure-menu-disabled：菜单不可点击
pure-menu-selected：菜单已经被选中

水平菜单

添加class=pure-menu-hozizontal”

<div class="pure-menu pure-menu-horizontal" >
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-disabled"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link ">Python</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Linux</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Shell</a></li>
    </ul>
</div>

竖直菜单

添加class=pure-menu-horizontal

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" class="pure-menu-link">Python</a>
             <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Django</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flask</a></li>
             </ul>
        </li>
    </ul>

</div>

水平下拉菜单

添加一个ul标签，再添加class=”pure-menu-link”

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" class="pure-menu-link">Python</a>
             <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Django</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flask</a></li>
             </ul>
        </li>
    </ul>
</div>

竖直滚动菜单

需要添加class控制高和宽

<style>
.custom-restricted {
        height: 150px;
        width: 200px;
        border: 1px solid gray;
        border-radius: 4px;
    }
</sytle>
<div class="pure-menu pure-menu-scrollable custom-restricted">

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">11</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">22</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">22</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">33</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">44</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">55</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">66</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">77</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">88</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">99</a></li>
    </ul>
</div>

分页菜单

整合了按钮和菜单

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
            <li class="pure-menu-item"><a class="pure-button  pure-menu-link" href="#">&#171;</a></li>
            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">1</a></li>
            <li class="pure-menu-item"><a class="pure-button pure-button-active pure-menu-link"  href="#">2</a></li>
            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">3</a></li>
            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">4</a></li>
            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">5</a></li>
            <li class="pure-menu-item"><a class="pure-button next pure-menu-link" href="#">&#187;</a></li>
    </ul>
</div>