<!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. centos jdk 安装

    1)下载JDK 1.7(1.7.0_25) 下载地址为: http://www.Oracle.com/technetwork/java/javase/downloads/jdk7-downloads- ...

  2. Android学习笔记（三）Android开发环境的搭建

    一.配置JAVA环境 二.配置Android开发环境 可以安装adt-bundle-windows,该压缩包一般自带Eclipse.或者安装Android Studio,要注意SDK的版本是否符合要求 ...

  3. js控制键盘按键(回车、空格)

    <script type="text/javascript">  $(function(){         $(document).keypress(function ...

  4. python json数组对象排序

    arr = [{"name": "name_1", "level": 1}, {"name": "name_2 ...

  5. LeetCode 213. House Robber II

    Note: This is an extension of House Robber. After robbing those houses on that street, the thief has ...

  6. Zookeeper，Kafka，Spark关系

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

  7. 安装Mysql，缺少libaio依赖

    安装mysql时报如下错误: xxxxx/mysql/bin/mysqld: error : cannot open shared object file: No such file or direc ...

  8. 【angular】angular如何让传递变量参数+ng-change的使用

    HTML: <div class="form-group"> <label class="col-sm-2 control-label"> ...

  9. ONE WIRE

    以温度温度传感器为例 由三根线,分别为电源,信号,地线 使用GPIO口对信号线进行读操作 //初始化GPIO PC0端口void dht11_init(){ GPIO_InitTypeDef GPIO ...

  10. 面试题-Java基础-线程部分

    1.进程和线程的区别是什么? 进程是执行着的应用程序,而线程是进程内部的一个执行序列.一个进程可以有多个线程.线程又叫做轻量级进程. 2.创建线程有几种不同的方式?你喜欢哪一种?为什么? 有三种方式可 ...