第一部分:效果展示(默认是白色的横条,当鼠标移到某一块,该块变为黄色,并向上凸起)
第二部分:整体代码(在代码中有相关重点知识的解析)
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>css3突出显示动画导航 - 52dvd素材网</title> <style> * { /* Basic CSS reset */ margin:0; padding:0; } body { /* These styles have nothing to do with the ribbon */ background:url(Images/dark_wood.png) 0 0 repeat; padding:35px 0 0; margin:auto; text-align:center; /*text-align表示把文本排列到中间。*/ } .ribbon { display:inline-block; /*方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,*/ /*比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如*/ /*vertical-align: top;来使元素顶部对齐。*/ } .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; /*!*transparent表示默认值。边框颜色为透明。*!*/ } .ribbon a:link, .ribbon a:visited { color:#000; /*设置字体颜色为黑色*/ text-decoration:none; /*默认。定义标准的文本。*/ float:left; height:3.5em; overflow:hidden; } /*在span标签的字上添加白色背景,并添加向上的动画*/ .ribbon span { background:#fff; display:inline-block; line-height:3em; /*设置span标签的高为3em*/ padding:0 1em; /*设置a与span标签之间左右的距离分别为1em,其中1em等于16px*/ margin-top:0.5em; /*设置span标签离整个div的高8px*/ position:relative; /*position分类 :*/ /*1、absolute*/ /*生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。*/ /*元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/ /*2、fixed*/ /*生成绝对定位的元素,相对于浏览器窗口进行定位。*/ /*元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/ /*3、relative*/ /*生成相对定位的元素,相对于其正常位置进行定位。*/ /*因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。*/ /*4、static */ /*默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。*/ /*5、inherit */ /*规定应该从父元素继承 position 属性的值。*/ -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; } /*鼠标移到a标签上span标签背景色变成黄色,向上移动*/ /*只要是a标签,有链接的就会自动设置鼠标移上去箭头变成手*/ .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; } </style> </head> <body> <br><br><br><br><br><br><br><br><br> <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> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <div style="text-align:center;clear:both"> <!--clear:both表示清除全部样式--> <p><font color="#FFFFFF">适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</font></p><br> <p><font color="#FFFFFF">来源:</font><a href="http://www.52dvd.com/" target="_blank"><font color="#FFFFFF">52dvd素材网</font></a></p> </div> </body> </html>