Skip to main content

页脚(Footer)

简单样式#


<footer class="footer">  <div class="container container--fluid">    <div class="footer__links">      <a class="footer__link-item" href="#url">        Documentation      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        GitHub      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        Blog      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        Contribute      </a>    </div>    <div>Copyright © 2019 Facebook, Inc.</div>  </div></footer>

多列布局#


<footer class="footer">  <div class="container container--fluid">    <div class="row footer__links">      <div class="col footer__col">        <h4 class="footer__title">Docs</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Getting Started            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              API            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              FAQ            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">Community</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Users            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Contribute            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Stack Overflow            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">Social</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              GitHub            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Facebook            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Twitter            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">More</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Tutorial            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Blog            </a>          </li>        </ul>      </div>    </div>    <div class="text--center">      <div class="margin-bottom--sm">        <img          class="footer__logo"          alt="Facebook Open Source Logo"          src="img/fb-oss-dark.png"        />      </div>      Copyright © 2019 Facebook, Inc.    </div>  </div></footer>

夜间模式#


<footer class="footer footer--dark">  <div class="container container--fluid">    <div class="footer__links">      <a class="footer__link-item" href="#url">        Documentation      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        GitHub      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        Blog      </a>      <span class="footer__link-separator">·</span>      <a class="footer__link-item" href="#url">        Contribute      </a>    </div>    <div>Copyright © 2019 Facebook, Inc.</div>  </div></footer>

<footer class="footer footer--dark">  <div class="container container--fluid">    <div class="row footer__links">      <div class="col footer__col">        <h4 class="footer__title">Docs</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Getting Started            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              API            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              FAQ            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">Community</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Users            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Contribute            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Stack Overflow            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">Social</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              GitHub            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Facebook            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Twitter            </a>          </li>        </ul>      </div>      <div class="col footer__col">        <h4 class="footer__title">More</h4>        <ul class="footer__items">          <li class="footer__item">            <a class="footer__link-item" href="#url">              Tutorial            </a>          </li>          <li class="footer__item">            <a class="footer__link-item" href="#url">              Blog            </a>          </li>        </ul>      </div>    </div>    <div class="text--center">      <div class="margin-bottom--sm">        <img          class="footer__logo"          alt="Facebook Open Source Logo"          src="img/fb-oss-dark.png"        />      </div>      Copyright © 2019 Facebook, Inc.    </div>  </div></footer>