阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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>
      

      表格:

      FirstnameLastnameEmail
      JohnDoejohn@example.com
      MaryMoemary@example.com
      JulyDooleyjuly@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 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
       span 4 span 4 span 4
      span 4span 8
      span 6span 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的教程都有!

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

      目录
      目录