文档章节

使用css3制作立体导航栏

w
 wyn5111
发布于 2016/06/27 21:25
字数 262
阅读 9
收藏 0
点赞 0
评论 0

<!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:10px;
          /*制作导航立体风格*/
          box-shadow:8px 8px 5px #f00;
        }
        .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:before{
            content:"";
            color:#666;
            position:absolute;
            top:18px;
            height:20px;
            left:-1px;
            width:1px;
            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);
         
        }
           /*删除第一项和最后一项导航分隔线*/
         .nav li:first-child:before{
           background-image: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>

效果图如下:

© 著作权归作者所有

共有 人打赏支持
w
粉丝 0
博文 10
码字总数 3165
作品 0
西安
CSS导航设计示例收藏

做网站必不可少的是导航栏。随着CSS3的出现,导航栏越做越漂亮,也融入了很多新的设计思考。这里分享一些新颖的CSS导航栏供大家参考。 25个非常棒的CSS3菜单教程 20个极具创意的网站导航菜单...

小微 ⋅ 2012/04/06 ⋅ 0

css3实现3D立体翻转导航特效

css3实现3D立体翻转导航特效 效果描述: 当鼠标悬停在导航上,会有一个立体式翻转效果,效果很逼真 css3特效,不支持低版本浏览器 附件中的案例没有实用任何图片,所以对于大家来说,省去了路...

wybo521 ⋅ 2016/01/18 ⋅ 0

16 个新鲜的 CSS3 在线教程

用CSS3制作令人印象深刻的产品展示 使用jQuery和CSS3制作闪亮的旋钮控制 使用 CoffeeScript 创建一个类 iOS 的界面 使用 CSS3 制作报纸阅读 制作一个 CSS3 动画菜单 使用 jQuery 和 CSS3 制作...

红薯 ⋅ 2012/04/29 ⋅ 4

7 款非常有创意的 CSS3/jQuery 按钮导航

按钮是网页表单交互的灵魂,一套优秀的按钮设计能不仅提升网站整体的用户体验,更重要的是可以在网站互动方面做出非常重要的贡献。那么我们该如何来设计按钮,什么样的按钮才能让用户有交互的...

yykj ⋅ 2012/11/16 ⋅ 12

推荐7个 CSS3 制作的创意下拉菜单效果

使用 jQuery 和 CSS3 制作向下滑动的导航菜单 在线演示 源码下载 2. CSS3 简约风格导航菜单 在线演示 源码下载 3. CSS3 动画下拉菜单 在线演示 源码下载 4. 纯 CSS3 制作的两级菜单 在线演示...

rin9958 ⋅ 2016/06/30 ⋅ 0

最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯 ⋅ 2011/06/17 ⋅ 15

10套精美的免费网站后台管理系统模板

10套精美的免费网站后台管理系统模板下载 大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息。管理后台的设计虽然不像前台界面那样要求设计精美,但...

大道至精 ⋅ 2015/01/29 ⋅ 0

37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草 ⋅ 2012/03/22 ⋅ 11

40款非常棒的 jQuery 插件和制作教程(系列一)

jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让...

未来十年 ⋅ 2012/01/02 ⋅ 0

20 个很酷的使用 CSS3 制作的导航菜单教程

最近关于 HTML5 和 CSS3 的内容挺多的,说明这项技术日趋成熟,本文介绍 20 个效果很酷的导航菜单。 使用 CSS3 创建 Tabbed 导航条 如何使用 CSS3 创建环形菜单 使用纯 HTML/CSS3 创建 Ribb...

红薯 ⋅ 2011/07/06 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 14分钟前 ⋅ 0

spring RESTful

spring RESTful官方文档:http://spring.io/guides/gs/rest-service/ 1. 可以这么去理解RESTful:其实就是web对外提供的一种基于URL、URI的资源供给服务。不是一个原理性知识点。是一个方法论...

BobwithB ⋅ 16分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 18分钟前 ⋅ 0

@Conditional派生注解

@Conditional派生注解(Spring注解版原生的@Conditional作用) 作用:必须是@Conditional指定的条件成立,才给容器中添加组件,配置配里面的所有内容才生效; @Conditional扩展注解 作用(判...

小致dad ⋅ 19分钟前 ⋅ 0

适配器模式

适配器模式 对象适配器 通过私有属性来实现的类适配器 通过继承来实现的接口适配器 通过继承一个默认实现的类实现的

Cobbage ⋅ 23分钟前 ⋅ 0

Java 限流策略

概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃。此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速...

轨迹_ ⋅ 27分钟前 ⋅ 0

GridView和子View之间的间隙

默认的情况下GridView和子View之间会有一个间隙,原因是GridView为了在子View被选中时在子View周围显示一个框。去掉的办法如下: android:listSelector="#0000" 或 setSelector(new ColorDra...

国仔饼 ⋅ 30分钟前 ⋅ 0

idea插件开发

1 刷新页面要使用多线程 2 调试要使用restart bug 不要去关闭调试的idea 否则再次启动会卡住

林伟琨 ⋅ 30分钟前 ⋅ 0

Java 内存模型

物理机并发处理方案 绝大多数计算任务,并不是单纯依赖 cpu 的计算完成,不可避免需要与内存交互,获取数据。内存要拿到数据,需要和硬盘发生 I/O 操作。计算机存储设备与 cpu 之间的处理速度...

长安一梦 ⋅ 37分钟前 ⋅ 0

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 57分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部