CSS3模拟书签导航

2015-08-24css教程
314

CSS3模拟书签导航,此特效提供5种展示方式。

CSS3模拟书签导航-科e互联

CSS3模拟书签导航-科e互联

HTML代码:
<section class="main">
<div id="sb-container" class="sb-container">
<div> <span class="sb-icon icon-cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div> <span class="sb-icon icon-flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div> <span class="sb-icon icon-eye"></span>
<h4><span>Browse All</span></h4>
</div>
<div> <span class="sb-icon icon-install"></span>
<h4><span>Install App</span></h4>
</div>
<div> <span class="sb-icon icon-bag"></span>
<h4><span>Productivity</span></h4>
</div>
<div> <span class="sb-icon icon-globe"></span>
<h4><span>All Options</span></h4>
</div>
<div> <span class="sb-icon icon-picture"></span>
<h4><span>User Images</span></h4>
</div>
<div> <span class="sb-icon icon-video"></span>
<h4><span>User Videos</span></h4>
</div>
<div> <span class="sb-icon icon-download"></span>
<h4><span>Download App</span></h4>
</div>
<div> <span class="sb-icon icon-mobile"></span>
<h4><span>Mobile Theme</span></h4>
</div>
<div> <span class="sb-icon icon-camera"></span>
<h4><span>Digital App</span></h4>
</div>
<div>
<h4><span>Profile</span></h4>
<h5><span>We &hearts; color</span></h5>
</div>
</div>
<!-- sb-container -->
</section>
The End

相关推荐

兼做美工之导航条制作过程分享
以下是兼做美工之导航条制作过程分享的完整攻略:...
2023-12-15 css教程
15

样式表CSS布局经验
当我们设计网站时,样式表CSS布局是一个非常重要的部分。它可以使我们的网站看起来更加美观,同时使网站更加易于导航和使用。以下是一些在CSS布局时应该遵循的经验。...
2023-12-15 css教程
59

调整CSS类型的顺序改变链接翻滚效果
要调整CSS类型的顺序以改变链接翻转效果,需要先理解翻转效果是如何实现的。一般情况下,可以使用CSS3的transform属性实现翻转,具体实现方法如下:...
2023-12-15 css教程
15

CSS3波浪效果示例(前端必学)
下面我为大家详细讲解“CSS3波浪效果示例(前端必学)”的完整攻略。...
2023-12-15 css教程
12

CSS3中的display:grid,网格布局介绍
关于 CSS3 中的 display: grid,首先需要了解的是,它是用来进行网格布局的。网格布局是指将一个区域分割成若干个小区域,然后按照一定规则来排列和布局这些小区域。...
2023-12-15 css教程
36

实例讲解使用CSS实现多边框和透明边框的方法
为了实现多边框和透明边框,可以使用CSS中的伪元素以及内外边距来模拟实现。具体步骤如下:...
2023-12-15 css教程
28