<!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:5px;
          /*制作导航立体风格*/
          box-shadow:4px 4px #999;
        }
        .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;
        }
        .nav a:hover{
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
        }

.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:after{
        position:absolute;
        right:0;
        content:'';
        width:1px;
        height:100%;
        background-image:linear-gradient(to bottom, #f65f57,#f65f57,#f65f57,#666,#f65f57, #f65f57,#f65f57);
        display:inline-block;
        }
        /*删除第一项和最后一项导航分隔线*/
        .nav li:last-child:after{
        display:none;
        }
        /*删除第一项和最后一项导航分隔线*/
        
        .nav a,
        .nav a:hover{
          color:#fff;
          text-decoration: none;
        }

</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. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  2. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  3. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  4. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  5. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  6. css制作导航栏的上下三角

    1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...

  7. 用ul 来制作导航栏的几个要点

    1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...

  8. css3隐藏导航栏总结

    display:none隐藏display:block显示 1.通过hover显示时隐藏元素必须与触发元素存在着关系(父子,兄弟)才能生效,所以推荐用JS完成比较好. 2.隐藏部分的属性直接写在hov ...

  9. CSS制作导航栏

    最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...

随机推荐

  1. response.addCookie(cookie)添加cookie失败.

    两个if循环能进来,创建的两个cookie也能通过控制台输出.  但是却添加失败. 原因是:request.getRequestDispatcher("/MainFrame").f ...

  2. Jquery Easyui与Jquery Bootstrap(Metronic Bootstrap)的简单比较

    1,通常来看WEB前端用 bootstrap 比较好,后台用EASYUI比较好.Easyui适合工厂企业的管理系统如ERP,CRM之类的,Bootstrap适用于多屏跨设备浏览. 简言之,一个适合上班 ...

  3. Zookeeper，Kafka，Spark关系

    Kafka中ZooKeeper的用途 正如ZooKeeper用于分布式系统的协调和促进,Kafka使用ZooKeeper也是基于相同的原因.ZooKeeper用于管理.协调Kafka代理.每个Kafk ...

  4. Chapter 21_5 替换

    gsub函数的第三个参数不仅是一个字符串,还可以是一个函数或table. 如果是函数,gsub会在每次找到匹配时调用该函数.调用时的参数是捕获到的内容,该函数的返回值作为要替换的字符串. 如果是tab ...

  5. SQL语句获取数据库中的表主键，自增列，所有列

    SQL语句获取数据库中的表主键,自增列,所有列   获取表主键 1:SELECT TABLE_NAME,COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_U ...

  6. sphinx cmd command

    D:\iso\gaoqiao\app\sphinx\bin\indexer.exe -c D:\iso\gaoqiao\app\sphinx\bin\sphinx.conf --all --rotat ...

  7. python字符串和列表

    import sys#sys.argv[0] 被设定为指定模块的全名#脚本名和附加参数传入一个名为 sys.argv 的字符串列表.你能够获取这个列表通过执行 import sys,列表的长度大于等于 ...

  8. 低功耗蓝牙BLE外围模式(peripheral)-使用BLE作为服务端

    低功耗蓝牙BLE外围模式(peripheral)-使用BLE作为服务端 Android对外模模式(peripheral)的支持 从Android5.0开始才支持 关键术语和概念 以下是关键BLE术语和 ...

  9. CSU 1812 三角形和矩形

    湖南省第十二届大学生计算机程序设计竞赛$J$题 计算几何. #pragma comment(linker, "/STACK:1024000000,1024000000") #inc ...

  10. java 随机生成11位 组合

    public static String generate8RateUuid() {          String[] chars = new String[] { "a", & ...