One Span-白红宇

One Span

阅读量：6427 次

发布时间：2019-06-23

本文共 1218 字，大约阅读时间需要 4 分钟。

一行<span>标签实现一个小图标，更可以与<a>标签搭配形成导航栏（灵感来源于OneDIV网站）。

源码放在Github：

Code

默认效果

与<a>标签搭配


        
         
     nav-name

Example

图片描述

E-mail

默认效果

图片描述

导航栏菜单效果


        
         
     Ribbon

图片描述

Wifi

默认效果

图片描述

导航栏菜单效果


        
         
     Wifi

图片描述

Eye

默认效果

图片描述

导航栏菜单效果

Eye

图片描述

Ribbon

默认效果

图片描述

导航栏菜单效果


        
         
     Ribbon

图片描述

Arrow-left

默认效果

图片描述

导航栏菜单效果


        
         
     Arrow-left

图片描述

Arrow-right

默认效果

图片描述

导航栏菜单效果


        
         
     Arrow-right

图片描述

Arrow-top

默认效果

图片描述

导航栏菜单效果


        
         
     Arrow-top

图片描述

Arrow-down

默认效果

图片描述

导航栏菜单效果


        
         
     Arrow-down

图片描述

Search

默认效果

图片描述

导航栏菜单效果


        
         
     Search

图片描述

OK

默认效果

图片描述

导航栏菜单效果

OK

图片描述

Remove

默认效果

图片描述

导航栏菜单效果


        
         
     Remove

图片描述

Th-large

默认效果

图片描述

导航栏菜单效果


        
         
     Th-large

图片描述

Th

默认效果

图片描述

导航栏菜单效果

Th

图片描述

Th-list

默认效果

图片描述

导航栏菜单效果


        
         
     Th-list

图片描述

Clock

默认效果

图片描述

导航栏菜单效果


        
         
     Clock

图片描述

Blackboard

默认效果

图片描述

导航栏菜单效果


        
         
     Blackboard

图片描述

Calendar

默认效果

图片描述

导航栏菜单效果


        
         
     Calendar

图片描述

Smile

默认效果

图片描述

导航栏菜单效果


        
         
     Smile

图片描述

Loader

默认效果

图片描述

导航栏菜单效果


        
         
     Loader

图片描述

Loader-animated

默认效果

图片描述

导航栏菜单效果


        
         
     Loader-animated

图片描述

转载地址：http://lnfga.baihongyu.com/

你可能感兴趣的文章

Spring Boot：Consider defining a bean of type '*.*.*' in your configuration解决方案

iOS 9.0 NSString汉字怎么生存UTF8

查看>>

js中判断对象是否存在

查看>>

会话状态已创建一个会话 ID，但由于响应已被应用程序刷新而无法保存它。

查看>>

web.xml之context-param,listener,filter,servlet加载顺序及其周边

windows2008中IIS7详细安装图文教程加fastcgi模式PHP配置教程

查看>>

你知道吗？Web的26项基本概念和技术

查看>>

SQL SERVER 2005 同步复制技术(转)

*CodeIgniter框架集成支付宝即时到账SDK