CSS3的一个简单导航栏实现

作者： dwqs 字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,导航等相关知识, dwqs 希望在学习及工作中可以帮助到您

201583185706841.jpg (266×269)

上面是一个效果图，代码在下面：

html

<nav>
<ul class="nav-ul">
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/category/frontend">Web前端</a>
<ul>
<li class="nav-effect-1">
<a href="/category/frontend/javascript">JavaScript</a>
</li>
<li class="nav-effect-2">
<a href="/category/frontend/jq">JQuery</a>
</li>
<li class="nav-effect-3">
<a href="/category/frontend/style">CSS</a>
</li>
<li class="nav-effect-4">
<a href="/category/frontend/html">HTML</a>
</li>
</ul>
</li>
<li>

您可能想查找下面的文章:

相关文章

2017-08-06css 固定顶部怎么用css定义一个固定在页面顶部的层
2017-08-06CSS Sprite优化减少HTTP链接数
2017-08-06div overflow 超出隐藏属性使用说明
2017-08-06网页设计经验谈:常用的网页设计工具的收集介绍
2017-08-06css中link和@import的区别分析详解
2017-08-06修复iPhone的safari浏览器上submit按钮圆角bug
2017-08-06Button未设type属性时在非IE6/7中具有submit特性并自动提交form
2017-08-06一个css transform效果很有图片的感觉
2017-08-06firefox和谷歌不显示body背景图片的解决方法
2017-08-06css图标与文字对齐的两种实现方法