阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 效果演示

    Foundation 特性

    以下效果为演示

    引入样式和JS

    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
    

    按钮

    <div>
        <button type="button" class="button">Default</button>
        <button type="button" class="button secondary">Secondary</button>
        <button type="button" class="button success">Success</button>
        <button type="button" class="button info">Info</button>
        <button type="button" class="button warning">Warning</button>
        <button type="button" class="button alert">Alert</button>
    </div>
    

    表格:

    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com
    <table>
        <thead>
            <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>
    

    图片弹窗:

    <div class="clearing-assembled"><div>
        <a href="#" class="clearing-close">×</a>
        <div class="visible-img" style="display: none">
            <div class="clearing-touch-label"></div>
                <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="">
                <p class="clearing-caption"></p>
                <a href="#" class="clearing-main-prev">
                    <span></span>
                </a>
                <a href="#" class="clearing-main-next">
                    <span>
                    </span>
                </a>
            </div>
            <img class="clearing-preload-next" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="">
            <img class="clearing-preload-prev" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="">
            <div class="carousel">
                <ul class="clearing-thumbs" data-clearing="">
                    <li>
                        <a href="javascript:;" class="th">
                            <img src="http://www.axihe.com/rock200x100.jpg">
                            </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="th">
                            <img src="http://www.axihe.com/skies200x100.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="th">
                            <img src="http://www.axihe.com/lights200x100.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    

    警告:

    绿色警告框 ×
    红色警告框 ×
    <div style="padding-top:10px;">
        <div data-alert="" class="alert-box success">
            绿色警告框
            <a href="#" class="close" style="text-decoration:none;">×</a>
        </div>
        <div data-alert="" class="alert-box alert">
            红色警告框
            <a href="#" class="close" style="text-decoration:none;">×</a>
        </div>
    </div>
    

    网格:

    span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
     span 4  span 4  span 4
    span 4 span 8
    span 6 span 6
    span 12
    <table class="table grid">
        <tbody>
            <tr>
                <td>span 1</td>
                <td>span 1</td>   
                <td>span 1</td>
                <td>span 1</td>
                <td>span 1</td>   
                <td>span 1</td>
                <td>span 1</td>
                <td>span 1</td>   
                <td>span 1</td>
                <td>span 1</td>
                <td>span 1</td>   
                <td>span 1</td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;span 4</td>
                <td colspan="4">&nbsp;span 4</td>   
                <td colspan="4">&nbsp;span 4</td>
            </tr>
            <tr>
                <td colspan="4">span 4</td>
                <td colspan="8">span 8</td>   
            </tr>
            <tr>
                <td colspan="6">span 6</td>
                <td colspan="6">span 6</td>   
            </tr>
            <tr>
                <td colspan="12">span 12</td>
            </tr>
        </tbody>
    </table>
    

    进度条:

    75%
    50%
    <div style="padding-top:10px;">
        <div class="progress alert">
            <span class="meter" style="position:relative;width:75%">
                <span class="percentage">75%</span>
            </span>
        </div>
        <div class="progress">
            <span class="meter" style="position:relative;width:50%">
                <span class="percentage">50%</span>
            </span>
        </div>
    </div>
    

    面板:

    Gray Panel

    Panel Text

    Blue Panel

    Panel Text

    <div class="row">
        <div class="medium-6 columns">
            <div class="panel">
                <h3>Gray Panel</h3>
                <p>Panel Text</p>
            </div>
        </div>
        <div class="medium-6 columns">
            <div class="panel callout">
                <h3>Blue Panel</h3>
                <p>Panel Text</p>
            </div>
        </div>
    </div>
    

    下拉菜单:

    Dropdown Button
    <div style="padding-top:10px;">
        <a href="#" data-dropdown="id01" 
            class="button dropdown warning" 
            style="text-decoration:none;">Dropdown Button</a>
        <ul id="id01" data-dropdown-content="" class="f-dropdown">
            <li>
                <a href="#" style="text-decoration:none;">Link 1</a>
                </li>
            <li>
                <a href="#" style="text-decoration:none;">Link 2</a>
            </li>
            <li>
                <a href="#" style="text-decoration:none;">Link 3</a>
            </li>
        </ul>
        <!-- 初始化 Foundation JS -->
        <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
    </div>
    

    手风琴效果:

    <div style="padding-top:10px;">
        <ul class="accordion" data-accordion="">
            <li class="accordion-navigation">
                <a href="#demo" style="text-decoration:none;" aria-expanded="false">Accordion 1</a>
                <div id="demo" class="content">
                Demo 1 - Lorem ipsum dolor sit amet....
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo2" style="text-decoration:none;" aria-expanded="false">Accordion 2</a>
                <div id="demo2" class="content">
                Demo 2 - Lorem ipsum dolor sit amet....
                </div>
            </li>
            <li class="accordion-navigation active">
                <a href="#demo3" style="text-decoration:none;" aria-expanded="true">Accordion 3</a>
                <div id="demo3" class="content active">
                Demo 3 - Lorem ipsum dolor sit amet....
                </div>
            </li>
        </ul>
        <!-- 初始化 Foundation JS -->
        <script>
        $(document).ready(function() {
            $(document).foundation();
        })
        </script>
    </div>
    

    顶部导航:


    <div style="padding-top:10px;">
        <nav class="top-bar" data-topbar="">
            <section class="top-bar-section">
                <ul class="left">
                    <li class="active">
                        <a href="#" style="text-decoration:none;font-size:14px;">
                            <i class="fi-home"></i> Home
                        </a>
                    </li>
                    <li>
                        <a href="#" style="text-decoration:none;font-size:14px;">
                            <i class="fi-torso"></i> Sign Up
                        </a>
                    </li>
                    <li>
                        <a href="#" style="text-decoration:none;font-size:14px;">
                            <i class="fi-magnifying-glass"></i> Search
                        </a>
                    </li>    
                </ul>
            </section>
        </nav>
    </div>
    

    模态框:

    <div style="padding-top:10px;">
        <button type="button" class="button success" 
            data-reveal-id="myModal">点击打开模态框</button>
        <div id="myModal" class="reveal-modal" 
            data-reveal="" aria-hidden="true" 
            style="display: none; opacity: 1; visibility: hidden; top: 100px;">
            <h2>模态框标题。</h2>
            <p>模态框文本。</p>
            <p>模态框文本。</p>
            <a class="close-reveal-modal">×</a>
        </div>
        <script>
            $(document).ready(function() {
                $(document).foundation();
            })
        </script>
        <div class="reveal-modal-bg" style="display: none;"></div>
    </div>
    

    开关:


    <div style="padding-top:10px;">
        <div class="switch" style="float:left;">
            <input id="mySwitch4" type="checkbox">
            <label for="mySwitch4"></label>
        </div>
        <div class="switch" style="padding-left:25px;float:left;">
            <input id="mySwitch5" type="checkbox" checked="">
            <label for="mySwitch5"></label>
        </div>
        <div class="switch round" style="padding-left:25px;float:left;">
            <input id="mySwitch6" type="checkbox" checked="">
            <label for="mySwitch6"></label>
        </div>
    </div>
    

    滑块:

    50
    <div style="padding-top:10px;">
        <div class="row">
            <div class="medium-12 columns">
                <div class="row">
                    <div class="small-10 medium-11 columns">
                        <div class="range-slider" data-slider="50" 
                            data-options="display_selector:#slider2;">
                            <span class="range-slider-handle" role="slider" 
                                tabindex="0" aria-valuemin="0" aria-valuemax="100" 
                                aria-valuenow="50" 
                                style="transform: translateX(351px);">
                            </span>
                            <span class="range-slider-active-segment" style="width: 50%;">
                            </span>
                        </div>
                    </div>
                    <div class="small-2 medium-1 columns">
                        <span id="slider2" style="display: block;margin-top: 14px;">50</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 初始化 Foundation JS -->
        <script>
            $(document).ready(function() {
                $(document).foundation();
            })
        </script>
    </div>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录