<!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: 0 7px 0 #ba4a45;

            }

            .nav a{

              display: inline-block;

              /* a元素的过渡属性：1、设置所有a标签过渡；2、过渡时间；3、速度曲线：以慢速开始的过渡效果 */

                -webkit-transition: all 0.2s ease-in;/* Safari 和 Chrome */

                -moz-transition: all 0.2s ease-in;/* Firefox */

               -o-transition: all 0.2s ease-in;/* Opera */

               -ms-transition: all 0.2s ease-in;/* IE 9 */

               transition: all 0.2s ease-in;

            }

            .nav a:hover{

                /* 鼠标移上时的效果；定义2D旋转10度 */

              -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: 14px;

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

              list-style: none outside none;

            }

            /*制作导航分隔线效果*/

            .nav li::before,

            .nav li::after{

              content:"";

              position:absolute;

              top:14px;

              height: 25px;

              width: 1px;

            }

            .nav li::after{

              right: 0;

              /* 线性渐变 */

              background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

              background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

              background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

              background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

              background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

            }

            .nav li::before{

              left: 0;

              background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

              background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

              background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

              background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

              background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

            }

            /*删除导航第一个导航项左边的分隔线*/

            .nav li:first-child::before{

              background: none;

            }

            /*删除导航最后一个导航右边的分隔线*/

            .nav li:last-child::after{

              background: none;

            }

            .nav a,

            .nav a:hover{

              color:#fff;

              text-decoration: none;

            }

        </style>

    </head>

    <body>

        <ul class="nav">

        <li><a href="">首页</a></li>

        <li><a href="">个人简介</a></li>

        <li><a href="">作品集</a></li>

        <li><a href="">博客</a></li>

        <li><a href="">资源</a></li>

        <li><a href="">联系我</a></li>

        </ul>

    </body>

</html>

效果图：

1

2

总结：

1、body部分用无序列表

2、（1）hover

　　　　鼠标移上时的效果。

　　（2）疑问::before和:before的区别

　　　　简单来说单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

　　　　w3c关于css选择器的规范：

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

　　　　简单翻译：伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

　　　　

　　　　那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

　　　　所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

　　　　

CSS3学习-用CSS制作立体导航栏的更多相关文章

  1. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  2. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  3. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  4. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  5. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  6. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  7. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

  8. 纯CSS制作二级导航

    一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...

  9. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. poj3422K方格取数——最大费用最大流

    题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...

  2. Enum定义位域， 即可以通过位操作来产生未命名的值

    通过FlagsAttribute可以实现. // A bit field or flag enumeration of harvesting seasons. [Flags] public enum ...

  3. matlab函数 bwperim

    功能:查找二值图像的边缘. 用法: BW2 = bwperim(BW1) BW2 = bwperim(BW1,conn) BW2 = bwperim(BW1,conn)表示从输入图像BW1中返回只包括 ...

  4. window下redis如何查看版本号

    1.启动服务端:redis-server 2.启动客户端:redis-cli 3.客户端输入:info 即可.

  5. 《Java多线程编程核心技术》读后感（九）

    当interrupt方法遇到wait方法 当线程呈wait()状态时,调用线程对象的interrupt()会出现InterruptedException异常 package Third; public ...

  6. （三）整合SSH测试项目

    整合struts 和 spring 预期:如果可以在action中能够正确调用service里面的方法执行并返回到一个页面中:那么我们认定struts和spring的整合是成功的. 编写JUnit测试 ...

  7. jquery、javascript实现(get、post两种方式)跨域解决方法

    一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx ...

  8. Linear Algebra - Matrix

    1. 矩阵 定义:有 \(m*n\) 个数 \(a_{ij}(i=1,2,\cdots,m; j=1,2,\cdots,n)\) 排成的 \(m\) 行 \(n\) 列的数表 \[ \begin{Bm ...

  9. Python机器学习笔记：朴素贝叶斯算法

    朴素贝叶斯是经典的机器学习算法之一,也是为数不多的基于概率论的分类算法.对于大多数的分类算法,在所有的机器学习分类算法中,朴素贝叶斯和其他绝大多数的分类算法都不同.比如决策树,KNN,逻辑回归,支持向 ...

  10. 【转】insert忽略重复、mysql插入操作跳过、插入覆盖覆盖、mysql更新重复

    需求背景:一般情况,插入数据的时候,有脏数据的情况,主键重复的话,直接insert into 会报错的,然后下面的sql都不再执行了,如果可以确定后面的数据可以覆盖前面的数据,直接用replace i ...