使用css3和伪元素制作的一个立体导航条供大家参考，代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS制作立体导航</title>

    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">

    <style>

        body{

          background: #ebebeb;

        }

        .nav{

          width:560px;

          height: 50px;

          font:bold 0/50px Arial;

          text-align:center;

          margin:40px auto 0;

          background: #f65f57;

          /*制作圆*/

          border-radius:8px;

          /*制作导航立体风格*/

          box-shadow:0px 7px red;

        }

        .nav a{

          display: inline-block;

          -webkit-transition: all 0.2s ease-in;

          -moz-transition: all 0.2s ease-in;

          -o-transition: all 0.2s ease-in;

          -ms-transition: all 0.2s ease-in;

          transition: all 0.2s ease-in;

          color:#fff;

        }

        .nav a:hover{

          -webkit-transform:rotate(10deg);

          -moz-transform:rotate(10deg);

          -o-transform:rotate(10deg);

          -ms-transform:rotate(10deg);

          transform:rotate(10deg);

          text-decoration:none;

        }

        .nav li{

          position:relative;

          display:inline-block;

          padding:0 16px;

          font-size: 13px;

          text-shadow:1px 2px 4px rgba(0,0,0,.5);

          list-style: none outside none;

        }

         /*删除第一项和最后一项导航分隔线*/

         .nav li:first-child::before{

           background-image:none;

           }

        /*使用伪元素制作导航列表项分隔线*/

        .nav li:before{

            content:"";

            color:#666;

            position:absolute;

            top:18px;

            height:20px;

            left:-1px;

            width:1px;

            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);

        }

</style>

</head>

<body>

    <ul class="nav">

        <li><a href="">Home</a></li>

        <li><a href="">About Me</a></li>

        <li><a href="">Portfolio</a></li>

        <li><a href="">Blog</a></li>

        <li><a href="">Resources</a></li>

        <li><a href="">Contact Me</a></li>

    </ul>

</body>

</html>

使用css3和伪元素制作的一个立体导航条的更多相关文章

  1. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  2. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  3. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  4. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  5. 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...

  6. 伪元素黑魔法：一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  7. css3(::before)伪元素的使用

    1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=" ...

  8. CSS-用伪元素制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  9. CSS了一个浮动导航条

    绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,bo ...

随机推荐

  1. lucene+盘古分词

    一般的网站都会有都会有搜索的功能,一般实现搜索主要有三种方案 第一种是最差的,也是最不推荐的,使用数据库的模糊查询例如select * form table where 字段 like XXX,这种查 ...

  2. SVN报错：can't open file db/txn-current-lock:permission denied 解决方法

    其实这个问题是这样的.下面我举个例子:比如版本库SVN是root用户创建的但是启动服务的时候没有选择root启动,而是在其他用户转托管太下启动的,所以只能读不能写. 解决方法:停止svn服务:kill ...

  3. C# - ADO.Net 调用存储过程

    ------------------------存储过程调用,创建DataSet:----------------------//数据库连接字符串string connStr = @"Dat ...

  4. C/C++输入输出

    一. cin>>当碰到空格或换行符'\n'时,输入结束 该操作符是根据后面变量的类型读取数据. 输入结束条件 :遇到Enter.Space.Tab键. 对结束符的处理 :丢弃缓冲区中使得输 ...

  5. JVM学习之强引用、弱引用、软引用、虚引用

    转自:http://my.oschina.net/ydsakyclguozi/blog/404389 多谢博主分享 1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象 ...

  6. php不同形式的实现a-z的26个字母的输出

    直接上代码: for($i=ord('a'), $n=ord('z'); $i<=$n; $i++){ echo chr($i),PHP_EOL; } echo PHP_EOL; $char = ...

  7. 正确的注销PHP SESSION

    /* 1.每个页面都必须开启session_start()后才能在每个页面里面使用session. 2.session_start()初始化session,第一次访问会生成一个唯一会话ID保存在客户端 ...

  8. 用Ultraiso刻录U盘装系统

    一.准备工作: 1.一个U盘,也可以是手机或数码相机内存卡通过读卡器与电脑连接: 2.一个系统ISO镜像: 3.刻录软件UltraISO,用单文件绿色版就可以了. 二.开始刻录U盘: 1.启动Ultr ...

  9. 要不要用STL的问题——真理是越辩越明的～

    QtWidgets的维护者 Marc Mutz 有一篇博客比较详尽的介绍了 Qt自己的容器.介绍了何时用什么比较好https://marcmutz.wordpress.com/effective-qt ...

  10. android中获取root权限的方法以及原理（转）

    一. 概述 本文介绍了android中获取root权限的方法以及原理,让大家对android 玩家中常说的“越狱”有一个更深层次的认识. 二. Root 的介绍 1. Root 的目的 可以让我们拥有 ...