<!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. codewars-random（2）

    找出数组中的间谍 思路一:遍历一遍数组,开始前将flag设置为0:将count设为0:每当出现一个奇数(注意负数)count加1,当count大于等于2时将flag至为1: 再遍历一遍数组,如果fla ...

  2. select的onchange事件获取不了option的value

    一,select的onchange事件获取不了option的value是当你使用JQ($("#xxx").val())方法的获取的值一直提示undefined 二,解决方法: va ...

  3. 干货云集 WOT 2017全球架构与运维技术峰会揭密技术难点

    WOT,World Of Tech专注互联网IT技术领域,是一场不容错过的技术盛会!WOT 2017全球架构与运维技术峰会三大章节,15大技术专场,60+国内外一线互联网精英大咖站台,打造兼顾技术视野 ...

  4. trove taskmanger api

    trove-taskmanager服务在配置实例,管理实例的生命周期以及对数据库实例执行操作方面做了很多工作.taskmanager会通过Nova.Swift的API访问Openstack基础的服务, ...

  5. 单身福利来了：VR恋人为你量身定制一个女朋友

    相对于传统视频体验,VR视频给人带来了更加真实的体验.特别是对于单身狗来说,能在VR中拥有一个虚拟的恋人可谓是莫大的心灵安慰.近日,上海微雁文化传媒有限公司正式发布了首款养成类手机应用VR恋人. VR ...

  6. java 异常的捕获及处理

    在没有异常处理的程序中如果要回避异常,需要使用大量的判断语句,配合所想到的错误状况来捕捉程序中可能发生的错误.但是这样势必会导致程序运行效率降低.java异常处理机制具有易于使用,可自定义异常类,处理 ...

  7. 获取usb设备父系或子代

    /// <summary> /// 获取设备父系 /// </summary> /// <param name="driver"></pa ...

  8. swift3.0 原生GET请求 POST同理

    swift3.0 原生GET请求  POST同理 func getrequest(){ let url = URL(string: "http://117.135.196.139:" ...

  9. php相关书籍视频

    虽然如今web领域,PHP JSP .NET 并驾齐驱,但PHP用的最广,原因不用我多说. 首先发一个PHP手册,方便查询,这个肯定是学PHP必备的.  下载地址:http://u.115.com/f ...

  10. MySQL语句相关经验总结

    1. 字段自减 UPDATE `table_name` SET `total`=IF(`total` < 1, 0, `total`-1) WHERE `id` = 1; 一般在做字段减法的时候 ...