您现在的位置是：网站首页> 编程资料编程资料

CSS3的一个简单导航栏实现html+css+js实现导航栏滚动渐变效果不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS中的导航栏和下拉菜单的实现纯CSS实现导航栏下划线跟随滑动效果使用CSS制作立体导航栏div+css实现带箭头的面包屑导航栏CSS导航栏及弹窗示例代码纯CSS实现导航栏Tab切换效果CSS利用伪元素实现导航栏斜线分隔

2021-09-05 925人已围观

简介 这篇文章主要介绍了CSS3的一个简单导航栏实现,无需用到JavaScript,文章最后附有demo,需要的朋友可以参考下

201583185706841.jpg (266×269)

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

html

XML/HTML Code复制内容到剪贴板
  1. <nav>  
  2.    <ul class="nav-ul">  
  3.       <li>  
  4.             <a href="/">首页a>  
  5.       li>  
  6.       <li>  
  7.             <a href="/category/frontend">Web前端a>  
  8.             <ul>  
  9.                    <li class="nav-effect-1">  
  10.                        <a href="/category/frontend/javascript">JavaScripta>  
  11.                   li>  
  12.                   <li class="nav-effect-2">  
  13.                        <a href="/category/frontend/jq">JQuerya>  
  14.                   li>    
  15.                   <li class="nav-effect-3">  
  16.                        <a href="/category/frontend/style">CSSa>  
  17.                   li>    
  18.                  <li class="nav-effect-4">  
  19.                      <a href="/category/frontend/html">HTMLa>  
  20.                  li>    
  21.             ul>  
  22.       li>  
  23.       <li>     
  24.            <a href="/category/end">后端a>  
  25.            <ul>  
  26.                  <li class="nav-effect-1">  
  27.                     <a href="/category/end/python-end">Pythona>  
  28.                 li>  
  29.                 <li class="nav-effect-2">  
  30.                    <a href="category/end/php">PHPa>  
  31.                 li>    
  32.           ul>  
  33.       li>  
  34.       <li>  
  35.           <a href="/category/trivial">琐碎杂类a>  
  36.           <ul>  
  37.                <li class="nav-effect-1">  
  38.                   <a href="/category/trivial/linux">Linuxa>  
  39.                li>  
  40.                <li class="nav-effect-2">  
  41.                  <a href="/category/trivial/ajax">Ajaxa>  
  42.                li>    
  43.          ul>  
  44.      li>  
  45.       <li>  
  46.             <a href="/category/life">我的生活a>  
  47.            <ul>  
  48.                   <li class="nav-effect-1">  
  49.                      <a href="/category/life/college">Collegea>  
  50.                   li>  
  51.                   <li class=提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：使用CSS3和Checkbox实现JQuery的一些效果jQuery+CSS3实现自动轮播切换焦点图特效源码jQuery+CSS3实现的鼠标点击显示动画过渡效果特效源码基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效源码

    下一篇：CSS中使用image data URI来处理图片的方法使用icon fonts来辅助CSS处理图片css-sprite使用详解

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网