课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > CSS3实现美观的飘带样式菜单及代码
  • CSS3实现美观的飘带样式菜单及代码

    发布:合肥web培训      来源:达内新闻      时间:2016-05-27

  • 合肥web培训专家分享一个非常有特色的CSS3菜单插件,拥有飘带的外观,同时,具有3D立体的视觉效果,有需要的达内web培训班学员可以参考着用下。代码如下:

    HTML代码

    <div class='ribbon'>
     <a href='#'><span>Home</span></a>
     <a href='#'><span>About</span></a>
     <a href='#'><span>Services</span></a>
     <a href='#'><span>Contact</span></a>
    </div>

    CSS代码

    * {
     /* Basic CSS reset */
     margin:0;
     padding:0;
    }

    body {
     /* These styles have nothing to do with the ribbon */
     background:url(dark_wood.png) 0 0 repeat;
     padding:35px 0 0;
     margin:auto;
     text-align:center;
    }

    .ribbon {
     display:inline-block;
    }

    .ribbon:after, .ribbon:before {
     margin-top:0.5em;
     content: "";
     float:left;
     border:1.5em solid #fff;
    }

    .ribbon:after {
     border-right-color:transparent;
    }

    .ribbon:before {
     border-left-color:transparent;
    }

    .ribbon a:link, .ribbon a:visited {
     color:#000;
     text-decoration:none;
     float:left;
     height:3.5em;
     overflow:hidden;
    }

    .ribbon span {
     background:#fff;
     display:inline-block;
     line-height:3em;
     padding:0 1em;
     margin-top:0.5em;
     position:relative;

     -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
     transition: background-color 0.2s, margin-top 0.2s;
    }

    .ribbon a:hover span {
     background:#FFD204;
     margin-top:0;
    }

    .ribbon span:before {
     content: "";
     position:absolute;
     top:3em;
     left:0;
     border-right:0.5em solid #9B8651;
     border-bottom:0.5em solid #fff;
    }

    .ribbon span:after {
     content: "";
     position:absolute;
     top:3em;
     right:0;
     border-left:0.5em solid #9B8651;
     border-bottom:0.5em solid #fff;
    }

    推荐文章

上一篇:超好看的jQuery百叶窗焦点图动画及代码

下一篇:web前端工程师的10个最新工具

最新开班日期  |  更多

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB零基础全日制班

WEB零基础全日制班

开班日期:3-08

WEB前端业余班

WEB前端业余班

开班日期:3-08

WEB前端就业班

WEB前端就业班

开班日期:3-08

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56