基础 CSS 标注基础知识

代码目录

Foundation CSS Callout Basics
HTML实现
HTML实现

Foundation CSS Callout Basics

Foundation CSS 是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

Callout 用于创建面板以存储一些内容。标注是一个元素，我们可以在其中放置任何类型的内容，如文本、图像、视频等。我们可以使用标注类创建标注。在本文中，我们将讨论如何创建基本标注。

Foundation CSS Callout Basics 类：

callout：用于创建标注以放置任何类型的内容。

语法：

<div class="callout">

  ........

</div>

示例 1：以下代码演示了 Callout Basics 以及一些内容和链接。

HTML实现

<!DOCTYPE html>

<html>

  <head>

  <!-- Compressed CSS -->

  <link rel="stylesheet" href=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"

    crossorigin="anonymous">

</head>

  <body>    

  <center>

    <h2 style="color: green;">

      GeeksforGeeks

    </h2>

      <h3>

        Foundation CSS Callout Basics

    </h3>

  </center>

    <div class="callout">

    <h5>

        This is Basic callout.

    </h5>

      <strong>

        GeeksforGeeks

    </strong>

      <p>

      A Computer Science portal for geeks.

      It contains well written, well thought 

      and well explained computer science 

      and programming articles

    </p>

          <a href=" https://www.geeksforgeeks.org/">

       https://www.geeksforgeeks.org/

    </a>

  </div>

</body>

  </html>

输出：

示例 2：以下代码演示了带有一些内容、按钮和图像的标注基础知识。

HTML实现

<!DOCTYPE html>

<html>

  <head>

  <!-- Compressed CSS -->

    <link rel="stylesheet" href=

" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"

      crossorigin="anonymous">

</head>

  <body>    

    <center>

        <h2 style="color: green;">

            GeeksforGeeks

        </h2>

          <h3>

            Foundation CSS Callout Basics

        </h3>

    </center>

      <div class="callout">

        <h5>

            This is Basic callout.

        </h5>

          <strong>

            GeeksforGeeks

        </strong>

            <p>

            A Computer Science portal for geeks. 

            It contains well written, well thought 

              and well explained computer science 

              and programming articles

        </p>

          <button class="button">

            Button 1

        </button>  

    </div>

      <div class="callout">

        <h5>This is Basic callout.</h5>

        <strong>GeeksforGeeks Image</strong><br>

                  <img src=

" https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="">

          <img src=

" https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" alt="">

    </div>

</body>

  </html>

输出：

参考： https:/ /get.foundation/sites/docs/callout.html#basics

注：本文由VeryToolz翻译自 Foundation CSS Callout Basics ，非经特殊声明，文中代码和图片版权归原作者 singh_teekam所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。