📜  基础 CSS 原型设计箭头实用程序

📅  最后修改于: 2022-05-13 01:56:44.038000             🧑  作者: Mango

基础 CSS 原型设计箭头实用程序

Foundation CSS 是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架,可以轻松设计美观的响应式网站、应用程序和电子邮件,这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用,例如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI,因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具,用于在移动设备上更快地呈现。

原型箭头实用程序是一种视觉表示或图标,有助于导航到网站中的不同页面。它通常用作导航的下拉箭头。

基础 CSS 原型设计箭头实用程序类:

arrow-*:这个类可以用来指向特定的方向。

星号 (*) 标记可以通过指定方向来替换,即向下、向右、向上和向左。

使用类:

  • 右箭头:显示右导航箭头
  • 左箭头:显示左导航箭头
  • 向上箭头:显示向上的导航箭头
  • 向下箭头:显示向下的导航箭头

示例 1:在此示例中,我们将了解 Foundation CSS 中的向上和向下箭头实用程序。

HTML


  

    
    

  

    

        GeeksforGeeks     

           

Up and Down Arrow Utility

           
    
    
           
    
  


HTML


  

    
    

  

    

        GeeksforGeeks     

           

Right and Left Coloured Arrow Utility

           
    
    
       
    
  


输出:

示例 2:在此示例中,我们将了解左右箭头实用程序,并为它们提供一些样式

HTML



  

    
    

  

    

        GeeksforGeeks     

           

Right and Left Coloured Arrow Utility

           
    
    
       
    
  

输出:

参考: https://get.foundation/sites/docs/prototyping-utilities.html#arrow-utility